@use 'sass:math';
$primary: rgba(253,126,20,1);
$primary-text-color: #fff;
$secondary: #6c757d;
$secondary-text-color: #fff;


// color system

// black
$black:    #000 !default;

// White
$white:    #fff !default;

@function shade-color($color, $percentage) {
  @return mix($black, $color, $percentage);
}

@function tint-color($color, $percentage) {
  @return mix($white, $color, $percentage);
}

// Transparent
$transparent: transparent;

// scss-docs-start gray-color-variables
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;

// scss-docs-start color-variables
$blue:    #0d6efd !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #d63384 !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #198754 !default;
$teal:    #20c997 !default;
$cyan:    #0dcaf0 !default;


$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$success-light:       tint-color($success, 80%) !default;
$info-light:          tint-color($info, 80%) !default;
$warning-light:       tint-color($warning, 80%) !default;
$danger-light:        tint-color($danger, 80%) !default;
$primary-text-color: $white !default;
$primary-light:       tint-color($primary, 50%) !default;
$primary-lighter:       tint-color($primary, 90%) !default;
$success-dark:       darken($success, 10%) !default;
$info-dark:          darken($info, 25%) !default;
$warning-dark:       darken($warning, 25%) !default;
$danger-dark:        darken($danger, 10%) !default;
$success-light-alt: tint-color($success, 80%) !default;
$info-light-alt: tint-color($info, 80%) !default;
$warning-light-alt: tint-color($warning, 80%) !default;
$danger-light-alt: tint-color($danger, 80%) !default;



// backgroundcolor
$content-bg-color: $white !default;
$content-bg-color-alt1: $gray-100 !default;
$content-bg-color-alt2: $gray-200 !default;
$content-bg-color-alt3: $gray-300 !default;
$content-bg-color-alt4: $gray-400 !default;
$content-bg-color-alt5: $gray-500 !default;
$content-bg-color-hover: $gray-200 !default;
$content-bg-color-pressed: $gray-400 !default;
$content-bg-color-focus: $gray-200 !default;
$content-bg-color-selected: $primary !default;
$content-bg-color-dragged: $gray-400 !default;
$content-bg-color-disabled: $white !default;
$flyout-bg-color: $white !default;
$flyout-bg-color-hover: $gray-200 !default;
$flyout-bg-color-pressed: $primary !default;
$flyout-bg-color-focus: $gray-200 !default;
$overlay-bg-color: rgba($black, .5) !default;
$table-bg-color-hover: darken($content-bg-color-alt1, 3%) !default;
$table-bg-color-pressed: $gray-300 !default;
$table-bg-color-selected: darken($content-bg-color-alt1, 6%) !default;

// all theme common color
$colorpicker-gradient-1: #f00 !default;
$colorpicker-gradient-2: #ff0 !default;
$ccolorpicker-gradient-3: #0f0 !default;
$colorpicker-gradient-4: #0ff !default;
$colorpicker-gradient-5: #00f !default;
$colorpicker-gradient-6: #f0f !default;
$colorpicker-gradient-7: #ff0004 !default;
$spreadsheet-selection-1: #673ab8;
$spreadsheet-selection-2: #9c27b0;
$spreadsheet-selection-3: #029688;
$spreadsheet-selection-4: #4caf51;
$spreadsheet-selection-5: #fe9800;
$spreadsheet-selection-6: #3f52b5;


// text-color
$content-text-color: $gray-900 !default;
$content-text-color-alt1: $gray-800 !default;
$content-text-color-alt2: $gray-700 !default;
$content-text-color-alt3: $gray-600 !default;
$content-text-color-hover: $gray-900 !default;
$content-text-color-pressed: $gray-900 !default;
$content-text-color-focus: $gray-900 !default;
$content-text-color-selected: $primary-text-color !default;
$content-text-color-dragged: $gray-900 !default;
$content-text-color-disabled: $gray-500 !default;
$placeholder-text-color: $gray-600  !default;
$flyout-text-color: $gray-900 !default;
$flyout-text-color-hover: $gray-900 !default;
$flyout-text-color-pressed: $primary-text-color !default;
$flyout-text-color-focus: $gray-900 !default;
$table-text-color-hover: $gray-900 !default;
$table-text-color-pressed: $gray-900 !default;
$table-text-color-selected: $gray-900 !default;

// icon-color
$icon-color: $gray-600 !default;
$icon-color-hover: $gray-800 !default;
$icon-color-pressed: $gray-900 !default;
$icon-color-disabled: $gray-500 !default;

// border-color
$border-light: $gray-300 !default;
$border: $gray-400 !default;
$border-dark: $gray-500 !default;
$border-hover: $gray-400 !default;
$border-pressed: $gray-500 !default;
$border-focus: $gray-400 !default;
$border-selected: $gray-500 !default;
$border-dragged: $gray-300 !default;
$border-disabled: $gray-300 !default;
$border-warning: $warning !default;
$border-error: $danger !default;
$border-success: $success !default;
$spreadsheet-gridline: $gray-300 !default;
$flyout-border: $gray-300 !default;

// Tooltip
$tooltip-bg-color: $gray-900 !default;
$tooltip-border: $gray-900;
$toooltip-text-color: $white !default;



// shadow
$shadow: 0 .8px 16px rgba($black, .15) !default;
$shadow-sm: 0 2px 4px rgba($black, .075) !default;
$shadow-md: 0 8px 12px rgba($black, .15) !default;
$shadow-lg:  0 16px 48px rgba($black, .175) !default;
$shadow-xl: 0 20px 25px -5px rgba($black, .1), 0 10px 10px -5px rgba($black, .04) !default;
$shadow-2xl: 0 25px 50px -12px rgba($black, .25) !default;
$shadow-inner: inset 0 1px 2px rgba($black, .075) !default;
$shadow-none: 0 0 rgba($black, 0) !default;
$shadow-focus-ring1: 0 0 0 4px rgba($primary, .25) !default;
$shadow-focus-ring2: 0 0 0 4px rgba($primary, .25) !default;
$primary-shadow-focus: 0 0 0 4px rgba(tint-color($primary, 15%), .5) !default;
$secondary-shadow-focus: 0 0 0 4px rgba(tint-color($secondary, 15%), .5) !default;
$success-shadow-focus: 0 0 0 4px rgba(tint-color($success, 15%), .5) !default;
$danger-shadow-focus: 0 0 0 4px rgba(tint-color($danger, 15%), .5) !default;
$info-shadow-focus: 0 0 0 4px rgba(tint-color($info, 15%), .5) !default;
$warning-shadow-focus: 0 0 0 4px rgba(tint-color($warning, 15%), .5) !default;


// fontfamily
$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' !default;


// default font Size
$text-xxs: 10px !default;
$text-xs: 12px !default;
$text-sm: 14px !default;
$text-base: 16px !default;
$text-lg: 18px !default;
$text-xl: 20px !default;
$text-2xl: 24px !default;
$text-3xl: 30px !default;
$text-4xl: 36px !default;
$text-5xl: 48px !default;
$text-6xl: 60px !default;
$text-7xl: 72px !default;
$text-8xl: 96px !default;
$text-9xl: 128px !default;

// heading
$h1-font-size: 40px !default;
$h2-font-size: 32px !default;
$h3-font-size: 28px !default;
$h4-font-size: $text-2xl !default;
$h5-font-size: $text-xl !default;
$h6-font-size: $text-base !default;

// Display

// Line height
$leading-none: 1 !default;
$leading-tight: 1.25 !default;
$leading-snug: 1.375 !default;
$leading-normal: 1.5 !default;
$leading-relaxed: 1.625 !default;
$leading-loose: 2 !default;


// font Weight
$font-weight-lighter:         lighter !default;
$font-weight-light:           300 !default;
$font-weight-normal:          400 !default;
$font-weight-medium:          500 !default;
$font-weight-bold:            700 !default;
$font-weight-bolder:          bolder !default;


// Secondary-button

$secondary-bg-color: $secondary !default;
$secondary-border-color: $secondary-bg-color !default;
$secondary-text-color: $white !default;
$secondary-bg-color-hover: shade-color($secondary-bg-color, 15%) !default;
$secondary-border-color-hover: shade-color($secondary-bg-color, 20%) !default;
$secondary-text-color-hover: $secondary-text-color !default;
$secondary-bg-color-pressed: shade-color($secondary-bg-color, 20%) !default;
$secondary-border-color-pressed: shade-color($secondary-bg-color, 25%) !default;
$secondary-text-color-pressed: $secondary-text-color !default;
$secondary-bg-color-focus: $secondary-bg-color-hover !default;
$secondary-border-color-focus: $secondary-border-color-hover !default;
$secondary-text-color-focus: $secondary-text-color-hover !default;
$secondary-bg-color-disabled: rgba($secondary-bg-color, .65) !default;
$secondary-border-color-disabled: $secondary-bg-color-disabled !default;
$secondary-text-color-disabled: rgba($secondary-text-color, .65) !default;



// Primary-button

$primary-bg-color: $primary !default;
$primary-border-color: $primary !default;
$primary-text: $primary-text-color !default;
$primary-bg-color-hover: shade-color($primary-bg-color, 15%) !default;
$primary-border-color-hover: shade-color($primary-bg-color, 20%) !default;
$primary-text-hover: $primary-text !default;
$primary-bg-color-pressed: shade-color($primary-bg-color, 20%) !default;
$primary-border-color-pressed: shade-color($primary-bg-color, 25%) !default;
$primary-text-pressed: $primary-text-color !default;
$primary-bg-color-focus: $primary-bg-color-hover !default;
$primary-border-color-focus: $primary-border-color-hover !default;
$primary-text-focus: $primary-text !default;
$primary-bg-color-disabled: rgba($primary-bg-color, .65) !default;
$primary-border-color-disabled: $primary-bg-color-disabled !default;
$primary-text-disabled: rgba($primary-text, .65) !default;

// Success-button

$success-bg-color: $success !default;
$success-border-color: $success !default;
$success-text: $white !default;
$success-bg-color-hover: shade-color($success-bg-color, 15%) !default;
$success-border-color-hover: shade-color($success-bg-color, 20%) !default;
$success-text-hover: $success-text !default;
$success-bg-color-pressed: shade-color($success-bg-color, 20%) !default;
$success-border-color-pressed: shade-color($success-bg-color, 25%) !default;
$success-text-pressed: $success-text !default;
$success-bg-color-focus: $success-bg-color-hover !default;
$success-border-color-focus: $success-border-color-hover !default;
$success-text-focus: $success-text !default;
$success-bg-color-disabled: rgba($success-bg-color, .65) !default;
$success-border-color-disabled: $success-bg-color-disabled !default;
$success-text-disabled: rgba($success-text, .65) !default;

// Warning-button
$warning-bg-color: $warning !default;
$warning-border-color: $warning !default;
$warning-text: $black !default;
$warning-bg-color-hover: tint-color($warning-bg-color, 15%) !default;
$warning-border-color-hover: tint-color($warning-bg-color, 10%) !default;
$warning-text-hover: $warning-text !default;
$warning-bg-color-pressed: tint-color($warning-bg-color, 20%) !default;
$warning-border-color-pressed: tint-color($warning-bg-color, 10%) !default;
$warning-text-pressed: $warning-text !default;
$warning-bg-color-focus: $warning-bg-color-hover !default;
$warning-border-color-focus: $warning-border-color-hover !default;
$warning-text-focus: $warning-text !default;
$warning-bg-color-disabled: rgba($warning-bg-color, .65) !default;
$warning-border-color-disabled: $warning-bg-color-disabled !default;
$warning-text-disabled: rgba($warning-text, .65) !default;

// danger-button
$danger-bg-color: $danger !default;
$danger-border-color: $danger !default;
$danger-text: $white !default;
$danger-bg-color-hover: shade-color($danger-bg-color, 15%) !default;
$danger-border-color-hover: shade-color($danger-bg-color, 20%) !default;
$danger-text-hover: $danger-text !default;
$danger-bg-color-pressed: shade-color($danger-bg-color, 20%) !default;
$danger-border-color-pressed: shade-color($danger-bg-color, 25%) !default;
$danger-text-pressed: $danger-text !default;
$danger-bg-color-focus: $danger-bg-color-hover !default;
$danger-border-color-focus: $danger-border-color-hover !default;
$danger-text-focus: $danger-text !default;
$danger-bg-color-disabled: rgba($danger-bg-color, .65) !default;
$danger-border-color-disabled: $danger-bg-color-disabled !default;
$danger-text-disabled: rgba($danger-text, .65) !default;

// Info-button
$info-bg-color: $info !default;
$info-border-color: $info !default;
$info-text: $black !default;
$info-bg-color-hover: tint-color($info-bg-color, 15%) !default;
$info-border-color-hover: tint-color($info-bg-color, 10%) !default;
$info-text-hover: $info-text !default;
$info-bg-color-pressed: tint-color($info-bg-color, 20%) !default;
$info-border-color-pressed: tint-color($info-bg-color, 10%) !default;
$info-text-pressed: $info-text !default;
$info-bg-color-focus: $info-bg-color-hover !default;
$info-border-color-focus: $info-border-color-hover !default;
$info-text-focus: $info-text-hover !default;
$info-bg-color-disabled: rgba($info-bg-color, .65) !default;
$info-border-color-disabled: $info-bg-color-disabled !default;
$info-text-disabled: rgba($info-text, .65) !default;

//Outline button
$primary-outline: $primary-bg-color !default;
$secondary-outline: $secondary-bg-color !default;
$warning-outline: $warning-bg-color !default;
$danger-outline: $danger-bg-color !default;
$success-outline: $success-bg-color !default;
$info-outline: $info-bg-color !default;


// chart series

$series-1: $gray-200;
$series-2: $gray-300;
$series-3: $gray-400;
$series-4: $gray-800;
$series-5: #1f2937;
$series-6: #5e6e22;
$series-7: #978a2b;
$series-8: #6a4314;
$series-9: #52236c;
$series-10: #3a6b6f;
$series-11: #d64f56;
$series-12: #f3a93c;
$skin-name: 'bootstrap5' !default;

//Diagram Palette color
$diagram-palette-background: $white !default;
$diagram-palette-hover-background: $content-bg-color-hover !default;


// color system

// black
$black:    #000 !default;

// White
$white:    #fff !default;

@function shade-color($color, $percentage) {
  @return mix($black, $color, $percentage);
}

@function tint-color($color, $percentage) {
  @return mix($white, $color, $percentage);
}

// Transparent
$transparent: transparent;

// scss-docs-start gray-color-variables
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;

// scss-docs-start color-variables
$blue:    #0d6efd !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #d63384 !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #198754 !default;
$teal:    #20c997 !default;
$cyan:    #0dcaf0 !default;

$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$success-light:       tint-color($success, 80%) !default;
$info-light:          tint-color($info, 80%) !default;
$warning-light:       tint-color($warning, 80%) !default;
$danger-light:        tint-color($danger, 80%) !default;
$primary-text-color: $white !default;
$primary-light:       tint-color($primary, 50%) !default;
$primary-lighter:       tint-color($primary, 90%) !default;
$success-dark:       darken($success, 10%) !default;
$info-dark:          darken($info, 25%) !default;
$warning-dark:       darken($warning, 25%) !default;
$danger-dark:        darken($danger, 10%) !default;
$success-light-alt: tint-color($success, 80%) !default;
$info-light-alt: tint-color($info, 80%) !default;
$warning-light-alt: tint-color($warning, 80%) !default;
$danger-light-alt: tint-color($danger, 80%) !default;

// backgroundcolor
$content-bg-color: $white !default;
$content-bg-color-alt1: $gray-100 !default;
$content-bg-color-alt2: $gray-200 !default;
$content-bg-color-alt3: $gray-300 !default;
$content-bg-color-alt4: $gray-400 !default;
$content-bg-color-alt5: $gray-500 !default;
$content-bg-color-hover: $gray-200 !default;
$content-bg-color-pressed: $gray-400 !default;
$content-bg-color-focus: $gray-200 !default;
$content-bg-color-selected: $primary !default;
$content-bg-color-dragged: $gray-400 !default;
$content-bg-color-disabled: $white !default;
$flyout-bg-color: $white !default;
$flyout-bg-color-hover: $gray-200 !default;
$flyout-bg-color-pressed: $primary !default;
$flyout-bg-color-focus: $gray-200 !default;
$overlay-bg-color: rgba($black, .5) !default;
$table-bg-color-hover: darken($content-bg-color-alt1, 3%) !default;
$table-bg-color-pressed: $gray-300 !default;
$table-bg-color-selected: darken($content-bg-color-alt1, 6%) !default;

// all theme common color
$colorpicker-gradient-1: #f00 !default;
$colorpicker-gradient-2: #ff0 !default;
$ccolorpicker-gradient-3: #0f0 !default;
$colorpicker-gradient-4: #0ff !default;
$colorpicker-gradient-5: #00f !default;
$colorpicker-gradient-6: #f0f !default;
$colorpicker-gradient-7: #ff0004 !default;
$spreadsheet-selection-1: #673ab8;
$spreadsheet-selection-2: #9c27b0;
$spreadsheet-selection-3: #029688;
$spreadsheet-selection-4: #4caf51;
$spreadsheet-selection-5: #fe9800;
$spreadsheet-selection-6: #3f52b5;

// text-color
$content-text-color: $gray-900 !default;
$content-text-color-alt1: $gray-800 !default;
$content-text-color-alt2: $gray-700 !default;
$content-text-color-alt3: $gray-600 !default;
$content-text-color-hover: $gray-900 !default;
$content-text-color-pressed: $gray-900 !default;
$content-text-color-focus: $gray-900 !default;
$content-text-color-selected: $primary-text-color !default;
$content-text-color-dragged: $gray-900 !default;
$content-text-color-disabled: $gray-500 !default;
$placeholder-text-color: $gray-600 !default;
$flyout-text-color: $gray-900 !default;
$flyout-text-color-hover: $gray-900 !default;
$flyout-text-color-pressed: $primary-text-color !default;
$flyout-text-color-focus: $gray-900 !default;
$table-text-color-hover: $gray-900 !default;
$table-text-color-pressed: $gray-900 !default;
$table-text-color-selected: $gray-900 !default;

// icon-color
$icon-color: $gray-600 !default;
$icon-color-hover: $gray-800 !default;
$icon-color-pressed: $gray-900 !default;
$icon-color-disabled: $gray-500 !default;

// border-color
$border-light: $gray-300 !default;
$border: $gray-400 !default;
$border-dark: $gray-500 !default;
$border-hover: $gray-400 !default;
$border-pressed: $gray-500 !default;
$border-focus: $gray-400 !default;
$border-selected: $gray-500 !default;
$border-dragged: $gray-300 !default;
$border-disabled: $gray-300 !default;
$border-warning: $warning !default;
$border-error: $danger !default;
$border-success: $success !default;
$spreadsheet-gridline: $gray-300 !default;
$flyout-border: $gray-300 !default;

// Tooltip
$tooltip-bg-color: $gray-900 !default;
$tooltip-border: $gray-900;
$toooltip-text-color: #f9fafb !default;

// shadow
$shadow: 0 .8px 16px rgba($black, .15) !default;
$shadow-sm: 0 2px 4px rgba($black, .075) !default;
$shadow-md: 0 8px 12px rgba($black, .15) !default;
$shadow-lg:  0 16px 48px rgba($black, .175) !default;
$shadow-xl: 0 20px 25px -5px rgba($black, .1), 0 10px 10px -5px rgba($black, .04) !default;
$shadow-2xl: 0 25px 50px -12px rgba($black, .25) !default;
$shadow-inner: inset 0 1px 2px rgba($black, .075) !default;
$shadow-none: 0 0 rgba($black, 0) !default;
$shadow-focus-ring1: 0 0 0 4px rgba($primary, .25) !default;
$shadow-focus-ring2: 0 0 0 4px rgba($primary, .25) !default;
$primary-shadow-focus: 0 0 0 4px rgba(tint-color($primary, 15%), .5) !default;
$secondary-shadow-focus: 0 0 0 4px rgba(tint-color($secondary, 15%), .5) !default;
$success-shadow-focus: 0 0 0 4px rgba(tint-color($success, 15%), .5) !default;
$danger-shadow-focus: 0 0 0 4px rgba(tint-color($danger, 15%), .5) !default;
$info-shadow-focus: 0 0 0 4px rgba(tint-color($info, 15%), .5) !default;
$warning-shadow-focus: 0 0 0 4px rgba(tint-color($warning, 15%), .5) !default;

// fontfamily
$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' !default;

// default font Size
$text-xxs: 10px !default;
$text-xs: 12px !default;
$text-sm: 14px !default;
$text-base: 16px !default;
$text-lg: 18px !default;
$text-xl: 20px !default;
$text-2xl: 24px !default;
$text-3xl: 30px !default;
$text-4xl: 36px !default;
$text-5xl: 48px !default;
$text-6xl: 60px !default;
$text-7xl: 72px !default;
$text-8xl: 96px !default;
$text-9xl: 128px !default;

// heading
$h1-font-size: 40px !default;
$h2-font-size: 32px !default;
$h3-font-size: 28px !default;
$h4-font-size: $text-2xl !default;
$h5-font-size: $text-xl !default;
$h6-font-size: $text-base !default;

// Display

// Line height
$leading-none: 1 !default;
$leading-tight: 1.25 !default;
$leading-snug: 1.375 !default;
$leading-normal: 1.5 !default;
$leading-relaxed: 1.625 !default;
$leading-loose: 2 !default;

// font Weight
$font-weight-lighter:         lighter !default;
$font-weight-light:           300 !default;
$font-weight-normal:          400 !default;
$font-weight-medium:          500 !default;
$font-weight-bold:            700 !default;
$font-weight-bolder:          bolder !default;

// Secondary-button

$secondary-bg-color: $secondary !default;
$secondary-border-color: $secondary-bg-color !default;
$secondary-text-color: $white !default;
$secondary-bg-color-hover: shade-color($secondary-bg-color, 15%) !default;
$secondary-border-color-hover: shade-color($secondary-bg-color, 20%) !default;
$secondary-text-color-hover: $secondary-text-color !default;
$secondary-bg-color-pressed: shade-color($secondary-bg-color, 20%) !default;
$secondary-border-color-pressed: shade-color($secondary-bg-color, 25%) !default;
$secondary-text-color-pressed: $secondary-text-color !default;
$secondary-bg-color-focus: $secondary-bg-color-hover !default;
$secondary-border-color-focus: $secondary-border-color-hover !default;
$secondary-text-color-focus: $secondary-text-color-hover !default;
$secondary-bg-color-disabled: rgba($secondary-bg-color, .65) !default;
$secondary-border-color-disabled: $secondary-bg-color-disabled !default;
$secondary-text-color-disabled: rgba($secondary-text-color, .65) !default;

// Primary-button

$primary-bg-color: $primary !default;
$primary-border-color: $primary !default;
$primary-text: $primary-text-color !default;
$primary-bg-color-hover: shade-color($primary-bg-color, 15%) !default;
$primary-border-color-hover: shade-color($primary-bg-color, 20%) !default;
$primary-text-hover: $primary-text !default;
$primary-bg-color-pressed: shade-color($primary-bg-color, 20%) !default;
$primary-border-color-pressed: shade-color($primary-bg-color, 25%) !default;
$primary-text-pressed: $primary-text-color !default;
$primary-bg-color-focus: $primary-bg-color-hover !default;
$primary-border-color-focus: $primary-border-color-hover !default;
$primary-text-focus: $primary-text !default;
$primary-bg-color-disabled: rgba($primary-bg-color, .65) !default;
$primary-border-color-disabled: $primary-bg-color-disabled !default;
$primary-text-disabled: rgba($primary-text, .65) !default;

// Success-button

$success-bg-color: $success !default;
$success-border-color: $success !default;
$success-text: $white !default;
$success-bg-color-hover: shade-color($success-bg-color, 15%) !default;
$success-border-color-hover: shade-color($success-bg-color, 20%) !default;
$success-text-hover: $success-text !default;
$success-bg-color-pressed: shade-color($success-bg-color, 20%) !default;
$success-border-color-pressed: shade-color($success-bg-color, 25%) !default;
$success-text-pressed: $success-text !default;
$success-bg-color-focus: $success-bg-color-hover !default;
$success-border-color-focus: $success-border-color-hover !default;
$success-text-focus: $success-text !default;
$success-bg-color-disabled: rgba($success-bg-color, .65) !default;
$success-border-color-disabled: $success-bg-color-disabled !default;
$success-text-disabled: rgba($success-text, .65) !default;

// Warning-button
$warning-bg-color: $warning !default;
$warning-border-color: $warning !default;
$warning-text: $black !default;
$warning-bg-color-hover: tint-color($warning-bg-color, 15%) !default;
$warning-border-color-hover: tint-color($warning-bg-color, 10%) !default;
$warning-text-hover: $warning-text !default;
$warning-bg-color-pressed: tint-color($warning-bg-color, 20%) !default;
$warning-border-color-pressed: tint-color($warning-bg-color, 10%) !default;
$warning-text-pressed: $warning-text !default;
$warning-bg-color-focus: $warning-bg-color-hover !default;
$warning-border-color-focus: $warning-border-color-hover !default;
$warning-text-focus: $warning-text !default;
$warning-bg-color-disabled: rgba($warning-bg-color, .65) !default;
$warning-border-color-disabled: $warning-bg-color-disabled !default;
$warning-text-disabled: rgba($warning-text, .65) !default;

// danger-button
$danger-bg-color: $danger !default;
$danger-border-color: $danger !default;
$danger-text: $white !default;
$danger-bg-color-hover: shade-color($danger-bg-color, 15%) !default;
$danger-border-color-hover: shade-color($danger-bg-color, 20%) !default;
$danger-text-hover: $danger-text !default;
$danger-bg-color-pressed: shade-color($danger-bg-color, 20%) !default;
$danger-border-color-pressed: shade-color($danger-bg-color, 25%) !default;
$danger-text-pressed: $danger-text !default;
$danger-bg-color-focus: $danger-bg-color-hover !default;
$danger-border-color-focus: $danger-border-color-hover !default;
$danger-text-focus: $danger-text !default;
$danger-bg-color-disabled: rgba($danger-bg-color, .65) !default;
$danger-border-color-disabled: $danger-bg-color-disabled !default;
$danger-text-disabled: rgba($danger-text, .65) !default;

// Info-button
$info-bg-color: $info !default;
$info-border-color: $info !default;
$info-text: $black !default;
$info-bg-color-hover: tint-color($info-bg-color, 15%) !default;
$info-border-color-hover: tint-color($info-bg-color, 10%) !default;
$info-text-hover: $info-text !default;
$info-bg-color-pressed: tint-color($info-bg-color, 20%) !default;
$info-border-color-pressed: tint-color($info-bg-color, 10%) !default;
$info-text-pressed: $info-text !default;
$info-bg-color-focus: $info-bg-color-hover !default;
$info-border-color-focus: $info-border-color-hover !default;
$info-text-focus: $info-text-hover !default;
$info-bg-color-disabled: rgba($info-bg-color, .65) !default;
$info-border-color-disabled: $info-bg-color-disabled !default;
$info-text-disabled: rgba($info-text, .65) !default;

//Outline button
$primary-outline: $primary-bg-color !default;
$secondary-outline: $secondary-bg-color !default;
$warning-outline: $warning-bg-color !default;
$danger-outline: $danger-bg-color !default;
$success-outline: $success-bg-color !default;
$info-outline: $info-bg-color !default;

// chart series

$series-1: $gray-200;
$series-2: $gray-300;
$series-3: $gray-400;
$series-4: $gray-800;
$series-5: #1f2937;
$series-6: #5e6e22;
$series-7: #978a2b;
$series-8: #6a4314;
$series-9: #52236c;
$series-10: #3a6b6f;
$series-11: #d64f56;
$series-12: #f3a93c;
$skin-name: 'bootstrap5' !default;
$theme-name: 'bootstrap5' !default;

//Diagram Palette color
$diagram-palette-background: $white !default;
$diagram-palette-hover-background: $content-bg-color-hover !default;

//Message component

//Message Default
$msg-color: #41464b !default;
$msg-bg-color: #e2e3e5 !default;
$msg-border-color: #d3d6d8 !default;
$msg-color-alt1: $gray-900 !default;
$msg-bg-color-alt1: $transparent !default;
$msg-border-color-alt1: #9ca3af !default;
$msg-color-alt2: $white !default;
$msg-bg-color-alt2: $gray-600 !default;
$msg-border-color-alt2:$gray-600 !default;

$msg-icon-color: $gray-900 !default;
$msg-icon-color-alt1: $gray-900 !default;
$msg-icon-color-alt2: $white !default;

$msg-close-icon-color: $icon-color !default;
$msg-close-icon-color-alt1: $icon-color !default;
$msg-close-icon-color-alt2: $white !default;

//Message Danger
$msg-danger-color: #842029 !default;
$msg-danger-bg-color: tint-color($danger, 80%) !default;
$msg-danger-border-color: #f5c2c7 !default;
$msg-danger-color-alt1: $red !default;
$msg-danger-bg-color-alt1: $transparent !default;
$msg-danger-border-color-alt1:$red !default;
$msg-danger-color-alt2: $white !default;
$msg-danger-bg-color-alt2: $red !default;
$msg-danger-border-color-alt2: $red !default;

$msg-danger-icon-color: #842029 !default;
$msg-danger-icon-color-alt1: $red !default;
$msg-danger-icon-color-alt2: $white !default;

$msg-danger-close-icon-color: $icon-color !default;
$msg-danger-close-icon-color-alt1: $icon-color !default;
$msg-danger-close-icon-color-alt2: $white !default;

//Message success
$msg-success-color: #0f5132 !default;
$msg-success-bg-color: tint-color($success, 80%) !default;
$msg-success-border-color:#badbcc !default;
$msg-success-color-alt1: darken($green, 10%) !default;
$msg-success-bg-color-alt1: $transparent !default;
$msg-success-border-color-alt1: $green !default;
$msg-success-color-alt2: $white !default;
$msg-success-bg-color-alt2: $green !default;
$msg-success-border-color-alt2: $green !default;

$msg-success-icon-color: darken($green, 10%) !default;
$msg-success-icon-color-alt1: darken($green, 10%) !default;
$msg-success-icon-color-alt2: $white !default;

$msg-success-close-icon-color: $icon-color !default;
$msg-success-close-icon-color-alt1: $icon-color !default;
$msg-success-close-icon-color-alt2: $white !default;

//Message warning
$msg-warning-color: #664d03 !default;
$msg-warning-bg-color: tint-color($warning, 80%) !default;
$msg-warning-border-color: #ffecb5 !default;
$msg-warning-color-alt1: #866500 !default;
$msg-warning-bg-color-alt1: $transparent !default;
$msg-warning-border-color-alt1: #866500 !default;
$msg-warning-color-alt2: $gray-900 !default;
$msg-warning-bg-color-alt2: $yellow !default;
$msg-warning-border-color-alt2: $yellow !default;

$msg-warning-icon-color: #866500 !default;
$msg-warning-icon-color-alt1: darken($yellow, 25%) !default;
$msg-warning-icon-color-alt2: $gray-900 !default;

$msg-warning-close-icon-color: $icon-color !default;
$msg-warning-close-icon-color-alt1: $icon-color !default;
$msg-warning-close-icon-color-alt2: $gray-900 !default;

//Message Info
$msg-info-color: #055160 !default;
$msg-info-bg-color: #cff4fc !default;
$msg-info-border-color: #b5effb !default;
$msg-info-color-alt1: #066477 !default;
$msg-info-bg-color-alt1: $transparent !default;
$msg-info-border-color-alt1: #066477 !default;
$msg-info-color-alt2: $gray-900 !default;
$msg-info-bg-color-alt2: $cyan !default;
$msg-info-border-color-alt2: $cyan !default;

$msg-info-icon-color: darken($cyan, 25%) !default;
$msg-info-icon-color-alt1: darken($cyan, 25%) !default;
$msg-info-icon-color-alt2: $gray-900 !default;

$msg-info-close-icon-color: $icon-color !default;
$msg-info-close-icon-color-alt1: $icon-color !default;
$msg-info-close-icon-color-alt2: $gray-900 !default;

//App bar
//Light
$appbar-bg-color-alt1: $gray-100 !default;
$appbar-color-alt1: $gray-900 !default;
$appbar-border-color-alt1: $gray-100 !default;
$appbar-hover-bg-color-alt1: rgba(transparent, .056) !default;

//Dark
$appbar-bg-color-alt2: $gray-900 !default;
$appbar-color-alt2: $white !default;
$appbar-border-color-alt2: $gray-900 !default;
$appbar-hover-bg-color-alt2: rgba(255, 255, 255, .08) !default;

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

//rating
$rating-selected-color: $primary !default;
$rating-unrated-color: $gray-600 !default;
$rating-selected-disabled-color: $gray-500 !default;
$rating-unrated-disabled-color: $gray-400 !default;
$rating-selected-hover-color: $gray-600 !default;
$rating-unrated-hover-color: $primary !default;
$rating-pressed-color: lighten($primary, 15%) !default;

//font-icons
$font-icon-8: 8px !default;
$font-icon-9: 9px !default;
$font-icon-10: 10px !default;
$font-icon-12: 12px !default;
$font-icon-13: 13px !default;
$font-icon-14: 14px !default;
$font-icon-15: 15px !default;
$font-icon-16: 16px !default;
$font-icon-17: 17px !default;
$font-icon-18: 18px !default;
$font-icon-20: 20px !default;
$font-icon-22: 22px !default;
$font-icon-24: 24px !default;
$font-icon-26: 26px !default;
$font-icon-28: 28px !default;
$font-icon-32: 32px !default;

$font-size: 12px !default;
$font-weight: 400 !default;
$error-font-color: $danger !default;
$warning-font-color: $yellow !default;
$success-font-color: #198754 !default;
$information-font-color: #0dcaf0 !default;


$font-size: 12px !default;
$font-weight: 400 !default;
$error-font-color: $danger !default;
$warning-font-color: $yellow !default;
$success-font-color: #198754 !default;
$information-font-color: #0dcaf0 !default;

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

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


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

  /*! common core */
  .e-control,
  .e-css  {
    font-family: $font-family;
    font-size: $font-size;
    font-weight: $font-weight;
  }

  $white: #fff;
  $background: #e82824;

  $warning: #ffd800;
  $yellow: #ffff00;
  .e-error {
    @if $skin-name == 'Material3' {
      color: rgba($error-font-color);
    }
    @else {
      color: $error-font-color;
    }
    font-family: $font-family;
    font-size: $font-size;
    font-weight: $font-weight;
  }

  .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;
    filter: alpha(opacity=50);
    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;
    filter: alpha(Opacity=35);
    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') {

  /*! animation keyframes */
  @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% {
      filter: alpha(opacity=0);
      opacity: 0;
    }

    100% {
      filter: alpha(opacity=100);
      opacity: 1;
    }
  }

  @keyframes FadeOut {
    from {
      filter: alpha(opacity=100);
      opacity: 1;
    }

    to {
      filter: alpha(opacity=0);
      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 {
      filter: alpha(opacity=0);
      opacity: 0;
      transform: scale(0);
    }

    to {
      filter: alpha(opacity=100);
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes FadeZoomOut {
    from {
      filter: alpha(opacity=100);
      opacity: 1;
      transform: scale(1);
    }

    to {
      filter: alpha(opacity=0);
      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 {
      filter: alpha(opacity=0);
      opacity: 0;
      transform: perspective(400px) rotateY(180deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }

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

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

  @keyframes FlipYLeftOut {
    from {
      filter: alpha(opacity=100);
      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 {
      filter: alpha(opacity=0);
      opacity: 0;
      transform: rotateY(180deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }
  }

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

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

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

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

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

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

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

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

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

  @keyframes FlipXDownOut {
    from {
      filter: alpha(opacity=100);
      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 {
      filter: alpha(opacity=0);
      opacity: 0;
      transform: rotateX(180deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }
  }

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

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

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

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

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

    to {
      filter: alpha(opacity=0);
      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,AAEAAAAKAIAAAwAgT1MvMj1tS8wAAAEoAAAAVmNtYXDEVMk5AAAI8AAAA+pnbHlmPTVmVgAAFFAAAy08aGVhZCUv6qQAAADQAAAANmhoZWEIVQXdAAAArAAAACRobXR4cAAAAAAAAYAAAAdwbG9jYQLqF7AAAAzcAAAHdG1heHADEwMQAAABCAAAACBuYW1lc0cOBgADQYwAAAIlcG9zdLlNVRcAA0O0AAAcUAABAAAEAAAAAFwEAAAAAAAD+AABAAAAAAAAAAAAAAAAAAAB3AABAAAAAQAAh3LF4l8PPPUACwQAAAAAAOEM0tcAAAAA4QzS1wAAAAAD+AP4AAAACAACAAEAAAAAAAEAAAHcAwQALQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDo2gQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAA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AQEBAQIGCAkLBgYGBgcGBgYLCQgFAwEBhgYHBgULCQgGAgIBAQICBggJCwUGBwYHBgYGCgoHBgICAQECAgYHCgoGBgYHBgcGBQsJCAYCAgEBAgIGCAkLBQcGBgcGBgYKCgcGAgIBAQICBgcKCgYGBrYGBwYFCwkIBgICAQECAgYICQsFBgcGBwYGBgoKBwYCAgEBAgIGBwoKBgYGBwYHBgULCQgGAgIBAQICBggJCwUGBwYHBgYGCgoHBgICAQECAgYHCgoGBga2BgcGBQsJCAYCAgEBAgIGCAkLBQYHBgcGBgYKCgcGAgIBAQICBgcKCgYGBgcGBwYFCwkIBgICAQECAgYICQsFBgcGBwYGBgoKBwYCAgEBAgIGBwoKBgYGtgYHBgYKCgcGAgIBAQICBgcKCgYGBwYGBwYGCgoHBgICAQECAgYHCgoGBgcGBgcGBgoKBwYCAgEBAgIGBwoKBgYHBgYHBgYKCgcGAgIBAQICBgcKCgYGB7cHBgYGCgoHBgICAQECAgYHCgoGBgYHBgcGBQsJCAYCAgEBAgIGCAkLBQYHBgcGBgYKCgcGAgIBAQICBgcKCgYGBgcGBwYFCwkIBgICAQECAgYICQsFBgcAAQAAAAAD9wOSAFQAAAExCQEvBw8OHQEfBgEfBjM/BwE/BjUvDisBDwUDWf5Q/v0HBwgICQgJCQkJCQgICAgHBgYEBAMCAgICAwQEBgYBRwoICAgJCQkICQkJCAgIBwcB7gYFBQQCAgIBAQIDBAUFBwcHCAgJCQgJCQkJCAgICAN3/dkBAwcFBQQDAgEBAQECAwQFBQcHBwgICQgJCQkJCQgICAgH/rkIBgQEAgIBAQEDAwQFBgYCagcHCAkICQkICQkJCAgIBwcHBQUDAwICAgIDBAQGAAAAAgAAAAAD9wP3AFUA1QAAATMfBxEPByEvBzUvAh0BHw4hPw8RLw4rAR8BBR8eOwE/Hi8fDx4DNmMHBgUFAwMCAQECAwMFBQYH/ckGBgUFBAMBARAgDwICAwQFBgYGCAcJCAkKCQI3CgkJCQgIBwcGBgQEBAIBAQEBAgQEBAYGBwcICAkJCQpxBQP82AEBAwMEBQYHCAgJCgoMCw0NDg4PDxAQERESEhITEhQTExQSExISEhEREBAPDw4ODQ0LDAoKCQgIBwYFBAMDAQEBAQMDBAUGBwcJCQoKDAsN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BQUEAwIBWgECAwQEBgYGBgYGBAQDAgEBWgIDBAUFBgYHBgUFAwMCAQECAwQFBwcICQoKCwwMDA39ig0MDAwLCgoJCAcHBQQDAgHeBAMBAQIDBCAFBgYGBgUGBQQDAgIDBCAFBQYGBgYGeiQEAwICAwQFBgUGBgYGBSQEAwEBAQIDBAUFBgYGBgUpBAMCAgMEJAUFBgYGBgUFBAMCAQEBAwQkBQYGBQYGBrQgBAMCAQEDBAUGBQYGBgYFIAQDAgEBAwQFBgYGBgUGAS+eBgYFBQQDAQEBAQMEBQUGBp4CAwQFBQYGBwYFBQMDAgEBAgMDBQUGBwYGBQUEAwL8zQECAwMFBQYHBgYFBQQDAp4GBgUFBAMBAQEBAwQFBQYGngIDBAUFBgYHBgUFAwMCAgABAgIGBwoLBQYHBn69vX4GBwYFCwoHBgICAT/+pgcGBQUDAwIBAQICBAUFBgednQcGBQUDAwIBAQICBAUFBgednQcGBQUDAwIBAQICBAUFBgcBWg0MDAwLCgoJCAcHBQQDAgEBAgMEBQcHCAkKCgsMDAwBFgQGBgYGBgUFIQQDAgIDAwUGBgYGBgUFIQQDAgIDJQUFBgYGBgUFBAMCAgMEJQUFBgYGBgUFBAMCAgOUBAYGBgYGBQUlBAMCAgMEBQUGBgYGBQUlBAMCAQECAwQhBQUGBgYGBQUEAwICAwQhBQUGBgYGBgQEAwIBAQIDFV4BAgIEBQUGBwYGBQUEAwEBXgcGBQUEAwEBAQEDBAUFBgf7BwYFBQMDAgEBAgMDBQUGB35+BgYFBQQDAQEBAQMEBQUGBl8BAQMEBQUGBgcGBQUDAwIBXgcGBQUDAwIBAQIDAwUFBgAABAAAAAAD9wP3AAYADgBDAIcAAAEjFzcjESM3FxUzNTc1ISUzHwoRDwojISMvCTURNT8JMyEFER8PIT8PES8PIQ8OAQRefn1eP369fr3+CAH4BgYGBgsJCAYCAQEBAQEBAgYICQsGBgYG/QwGBwYFCwkIBgICAQECAgYICQsFBgcGAvT8jgECAwQFBwcICQoKCwwMDA0C9A0MDAwLCgoJCAcHBQQDAgEBAgMEBQcHCAkKCgsMDAwN/QwNDAwMCwoKCQgHBwUEAwIBQ35+AXod2vz82yG9AQICBggJCwUGBwb9DAYHBgULCQgGAgIBAQICBggJCwUGBwYC9AYHBgULCQgGAgIBP/0MDQwMDAsKCgkIBwcFBAMCAQECAwQFBwcICQoKCwwMDA0C9A0MDAwLCgoJCAcHBQQDAgEBAgMEBQcHCAkKCgsMDAwAAAADAAAAAAP3A/cAQwBfAMkAAAEVIQ8GHQIfBiERDwojISMvCT0BIT8HNS8HIRE3ITsBHwkVIT8KMzcVIw8PER8PIT8PES8PIzUvBw8GHQEhPQEvBg8GA7n+pQYGBQUEAwICAwQFBQYGAVsBAQECBggJCwYGBgb9DAYHBgULCQgGAgIBAVoHBgUFBAICAQECAgQFBQYH/qaeAjZfBgcGBQsJCAYCAgH8jgEBAQIGCAkLBgYGBj8/DQwMDAsKCgkIBwcFBAMCAQECAwQFBwcICQoKCwwMDA0C9A0MDAwLCgoJCAcHBQQDAgEBAgMEBQcHCAkKCgsMDAwNPwECAwMFBQYHBgYFBQQDAv4IAgMEBQUGBgcGBQUDAwICvX4BAgIEBQUGBz8GBgUFBAMBAf7FBgcGBQsJCAYCAgEBAgIGCAkLBQYHBn4BAgIEBQUGBz8GBgUFBAMBAQE7vQECAgYICQsFBgdFRQcGBQsJCAYCAgFeHwECAwQFBwcICQoKCwwMDA39Sw0MDAwLCgoJCAcHBQQDAgEBAgMEBQcHCAkKCgsMDAwNArUNDAwMCwoKCQgHBwUEAwIBHwcFBgQEAwIBAQIDAwUFBgcfHwcFBgQEAwIBAQIDAwUFBgAACAAAAAAD9wP3ADIAdgC+APIBNgFqAa4B2gAAATMfCg8JIwchJyMvCD0BPwkzIQUVHw8hPw81Lw8hDw4TFSMPBx8HMxUfBz8GPQEzPwY9AS8GIz0BLwYPBjczHwkdAg8JKwIvCT0CPwkzBxUfDzM/DzUvDyMPDiUXMx8JEQ8KKwIvCTURNT8IMzcHERUfDjM/DjURNS8OIw8OJRUfBjsBPwU9ASEzPwYvByEPBgN6BgYGBgsJCAYCAQEBAQEBAgYICQsGBgYG/QwGBwYFCwkIBgICAQECAgYICQsFBgcGAvT8jgECAwQFBwcICQoKCwwMDA0C9A0MDAwLCgoJCAcHBQQDAgEBAgMEBQcHCAkKCgsMDAwN/QwNDAwMCwoKCQgHBwUEAwK8HwcGBQUDAwIBAQIDAwUFBgcfAQIDAwUFBgcGBgUFBAMCIAYGBQUEAwICAwQFBQYGIAIDBAUFBgYHBgUFAwMCfQcGBgYKCgcGAgIBAQICBgcKCgYGBge9BgcGBQsJCAYCAgEBAgIGCAkLBQYHBn4BAgMEBQcHCAkKCgsMDAwNvQ0MDAwLCgoJCAcHBQQDAgEBAgMEBQcHCAkKCgsMDAwNvQ0MDAwLCgoJCAcHBQQDAgNxBgYGBgsJCAYCAQEBAQEBAgYICQsGBgYGfgcGBgYKCgcGAgIBAQICBgcKCgYGBgd+AgMFBQYICAkJCwsLDA0NfgwNDAwLCgoJCAcGBgQDAgIDBAYGBwgJCgoMCwwNDH4NDQwLCwsJCQgIBgUFAwL+RwECAwMFBQYHBgYFBQQDAgEcBgYFBQQDAQEBAQMEBQUGBv7FBwYFBQMDAgEEAQICBgcKCgYGBgdFBgYGCwkIBgICAQECAgYICQsGBgYGRgYGBgoKBwYCAgE/Pw0MDAwLCgoJCAcHBQQDAgEBAgMEBQcHCAkKCgsMDAwNPw0MDAwLCgoJCAcHBQQDAgEBAgMEBQYICAkJCwsLDQwByx8BAQMEBQUGBwYGBQUEAwEBHwcGBQUEAwEBAQEDBAUFBgcfAQEDBAUFBgYHBgUFBAMBASAGBgUFBAMBAQEBAwQFBQZYAQICBggJCwUGBwa9BwYGBgoKBwYCAgEBAgIGBwoKBgYGB70GBwYFCwkIBgICAT+9DQwMDAsKCgkIBwcFBAMCAQECAwQFBwcICQoKCwwMDA29DQwMDAsKCgkIBwcFBAMCAQECAwQFBwcICQoKCwwMDO8BAgIGCAkLBgYGBv6GBwYGBgoKBwYCAgEBAgIGBwoKBgYGBwF6BgYGBgsJCAYCAgE//oYNDAwMCwoKCQgHBwUEAwIBAQIDBAUHBwgJCgoLDAwMDQF6DQwMDAsKCgkIBwYGBAMCAQECAwQFBwcICQoKCwwMDFE/BgYFBQQDAgIDBAUFBgYgAgMEBQUGBgcGBQUDAwIBAQIDAwUFBgACAAAAAANaA/cAKAB5AAABFSsBDwsVHwMHLwgrAQ8GEycPBhURFR8IMz8FHwk/DC8DMz8JNS8EAS8GIwcDGwGYCAgIBwcGBgQFAwIBAQIDPZNCAwUFBgcGCAgGDAYGBgYGBWUEGwkHBwYFAwMDAwUFBwgJCQoKCQkJCAdhRAQEBAUFBgYLDAcHBweQBgUFBQcFBAEBAQI+lgoJCQgIBgYEAwIBAgQFBv3OBQYFBgcG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hwQDAgIDBAUGBQYGBgYFvQQDAQEBAQMEvQUGBgYGBgVKPAYHBgULCQgGAgIBPwECAwQFBwcICQoKCwwMDA08/UgBAgMEBQcHCAkKCgsMDAwNAe/+EQYHBgULCQgGAgIBAQICBggJCwUGB0lDDQwMDAsKCgkIBwcFBAMCAhYHBgUFBAMBAQEBAwQFBQYHvQYGBQUEAwEBAQEDBAUFBgZeAQECBAQEBgYHBwgICQkJCrwKCgkICAgIBgYGBQQDAgEBAQECAwQFBgYGCAgICAkKCr0JCQoICAgIBgYGBAQEAgEBuAUGBQYHBQYFhwEBAwQFBQYHBgYFBQQDAQGHBQYFBgYGBgUEAwEBAQEDBL0FBgYGBgUGBb0EAwICAwGeAQECBggJCwYGBgb+6gEWDA0MCwsLCggJBwYFBQMCfv1rDQwMDAsKCgkIBwcFBAMCAT8BAgIGCAkLBgYGBgKVBwYGBgsJCAUDAQE/AgMFBQYHCQgKCwsLDA2RAQIDAwUFBgc/BgYFBQQDAgIDBAUFBgY/BwYFBQMDAgEgPwkKCQgJBwgGBgYFBAMCAgICAwQFBgYGCAcJCAkKCT8KCQkJCAgHBwYGBAQEAgEBAQECBAQEBgYHBwgICQkJAAAEAAAAAAP3Ap0AHwA/AHEAtQAAAR8GOwE/BT0BLwYPBx8GOwE/BT0BLwYPBiUzHwoPCyEvCj0BPwkzBxUfDjMhMz8ONS8OIyEjDw0BBAECAwMFBQYHBgYFBQQDAgIDBAUFBgYHBgUFAwMCfwECAwMFBQYHBgYFBQQDAgIDBAUFBgYHBgUFAwMCAvMGBgYGCwkIBgIBAQEBAQECBggJCwYGBgb9DAYHBgULCQgGAgIBAQICBggJCwUGBwZ+AQIDBAUHBwgJCgoLDAwMDQL0DQwMDAsKCgkIBwcFBAMCAQECAwQFBwcICQoKCwwMDA39DA0MDAwLCgoJCAcHBQQDAgIABgYFBQQDAgIDBAQGBgYGBgYEBAMCAQECAwQEBgYGBgYFBQQDAgIDBAQGBgYGBgYEBAMCAQECAwQEBgZYAQEDBQgJCwYGBgdFBgYGCwkIBgIBAQEBAQECBggJCwYGBgZGBgYGCwkIBQMBAT5ADA0MCwsLCggJBwYFBQMCAgMFBQYHCQgKCwsLDA0MQAwNDAsLCwoICQcGBQUDAgIDBQUGBwkICgsLCwwNAAAA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BgYGBgsJCAYCAQEBAQEBAgYICQsGBgYG/sUHBgYGCgoHBgICAQECAgYHCgoGBgYH/oZFBwYFCwkIBgICAQMzfv3JfgF6SAUGBgYGBQYFBAMBAQEBAwSABAYGBgUGBgV9BAMCAQEDBAUGBgYGBQYFSAIDBAUFBgYHBgUFBAICAXkGBgYGCwkIBgIBAQF+P34NDQwLCwsJCQgIBgUEAwIBvT9+AQEBAgYICQsGBgZ4AQIDBAUHBwgJCgoLDAwMDQE7AQIDBAUHBwgJCgoLDAwMDQE7DQwMDAsKCgkIBwcFBAMCAQECBAYICgsMCQECAwQFBwcICQoKCwwMDA39Sw0MDAwLCgoJCAcHBQQDAssEBgcICAcGBQQDAgIDBAUGBggIBwYFBAMCAgMHBAQJCgsLCQgHBgQDAwQGCAkJCwsKCQcFBAMBAQMEUwUGBwgIBgYGBAMBAQEBAwQFBgcHCAcGBQQDAgEBAgKywwsEBAkKCwoKCAcGBAMBAgUGBwkKCwsJCQcFBAMBAQMEQwECAgYICQsFBgcGvQYHBgULCgcGAgIBAQICBggJCwUGBwa9BgcGBgoKBwYCAgE/vQECAgYHCgoGBgcGfvz8/L29Xq9IBAMBAQECAgQFBgYGBgYFBX4EAwEBAQICBH4FBgYGBgUGBQQDAQEBAgIESbAHBgUFAwMCAQECAwMFBQaXAQEBAgYICQsGBgYGfr29/sUBAgMEBQcHCAkKCgsMDAwNPwK1vX4GBgYGCwkIBgIBAT5+/kcNDAwMCwoKCQgHBwUEAwIBPw0MDAwLCgoJCAcHBQQDAgEBAgMEBQcHCAkKCgsMDAwNxhAQDw4MDAkGAcoNDAwMCwoKCQgHBwUEAwIBAQIDBAUHBwgJCgoLDAwMAAAAAwAAAAAD9wP3ABsANwChAAABEQ8KIyEjLwk1ETchOwEfCRUhPwozNxUjDw8RHw8hPw8RLw8jNS8HDwYdASE9AS8GDwYDuQEBAQIGCAkLBgYGBv0MBgcGBQsJCAYCAgGeAjZfBgcGBQsJCAYCAgH8jgEBAQIGCAkLBgYGBj8/DQwMDAsKCgkIBwcFBAMCAQECAwQFBwcICQoKCwwMDA0C9A0MDAwLCgoJCAcHBQQDAgEBAgMEBQcHCAkKCgsMDAwNPwECAwMFBQYHBgYFBQQDAv4IAgMEBQUGBgcGBQUDAwICvf3JBgcG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CwoKCQgHBwUEAwIBAQIDBAUHBwgJCgoLDAwMDQJ2DQwMDAsKCgkIBwcFBAMCAQECAwQFBwcICQoKCwwMDA2JBQcHCQkKCgwMDA0ODg4PDw8PDg4ODQwMDAoKCQkHB+UHBgUFAwMCAQECAwMFBQYHBgYFBQQDAgIDBAUFBrcHBgUFBAICAQECAgQFBQYHBgYFBQQDAQEBAQMEBQUGtwcGBQUEAgIBAQICBAUFBgcGBgUFBAMBAQEBAwQFBQbWBwYGBgoKBwYCAgEBAgIGBwoKBgYGBwYHBgULCQgGAgIBAQICBggJCwUGBxMFBQQEAwIBAQECAgYHCgoGBgcG/YoGBwYFCwkIBgICAQECAgYICQsFBgcGAnYGBwYFCwkIBgICAQICAwQEBRAKCgkJCQcHBwUFBAQCAQEBAQIEBAUFBwcHCQgKCgobAQIDBAUGCAgJCgoLDAwMDf2KDQwMDAsKCgkIBwcFBAMCAQECAwQFBwcICQoKCwwMDA0Cdg0MDAwLCgoJCAcHBQQDAgEODQwMCwoKCQgHBgUDAwIBAQICBAUGBwgJCgoLDAwNAAAAAwAAAAADeQP3AEgAfADAAAABDwMVHwMPAxUfBjM/BB8EMz8GNS8DPwMvByMPBCcxLwMPAiUzHwkVERUPCSMhIy8JNRE1PwkzBxEfDyE/DxEvDyEPDgFPBQMDAQECBI2MBAIBAQMDBQUGBQYGBgUEhYYEBQYGBgYGBQUDAgEBAgSNjQMDAQEBAgQEBQYGBgUGBQSGhQUGBgcFBgUBqQYHBgULCQgGAgIBAQICBggJCwUGBwb+CAYHBgULCQgGAgIBAQICBggJCwUGBwZ+AQIDBAUHBwgJCgoLDAwMDQH4DQwMDAsKCgkIBwcFBAMCAQECAwQFBwcICQoKCwwMDA3+CA0MDAwLCgoJCAcHBQQDAgLWBAYFBgYGBgWqqQUGBgYGBgUEBAIBAQIDBaCgBQMCAgICBAQFBgYGBgYFqakFBgYGBgUFBQMCAQECAwSgoAUDAwEBAQLgAQICBggJCwUGBwb9DAYHBgULCQgGAgIBAQICBggJCwUGBwYC9AYHBgULCQgGAgIBP/0MDQwMDAsKCgkIBwcFBAMCAQECAwQFBwcICQoKCwwMDA0C9A0MDAwLCgoJCAcHBQQDAgEBAgMEBQcHCAkKCgsMDAwAAAkAAAAAA/cD9wAP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NSc1LwgrAg8JBR0BHwk7Aj8JPQIvCSsCDwkFFRcVHwg7Aj8JPQIvCSsCDwgVARUxIzUjFTEjNSMVMSM1IR0BHwk7Aj8INTc1JzUvByMnByMPCAUdAR8JOwI/CT0CLwgjJwcjDwgFFRcVHwg7Aj8JPQIvCCMnByMPBxUDen69fr1+AjcBAgIGBwoKBgYGB34GBgYGCwkIBgICAQECAgYICQsGBgYGfgcGBgYKCgcGAgIB/sUBAgIGCAkLBQYHBn4GBwYFCwoHBgICAQECAgYHCgsFBgcGfgYHBgULCQgGAgIB/sUBAgIDBwgKDAYGBn4HBgYGCgoHBgICAQECAgYHCgoGBgYHfgYGBgYLCQgGAgICdQECAgYHCgoGBgYHfgYGBgYLCQgGAgIBAQICBggJCwYGBgZ+BwYGBgoKBwYCAgH+xQECAgYICQsFBgcGfgYHBgULCgcGAgIBAQICBgcKCwUGBwZ+BgcGBQsJCAYCAgH+xQECAgYICQsGBgYGfgcGBgYKCgcGAgIBAQICBgcKCgYGBgd+BgYGBgsJCAYCAgMyfr1+vX4CNwECAgYHCgoGBgYHfgYGBgYLCQgGAgIBAQICBggJCwYGBgaFBgYGCgoHBgICAf7FAQICBggJCwUGBwZ+BgcGBQsKBwYCAgEBAgIGBwoLBQYHBoQHBgULCQgGAgIB/sUBAgIGCAkLBgYGBn4HBgYGCgoHBgICAQECAgYHCgoGBgYHhAYGBgsJCAYCAgEEfh8ffn4fH35+Hx9+fgYGBwULCQgGAgIBAQICBggJCwYGBgZ+BwYGBgoKBwYCAgEBAgIGBwoKBgYGB34GBgcFCwkIBgICAQECAgYICQsGBgYGfgcGBgYKCgcGAgIBAQICBgcKCgYGBgd+BgYHBQYKCAcFAQEBAQEBAgYICQsGBgYGfgcGBgYKCgcGAgIBAQICBgcKCgYGBgE0fgYHBgYKCgcGAgIBAQICBgcKCwUGBwZ+BgcGBQsKBwYCAgEBAgIGBwoLBQYHBn4GBwYGCgoHBgICAQECAgYHCgsFBgcGfgYHBgULCgcGAgIBAQICBgcKCwUGBwZ+BgcGBgoKBwYCAgEBAgIGBwoLBQYHBn4GBwYFCwoHBgICAQECAgYHCgsFBgcBNX5+fn5+fn4HBgYGCgoHBgICAQECAgYHCgoGBgYHfgYGBgYLCQgGAgIBAQIC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AR8NOwI/DjUvDyMPDgUVHw47Aj8NPQIvDiMPDgNaBwYFBQMDAgEBAgMDBQUGB70GBgUFBAMCAgMEBQUGBv7GBgYFBQQDAQEBAQMEBQUGBr0HBgUFAwMCAQECAwMFBQYHAZkCAgMEBQYGBggHCQgJCgm9CgkJCQgIBwcGBgQEBAIBAQEBAgQEBAYGBwcICAkJCQq9CQoJCAkHCAYGBgUEAwIC/ggBAQIEBAQGBgcHCAgJCQkKvQkKCQgJBwgGBgYFBAMCAgICAwQFBgYGCAcJCAkKCb0KCQkJCAgHBwYGBAQEAgEDEgcGBQUDAwIBAQIDAwUFBge9BgYFBQQDAgIDBAUFBgb+xgYGBQUEAwEBAQEDBAUFBga9BwYFBQMDAgEBAgMDBQUGBwGZAgIDBAUGBgYIBwkICQoJvQoJCQkICAcHBgYEBAQCAQEBAQIEBAQGBgcHCAgJCQkKvQkKCQgJBwgGBgYFBAMCAv4IAQECBAQEBgYHBwgICQkJCr0JCgkICQcIBgYGBQQDAgICAgMEBQYGBggHCQgJCgm9CgkJCQgIBwcGBgQEBAIBAYIBAQMEBQUGBr0HBgUFAwMCAQECAgQFBQYHvQYGBQUEAwEBAQEDBAUFBga9BwYFBQMDAgEBAgIEBQUGB70GBgUFBAMBASC8CgkJCQgIBwcGBgQEBAIBAQEBAgQEBAYGBwcICAkJCQq9CQoJCAkHCAYGBgUEAwICAgIDBAUGBgYIBwkICQoKvAoJCQkICAcHBgYEBAQCAQEBAQIEBAQGBgcHCAgJCQkKvQkKCQgJBwgGBgYFBAMCAgICAwQFBgYGCAcJCAkKAg4BAgMDBQUGB70GBgUFBAMCAgMEBQUGBr0HBgUFAwMCAQECAwMFBQYHvQYGBQUEAwICAwQFBQYGvQcGBQUDAwIBIL0JCgkICQcIBgYGBQQDAgICAgMEBQYGBggHCQgJCgm9CgkJCQgIBwcGBgQEBAIBAQEBAgQEBAYGBwcICAkJCQq9CQoJCAkHCAYGBgUEAwICAgIDBAUGBgYIBwkICQoJvQoJCQkICAcHBgYEBAQCAQEBAQIEBAQGBgcHCAgJCQkAAAABAAAAAAMRAzYAOQAAEzM/DBEVDwkVITUvChEfDDMnIe8eBQYFBgcHCQoMBhUiRAICAgMEBQYOExkBARgTDwUFBAMCAgECJzAXFAwKCQcH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AQEDBAUGCAsDAwEBAQQFBAQGFAwMCwsKCggICAYFBAMCAQECAwQFBggICAoKCwsMDBQGBAQDBAMBAQICDQgGBQQDAQEBAgMEBgYICQkKCwsLDAwMDAwLDAsKCgwFCAUEBwgGAwMBAgIDBAUGCAgJCgoLDA0NDQ0MDAsLCgoJCAcGBQQDAgIADw4NDQwMCwoJCAcGBQQCAQECBAUFCAgJCgsLDQ0NDg8ODg4NDAwLCgkIBwYFBAICBAUGBwgJCgsMDA0ODg4LChQUExIQEA8NDAoIBwUDAQEDBQcICgwNDxAQEhMUFBUVFBQSEhEQDg4LCwgHBQMBAQMFBwgLCw0PEBERExQUAWcHDg0NCwoJBwYDAgEDBAcICQcFAgECAgMDBQUEBQsLDAsMCgUKCw0NDQ4NDg0NCgkIBgQCAQICAwYJCgYGBwYHBwYLCgkIBQQBAgQGCAkLDA0ODg0ODA0LCgUFBQwMDAsGBgUFBAQFBAEBBAUECQgHBAMBAwYHCQoLDQ0ODgYFBgUKCAcCAgIBAQQFCAkKCwYVDgwMCwoIBgMDAQEDAwQEBgsGBQIBAQEBAwIEBQUEBQsLDAsLCwUKCwwNDg0ODg0MCwkIBgQCAQICAgcJCgYGBgcHBgYMCgkHBgQBAgQGCAkLDA0ODg4NDQwLCgoLCwwGBgYGBQYGBAMGAwEBAwYECQgHBAMBAgMGBwkKCw0NDg0GBgYFCggHAgICAQEEBgcJCgwGBgcFBQQDBAMCAw0HBgUEAwEBAQIDBAYGCAkJCgoLDAsMDQwMDAsLCgoMBQgFBAcIBgMDAQICAwQFBwcICQoKDAwMDQ0NDAwLCwoKCQgHBgUEAwICAQMDAwYICAUFBg4KCwsLDAwMDAwMCwwKCwoIBwYFBAMBAQEBAwQFBgcKBAMBBAUEBQUUDAwLCwoKCQgHBgUEAwIBAQIDBAUGBwgJCgoLCwwMFAUFBAMEAwICDQcGBgMDAgEBAgMEBQcICQoKCgsMCwwMDAsMCwsLCgwFCAUEBwgGAwMBAgIDBAUGCAgJCgoMCw0NDQ0MDAsLCgoJCAcGBQQDAgIBAwMDBggIBQUFDwoLCwsMDAwMDAwLDAoLCggHBgUEAwEBAQEDBAUGBwoEAwEEBQQFBRQMDAsLCgoJCAcGBQQDAgEBAgMEBQYHCAkKCgsLDAwAAQAAAAAD+AOQAFIAAAEx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BAUDAwICAgIDAwUEBgYHBwgICQkBEgYGBgYLCQgGAgIBAQICBggJCwYGBgYHBgYGCgoHBgICAQECAgYHCgoGBgYTAQIDBAQGBgYGBgYEBAMCAQ4ICQcIBgcFBgQEBAICAQEBAQICBAQEBgUHBggHCQgOAQIDBAQGBgYGBgYEBAMCAQoKCgoICQcHBwYEBQMCAgICAwUEBgcHBwkICgoKAREGBwYFCwoHBgICAQECAgYHCgsFBgcGBgcGBQsKBwYCAgEBAgIGBwoLBQYHHwYCAwQEBgYGBgYGBAQDAhAJCQgIBwcGBgQFAwMCAgICAwMFBAYGBwcICAkJEAIDBAQGBgYGBgYEBAMCEAkJCAgHBwYGBAUDAwICAgIDAwUEBgYHBwgICQkAAAAABAAAAAADqQPoADkAdgC+AQYAAAEHIw8HFQcRFxUfCDMhMz8JNRErAS8ONSczHwgRFQ8NIyEjLw4RPw4lMx8HDwYrAREzHwcPBisCLwU9AT8GMxErAS8FPQE/BQEzHwUdASE1PwY7AR8FHQIPBi8HNSEdAQ8GLwc1PwYB8AYGBwULCQgGAgIBAQICBggJCwUHBgYBOwcGBgYKCgcGAgIBXgoJCQgJCAcHBgYFBAMCAQG93QUFBQW9BQMCAQIDBQUGCAgJCQsLCwwNDf7FDQwMDAsKCgkIBwcFBAMCAQECAwQFBwcICQoKCwwMDP6TvQcFBgQEAwIBAQIDBAQGBQc/PwcFBgQEAwIBAQIDBAQGBQe9BgYFBQQDAgIDBAUFBgY/PwYGBQUEAwICAwQFBQYBIgYGBQUEAwIBuQECAwQEBgUHBgYFBQQDAgIDBAUFBgYHBQYEBAMCAf5HAgMEBQUGBgcFBgQEAwIBAQIDAwUGBQKOAQICBggJCwYGBgb+RwcGBgYKCgcGAgIBAQICBgcKCgYGBgcBWAEDAwQEBgYHCAgICQkJCUI/AQECA54FBgYE/oMNDQwLCwsJCQgIBgUFAwICAwUFBggICQkLCwsMDQ0BuQ0MDAwLCgoJCAcHBQQDAgEBAgMDBQUGBwYGBQUEAwL9yQECAwMFBQYHBgYFBQQDAgIDBAUFBgYHBgUFAwMCAQI3AgMEBQUGBgcGBQUDAwIBHAIDBAUFBgY/PwYGBQUEAwICAwQFBQYGvQcGBQUDAwIBAQIDAwUFBgc/PwcGBQUDAwIBAQIDAwUF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BgcGRQcGBgoKBwYCAgEBAgIGBwoKBgYH/ZAGBwYGCgoHBgICAQECAgYHCgoGBgcGRQcGBgoKBwYCAgEBAgIGBwoKBgYHeAECAwQFBwcICQoKCwwMDA0NDAwMCwoKCQgHBwUEAwIBAQIDBAUHBwgJCgoLDAwMDT8NDAwMCwoKCQgHBwUEAwIBAXoBAgMEBQcHCAkKCgsMDAwNPw0MDAwLCgoJCAcHBQQDAgEBAgMEBQcHCAkKCgsMDAwNDQwMDAsKCgkIBwcFBAMCAQECAwQFBwcICQoKCwwMDA0/DQwMDAsKCgkIBwcFBAMCAf6GAQIDBAUHBwgJCgoLDAwMDT8NDAwMCwoKCQgHBwUEAwIBBAECAgYHCgoGBgcGRQcGBgoKBwYCAgEBAgIGBwoKBgYHBkUHBgYKCgcGAgIBAQICBgcKCgYGBwZFBwYGCgoHBgICAQECAgYHCgoGBgcGRQcGBgoKBwYCAgECNw0MDAwLCgoJCAcHBQQDAgH+hgECAwQFBwcICQoKCwwMDA0NDAwMCwoKCQgHBwUEAwIBAXoBAgMEBQcHCAkKCgsMDAwNfgECAgYHCgoGBgcGRQcGBgoKBwYCAgEBAgIGBwoKBgYHBkUHBgYKCgcGAgIBAQICBgcKCgYGBwZFBwYGCgoHBgICAQECAgYHCgoGBgcGRQcGBgoKBwYCAgE/Pw0MDAwLCgoJCAcHBQQDAgH+hgECAwQFBwcICQoKCwwMDA0/DQwMDAsKCgkIBwcFBAMCAQECAwQFBwcICQoKCwwMDA0NDAwMCwoKCQgHBwUEAwIBAQIDBAUHBwgJCgoLDAwMDT8NDAwMCwoKCQgHBwUEAwIBAXoBAgMEBQcHCAkKCgsMDAwNPw0MDAwLCgoJCAcHBQQDAgEBAgMEBQcHCAkKCgsMDAwNDQwMDAsKCgkIBwcFBAMCAQECAwQFBwcICQoKCwwMDAAAAAEAAAAAA/gDZQArAAAJAi8DDwcfAwEfAz8DAT8DLwcPAgPA/Y3+8gUFBgcGBgUGBAMBAQEBAwQBJQUGBgYGBgYFAooFAwEBAQEDBQUFBgYHBgUDXP2NAQ0FAwEBAQEDBQUFBgYHBgUG/twEAwIBAQIDBAKKBQYGBgYGBgUEAwIBAQIDAAkAAAAAA5kD+AAhAEMASQBXALIA1AD2ATABjgAANyEfBh0BDwYhLwc/BzMfBw8H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AgIEBQYFBAIBAwUFAwUEAgIEBQYFBAIBAwUFAwUEAgIEBQYFBAIBAwVPAwUEAgIEBQYFBAIBAwUFAwUEAgIEBQYFBAIBAwUFAwUEAgIEBQYFBAIBAwVPAwUEAgIEBQYFBAIBAwUFAwUEAgIEBQYFBAIBAwUFAwUEAgIEBQYFBAIBAwVPAwUEAgIEBQYFBAIBAwUFAwUEAgIEBQYFBAIBAwUFAwUEAgIEBQYFBAIBAwVPAwUEAgIEBQYFBAIBAwUFAwUEAgIEBQYFBAIBAwUFAwUEAgIEBQYFBAIBAwVPAwUEAgIEBQYFBAIBAwUFAwUEAgIEBQYFBAIBAwUFAwUEAgIEBQYFBAIBAwVPAwUEAgIEBQYFBAIBAwUFAwUEAgIEBQYFBAIBAwUFAwUEAgIEBQYFBAIBAwVPAwUEAgIEBQYFBAIBAwUFAwUEAgIEBQYFBAIBAwUFAwUEAgIEBQYFBAIBAwVPAwUEAgIEBQYFBAIBAwUFAwUEAgIEBQYFBAIBAwUFAwUEAgIEBQYFBAIBAwVPAwUEAgIEBQYFBAIBAwUFAwUEAgIEBQYFBAIBAwUFAwUEAgIEBQYFBAIBAwVd/EgDuPxIBgUFBAMDAQEBAQMDBAUFBgO4BgUFBAMDAQEBAQMDBAUFAAAAAwAAAAAD2AO5ADAAdwC7AAABIw8KET8HMyEzPwoRLwojJSEfDhURFQ8OISMPBiMvCDURNT8NJyEfBw8HISMPDhEVDwYvBjURNT8NASQHBgYGCwkIBgIBAQFaBgcHBwgICAgB4QcGBgYLCQgGAgEBAQEBAQIGCAkLBgYGB/3KAjYNDQwMCwoKCQgHBgYEAwICAwQGBgcICQoKCwwMDQ3+HwYFBQSMBQUFBQcHBAMDAwIBAQIDBAYGBwgJCgoLDAwNUgI3BgYGBAQDAgEBAgMEBAYGBv3JCgkJCQgIBwcGBQUEAwMBAQIDBAQGBgYGBgYEBAMCAwQFBwcJCwsMDQ4ODxAC/AECAgYHCgoGBgcG/etHBQQEAwICAQECAgYHCgoGBgcGAXoGBwYGCgoHBgICAT8BAgMEBQcHCAkKCgsMDAwN/oYNDAwMCwoKCQgHBwUEAwIBAgIDcAMCAgECAgMDBAQEBAQCVw0MDAwLCgoJCAcHBQQDAn8BAQMEBQUGBgcGBQUEAwEBAgIDBAUGBgYIBwkICQoJ/ggHBgUF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AXMBdAF1AXYBdwF4AXkBegF7AXwBfQF+AX8BgAGBAYIBgwGEAYUBhgGHAYgBiQGKAYsBjAGNAY4BjwGQAZEBkgGTAZQBlQGWAZcBmAGZAZoBmwGcAZ0BngGfAaABoQGiAaMBpAGlAaYBpwGoAakBqgGrAawBrQGuAa8BsAGxAbIBswG0AbUBtgG3AbgBuQG6AbsBvAG9Ab4BvwHAAcEBwgHDAcQBxQHGAccByAHJAcoBywHMAc0BzgHPAdAB0QHSAdMB1AHVAdYB1wHYAdkB2gHbAdwB3QHeAd8B4AHhAeIB4wHkAeUB5gHnAegB6QHqAesB7AHtAe4B7wHwAfEB8gHzAfQB9QH2AfcB+AH5AfoB+wH8Af0B/gH/AgACAQICAgMCBAIFAgYCBwIIAgkCCgILAgwCDQIOAg8CEAIRAhICEwIUAhUCFgIXAhgCGQIaAhsCHAIdAh4CHwIgAiECIgIjAiQCJQImAicCKAIpAioCKwIsAi0CLgIvAjACMQIyAjMCNAI1AjYCNwI4AjkCOgI7AjwCPQI+Aj8CQAJBAkICQwJEAkUCRgJHAkgCSQJKAksCTAJNAk4CTwJQAlECUgJTAlQCVQJWAlcCWAJZAloCWwJcAl0CXgJfAmACYQJiAmMCZAJlAmYCZwJoAmkCagJrAmwCbQJuAm8CcAJxAnICcwJ0AnUCdgJ3AngCeQJ6AnsCfAJ9An4CfwKAAoECggKDAoQChQKGAocCiAKJAooCiwKMAo0CjgKPApACkQKSApMClAKVApYClwKYApkCmgKbApwCnQKeAp8CoAKhAqICowKkAqUCpgKnAqgCqQKqAqsCrAKtAq4CrwKwArECsgKzArQCtQK2ArcCuAK5AroCuwK8Ar0CvgK/AsACwQLCAsMCxALFAsYCxwLIAskCygLLAswCzQLOAs8C0ALRAtIC0wLUAtUC1gLXAtgC2QLaAtsC3ALdAApleHBvcnQtcGRmD21vcmUtdmVydGljYWwtMglzdWItdG90YWwRdGFibGUtYWxpZ24tcmlnaHQGaGVhZGVyBWNsb2NrB3JlZnJlc2gJYWxpZ24tdG9wDmFycm93LXJpZ2h0LXVwDHVzZXItZGVmaW5lZA1wcm90ZWN0LXNoZWV0BXBhc3RlBHBsYXkRY2hldnJvbi1kb3duLWZpbGwMaW5zZXJ0LXJpZ2h0D3Bhc3RlLXRleHQtb25seQdyZXBsYWNlB2xldmVsLTQIdXBsb2FkLTEEdW5kbw1kZWxldGUtY29sdW1uDHJlc3RhcnQtYXQtMQlwZXJpbWV0ZXIFc3RhbXASY29udGludWUtbnVtYmVyaW5nC2FsaWduLXJpZ2h0D3Nob3ctaGlkZS1wYW5lbBZjb25kaXRpb25hbC1mb3JtYXR0aW5nEW1vcmUtaG9yaXpvbnRhbC0xBHNlbmQEY2VsbBFzb3J0LWRlc2NlbmRpbmctMhJ0aW1lbGluZS13b3JrLXdlZWsHanVzdGlmeQ5oeXBlcmxpbmstZWRpdAlyZWN0YW5nbGUKZ3JvdXAtaWNvbgpsaW5lLXNtYWxsDWRyYWctYW5kLWRyb3ALY2hlY2stbGFyZ2UGc2hhcGVzDGNoZXZyb24tZG93bg9kZWNyZWFzZS1pbmRlbnQMY2lyY2xlLWNoZWNrDGZpbHRlci1jbGVhcgVub3RlcwZleHBvcnQNYnJpbmctZm9yd2FyZARlZGl0C2ZpbHRlci1tYWluDnNwbGl0LXZlcnRpY2FsDGNvbW1lbnQtc2hvdxJjaGV2cm9uLWRvd24tc21hbGwNZmlsdGVyLWFjdGl2ZRdkcmFnLWFuZC1kcm9wLWluZGljYXRvcgRib2xkEmNoZXZyb24tbGVmdC1zbWFsbA9oaWdobGlnaHQtY29sb3IMcHJpbnQtbGF5b3V0B2JldHdlZW4LbGluay1yZW1vdmUQdGFibGUtb2YtY29udGVudA1ncmlwLXZlcnRpY2FsA2twaQlyZWRhY3Rpb24Gdm9sdW1lCmJyZWFrLXBhZ2UGbGVuZ3RoE2NoZXZyb24tbGVmdC1kb3VibGUOaHlwZXJsaW5rLWNvcHkKbG93ZXItY2FzZQhidWxsZXQtMg1jaGV2cm9uLXJpZ2h0CXVuZ3JvdXAtMRBhdXRvLWZpdC1jb250ZW50GGZpbHRlcmVkLXNvcnQtZGVzY2VuZGluZxFhZ2VuZGEtZGF0ZS1yYW5nZQtncmFuZC10b3RhbA1tb3VzZS1wb2ludGVyDGFsaWduLW1pZGRsZQhib29rbWFyaw5maWVsZC1zZXR0aW5ncxdwYXN0ZS1tYXRjaC1kZXN0aW5hdGlvbghwYXNzd29yZAZzZWFyY2gEcmVkbwhsb2NhdGlvbgRsaW5rDXN0cmlrZXRocm91Z2gPYXV0by1maXQtd2luZG93Bml0YWxpYwxtb250aC1hZ2VuZGETY2hldnJvbi1yaWdodC1zbWFsbAVwcmludA50aW1lbGluZS10b2RheRJ0ZXh0LXRoYXQtY29udGFpbnMLZm9sZGVyLW9wZW4JcmVzaXplci0xDWJyZWFrLXNlY3Rpb24IYnVsbGV0LTYIaWNvbnNldHMMY2hldnJvbi1sZWZ0DWJvcmRlci1ib3R0b20Nc3BhY2luZy1hZnRlcgpjaXJjbGUtYWRkEHRleHQtYWx0ZXJuYXRpdmUHbGV2ZWwtMQp0d28tY29sdW1uBnRvcC0xMAZyZW5hbWUFc3R5bGUJZm9udC1uYW1lD21vcmUtdmVydGljYWwtMQ9saW5lLXZlcnktc21hbGwGcmVwZWF0CmFycm93LWxlZnQFY2hlY2sSdmVydGljYWwtYWxpZ24tdG9wCmNoZXZyb24tdXAJYm90dG9tLTEwA2RheQl1bmdyb3VwLTIJb3Blbi1saW5rBXBhdXNlBGNvcHkOcGFnZS1udW1iZXJpbmcObGlzdC11bm9yZGVyZWQKZnJlZXplLXJvdwdsZXZlbC0zCmV4cG9ydC14bHMOY29tbWVudC1yZW9wZW4McGFpbnQtYnVja2V0EWJvcmRlci1kaWFnb25hbC0xEmZpeGVkLWNvbHVtbi13aWR0aAVpbWFnZRFudW1iZXItZm9ybWF0dGluZxBwcm90ZWN0LXdvcmtib29rD3JlY3VycmVuY2UtZWRpdAxzZW5kLXRvLWJhY2sLaW5zZXJ0LWxlZnQEYXJlYQxsaW5lLXNwYWNpbmcKc2VsZWN0LWFsbAxib3JkZXItaW5uZXIGcmFkaXVzCWRhdGEtYmFycw1ib3JkZXItbWlkZGxlCnVwcGVyLWNhc2UKcGFnZS1zZXR1cAd6b29tLWluCGZpbHRlcmVkDmh5cGVybGluay1vcGVuEWNhbGN1bGF0ZWQtbWVtYmVyBG1lbnUMZ3JlYXRlci10aGFuCGJ1bGxldC00D2JvdHRvbS0xMC1pdGVtcxFib3JkZXItZGlhZ29uYWwtMgl0aHVtYm5haWwKZm9udC1jb2xvcgxhbGlnbi1ib3R0b20IZG93bmxvYWQLY2xlYXItcnVsZXMOc29ydC1hc2NlbmRpbmcQc3BsaXQtaG9yaXpvbnRhbAdncm91cC0yCWRyb3AtZG93bgtzdXBlcnNjcmlwdA5jaGFuZ2VzLWFjY2VwdBRjaGV2cm9uLXJpZ2h0LWRvdWJsZRBzb3J0LWFzY2VuZGluZy0yDGJvcmRlci1yaWdodANtZHgMYm9yZGVyLW91dGVyB3NhdmUtYXMMZW5kLWZvb3Rub3RlEGV4aXQtZnVsbC1zY3JlZW4DcGFuDHJhZGlvLWJ1dHRvbg90ZXh0LWFubm90YXRpb24EdXNlcg5zcGFjaW5nLWJlZm9yZQ9zb3J0LWRlc2NlbmRpbmcHZGlzcGxheQphbGlnbi1sZWZ0BnBlb3BsZQpleHBvcnQtY3N2BmZvb3RlcgVicmVhaw5kYXRlLW9jY3VycmluZwhidWxsZXQtMwxzdHJva2Utd2lkdGgLZGVzY3JpcHRpb24MZXhwb3J0LWV4Y2VsCnRhYmxlLWNlbGwLdGV4dC1oZWFkZXILbGluZS1ub3JtYWwFbW9udGgMY29sb3Itc2NhbGVzEmNoYW5nZS1zY2FsZS1yYXRpbwRzYXZlBmV4cGFuZAZjaXJjbGUMbGlzdC1vcmRlcmVkBWVyYXNlCmZvcm0tZmllbGQJdGV4dC13cmFwCmV4cG9ydC1zdmcIYnVsbGV0LTEKYm9yZGVyLWFsbANzdW0Kd2ViLWxheW91dAlzZWxlY3Rpb24TdGFibGUtYm9yZGVyLWN1c3RvbQ1iZWxvdy1hdmVyYWdlCWxlc3MtdGhhbgphcnJvdy1kb3duFXZlcnRpY2FsLWFsaWduLWJvdHRvbQx0aW1lbGluZS1kYXkJc2lnbmF0dXJlCGZpbGUtbmV3EGNoZXZyb24tdXAtc21hbGwDZXllCGFycm93LXVwCmJvcmRlci10b3AHb3BhY2l0eRJpbnRlcm1lZGlhdGUtc3RhdGUQcmVzaXplci12ZXJ0aWNhbAljaGVjay1ib3gVdmVydGljYWwtYWxpZ24tY2VudGVyB3R3by1yb3cFY2xvc2UDYWxsBXRhYmxlDWhpZGUtaGVhZGluZ3MPdGFibGUtY2VsbC1ub25lC2ZyZWV6ZS1wYW5lDXNlbmQtYmFja3dhcmQKZXhwb3J0LXBuZw5kdXBsaWNhdGUtY2VsbAtzcGVsbC1jaGVjaxJ0YWJsZS1hbGlnbi1jZW50ZXIKZGVsZXRlLXJvdwRub25lB2dyb3VwLTELY2hhbmdlLWNhc2UQdGFibGUtYWxpZ24tbGVmdAZmaWx0ZXIKY2xlYXItZm9ybQthcnJvdy1yaWdodBBoaWRlLWZvcm11bGEtYmFyA2N1dAhidWxsZXQtNRJyZXNpemVyLWhvcml6b250YWwTY2hldnJvbi1kb3duLWRvdWJsZQRsb2NrC2NpcmNsZS1pbmZvDGluc2VydC1iZWxvdwhwZW50YWdvbgxjbGVhci1mb3JtYXQJdGltZS16b25lBHBsdXMLYm9yZGVyLWxlZnQHbGV2ZWwtMg1hYm92ZS1hdmVyYWdlBW9yZGVyCXN1YnNjcmlwdA1jaGFuZ2VzLXRyYWNrEGh5cGVybGluay1yZW1vdmUQdG9wLWJvdHRvbS1ydWxlcwljb2RlLXZpZXcKY29sbGFwc2UtMg9pbmNyZWFzZS1pbmRlbnQMdGFibGUtZGVsZXRlHGNvbmRpdGlvbmFsLWZvcm1hdHRpbmctbGFyZ2UMYWxpZ24tY2VudGVyB3JlYXBwbHkOY2hhbmdlcy1yZWplY3QOaGlkZS1ncmlkbGluZXMEd2VlawlsYXN0LXBhZ2UEbGluZQdlcXVhbHRvDWNpcmNsZS1yZW1vdmULZnVsbC1zY3JlZW4JZGltZW5zaW9uF2ZpbHRlcmVkLXNvcnQtYXNjZW5kaW5nDXRpbWVsaW5lLXdlZWsFdHJhc2gMcHJvcGVydGllcy0xEWNoZXZyb24tdXAtZG91YmxlCXNvcnRpbmctMglzb3J0aW5nLTEIem9vbS1vdXQFY2hhcnQLYm9yZGVyLW5vbmUMdGFibGUtdXBkYXRlCW5hbWVkLXNldA9hbm5vdGF0aW9uLWVkaXQJdmlldy1zaWRlC2NvbW1lbnQtYWRkCWdyaWQtdmlldwdjYXB0aW9uCXVuZGVybGluZQl0ZXh0LWZvcm0LaW5zZXJ0LWNvZGUNcmVzaXplci1yaWdodApmaXJzdC1wYWdlA2JveA9kYXRhLXZhbGlkYXRpb24MaW5zZXJ0LWFib3ZlB2xldmVsLTULem9vbS10by1maXQOZXJyb3ItdHJlZXZpZXcLbWVyZ2UtY2VsbHMNYm9yZGVyLWNlbnRlcgZmb2xkZXIJaGlnaGxpZ2h0DHByb3BlcnRpZXMtMgd0YWJsZS0yDmJyaW5nLXRvLWZyb250DWZyZWV6ZS1jb2x1bW4LcGFzdGUtc3R5bGUKdW5maWx0ZXJlZAlwYXJhZ3JhcGgTY2hhcnQtaW5zZXJ0LWNvbHVtbgxjaGFydC1sZWdlbmQYY2hhcnQtaW5zZXJ0LXgteS1zY2F0dGVyEWFkZC1jaGFydC1lbGVtZW50D2NoYXJ0LWdyaWRsaW5lcxFjaGFydC1pbnNlcnQtbGluZRdjaGFydC1zd2l0Y2gtcm93LWNvbHVtbgpjaGFydC1heGVzC2NoYXJ0LWxpbmVzEWNoYXJ0LWF4aXMtdGl0bGVzC2NoYXJ0LXRpdGxlEGNoYXJ0LWluc2VydC1waWURY2hhcnQtZGF0YS1sYWJlbHMkY2hhcnQtYXhpcy10aXRsZXMtcHJpbWFyeS1ob3Jpem9udGFsEWNoYXJ0LWxlZ2VuZC1ub25lEmNoYXJ0LWxlZ2VuZC1yaWdodBxjaGFydC1wcmltYXJ5LW1pbm9yLXZlcnRpY2FsG2NoYXJ0LWF4ZXMtcHJpbWFyeS12ZXJ0aWNhbBhjaGFydC1kYXRhLWxhYmVscy1jZW50ZXIWY2hhcnQtZGF0YS1sYWJlbHMtbm9uZRxjaGFydC1wcmltYXJ5LW1ham9yLXZlcnRpY2FsHWNoYXJ0LWF4ZXMtcHJpbWFyeS1ob3Jpem9udGFsEGNoYXJ0LWxlZ2VuZC10b3AeY2hhcnQtcHJpbWFyeS1taW5vci1ob3Jpem9udGFsHmNoYXJ0LXByaW1hcnktbWFqb3ItaG9yaXpvbnRhbBNjaGFydC1sZWdlbmQtYm90dG9tHWNoYXJ0LWRhdGEtbGFiZWxzLW91dHNpZGUtZW5kImNoYXJ0LWF4aXMtdGl0bGVzLXByaW1hcnktdmVydGljYWwRY2hhcnQtbGVnZW5kLWxlZnQdY2hhcnQtZGF0YS1sYWJlbHMtaW5zaWRlLWJhc2UcY2hhcnQtZGF0YS1sYWJlbHMtaW5zaWRlLWVuZBBjaGFydC10aXRsZS1ub25lHGNoYXJ0LXRpdGxlLWNlbnRlcmVkLW92ZXJsYXkUY2hhcnQtMmQtc3RhY2tlZC1iYXIVY2hhcnQtMmQtc3RhY2tlZC1saW5lC2NoYXJ0LWRvbnV0DmNoYXJ0LTJkLXBpZS0yGWNoYXJ0LTJkLWNsdXN0ZXJlZC1jb2x1bW4hY2hhcnQtMmQtMTAwLXBlcmNlbnQtc3RhY2tlZC1hcmVhFmNoYXJ0LTJkLWNsdXN0ZXJlZC1iYXIgY2hhcnQtMmQtMTAwLXBlcmNlbnQtc3RhY2tlZC1iYXINY2hhcnQtMmQtbGluZSNjaGFydC0yZC0xMDAtcGVyY2VudC1zdGFja2VkLWNvbHVtbiFjaGFydC0yZC0xMDAtcGVyY2VudC1zdGFja2VkLWxpbmUVY2hhcnQtMmQtc3RhY2tlZC1hcmVhEGNoYXJ0LWluc2VydC1iYXINY2hhcnQtMmQtYXJlYRNtb3JlLXNjYXR0ZXItY2hhcnRzF2NoYXJ0LTJkLXN0YWNrZWQtY29sdW1uDnRpbWVsaW5lLW1vbnRoCWRyYWctZmlsbAxjaXJjbGUtY2xvc2UGcmVzaXplD2NoZXZyb24tdXAtZmlsbARob21lCXNvcnRpbmctMxFjaGV2cm9uLWxlZnQtZmlsbBJjaGV2cm9uLXJpZ2h0LWZpbGwUaW50ZXJtZWRpYXRlLXN0YXRlLTIIc2V0dGluZ3MLY2hlY2stc21hbGwLdGFibGUtbWVyZ2UMdGFibGUtbmVzdGVkEHRhYmxlLWluc2VydC1yb3cTdGFibGUtaW5zZXJ0LWNvbHVtbhV0YWJsZS1vdmVyd3JpdGUtY2VsbHMJZXllLXNsYXNoDWdhbnR0LWdyaXBwZXINYnJpbmctdG8tdmlldw9icmluZy10by1jZW50ZXIHd2FybmluZw1jcml0aWNhbC1wYXRoEmJvcmRlci1kaWFnb25hbC11cBRib3JkZXItZGlhZ29uYWwtZG93bg1ib3JkZXItY3VzdG9tDWJvcmRlci1ub25lLTEKYm9yZGVyLWJveA9ib3JkZXItc2hhZG93LTEPYm9yZGVyLXNoYWRvdy0yBWF1ZGlvBXZpZGVvBGNyb3ALc3Rhci1maWxsZWQHZmlsdGVycwphZGp1c3RtZW50CXBhZ2Utc2l6ZQVyZXNldAh0cmlhbmdsZQ5wYWdlLXRleHQtd3JhcAR0aW50CmJyaWdodG5lc3MIY29udHJhc3QKc2F0dXJhdGlvbgRmYWRlDWZsaXAtdmVydGljYWwPZmxpcC1ob3Jpem9udGFsDnRyYW5zZm9ybS1sZWZ0D3RyYW5zZm9ybS1yaWdodAlzaGFycG5lc3MFZ3JhaW4MZnJhbWUtY3VzdG9tB2ZyYW1lLTEHZnJhbWUtMgdmcmFtZS0zB2ZyYW1lLTQHZnJhbWUtNQdmcmFtZS02CXRyYW5zZm9ybQpjaGVjay10aWNrD2V2ZW4tcGFnZS1icmVhaw5vZGQtcGFnZS1icmVhawxwYWdlLWNvbHVtbnMVY29udGludW91cy1wYWdlLWJyZWFrC3BhZ2UtY29sdW1uEXBhZ2UtY29sdW1uLXJpZ2h0EHBhZ2UtY29sdW1uLWxlZnQPcGFnZS1jb2x1bW4tb25lD3BhZ2UtY29sdW1uLXR3bxFwYWdlLWNvbHVtbi10aHJlZRBtdWx0aXBsZS1jb21tZW50DmZvcm1hdC1wYWludGVyCGxhdW5jaGVyD2NoYXJhY3Rlci1zdHlsZQxsaW5rZWQtc3R5bGUcY2hhcnQtMmQtc3RhY2tlZC1saW5lLW1hcmtlZChjaGFydC0yZC0xMDAtcGVyY2VudC1zdGFja2VkLWxpbmUtbWFya2VkFGNoYXJ0LTJkLWxpbmUtbWFya2VkEmxpc3QtdW5vcmRlcmVkLXJ0bBBsaXN0LW9yZGVyZWQtcnRsE2luY3JlYXNlLWluZGVudC1ydGwTZGVjcmVhc2UtaW5kZW50LXJ0bAVlbW9qaRF0cmF2ZWwtYW5kLXBsYWNlcwZuYXR1cmUPZm9vZC1hbmQtZHJpbmtzB2FuaW1hbHMHb2JqZWN0cwphY3Rpdml0aWVzDWhhbmQtZ2VzdHVyZXMHc3ltYm9scwVmbGFncwZ1bmxvY2sMbW9yZS1jaGV2cm9uDGJvcmRlci1mcmFtZQpmcmFtZS1ub25lCWZyYW1lLW1hdAtmcmFtZS1iZXZlbApmcmFtZS1saW5lCmZyYW1lLWhvb2sLZnJhbWUtaW5zZXQAAA==) 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: "\e700"; }
  &.e-more-vertical-2:before { content: "\e701"; }
  &.e-sub-total:before { content: "\e702"; }
  &.e-table-align-right:before { content: "\e703"; }
  &.e-header:before { content: "\e704"; }
  &.e-clock:before { content: "\e705"; }
  &.e-refresh:before { content: "\e706"; }
  &.e-align-top:before { content: "\e707"; }
  &.e-arrow-right-up:before { content: "\e708"; }
  &.e-user-defined:before { content: "\e709"; }
  &.e-protect-sheet:before { content: "\e70a"; }
  &.e-paste:before { content: "\e70b"; }
  &.e-play:before { content: "\e70c"; }
  &.e-chevron-down-fill:before { content: "\e70d"; }
  &.e-insert-right:before { content: "\e70e"; }
  &.e-paste-text-only:before { content: "\e70f"; }
  &.e-replace:before { content: "\e710"; }
  &.e-level-4:before { content: "\e711"; }
  &.e-upload-1:before { content: "\e712"; }
  &.e-undo:before { content: "\e713"; }
  &.e-delete-column:before { content: "\e714"; }
  &.e-restart-at-1:before { content: "\e715"; }
  &.e-perimeter:before { content: "\e716"; }
  &.e-stamp:before { content: "\e717"; }
  &.e-continue-numbering:before { content: "\e718"; }
  &.e-align-right:before { content: "\e719"; }
  &.e-show-hide-panel:before { content: "\e71a"; }
  &.e-conditional-formatting:before { content: "\e71b"; }
  &.e-more-horizontal-1:before { content: "\e71c"; }
  &.e-send:before { content: "\e71d"; }
  &.e-cell:before { content: "\e71e"; }
  &.e-sort-descending-2:before { content: "\e71f"; }
  &.e-timeline-work-week:before { content: "\e720"; }
  &.e-justify:before { content: "\e721"; }
  &.e-hyperlink-edit:before { content: "\e722"; }
  &.e-rectangle:before { content: "\e723"; }
  &.e-group-icon:before { content: "\e724"; }
  &.e-line-small:before { content: "\e725"; }
  &.e-drag-and-drop:before { content: "\e726"; }
  &.e-check-large:before { content: "\e727"; }
  &.e-shapes:before { content: "\e728"; }
  &.e-chevron-down:before { content: "\e729"; }
  &.e-decrease-indent:before { content: "\e72a"; }
  &.e-circle-check:before { content: "\e72b"; }
  &.e-filter-clear:before { content: "\e72c"; }
  &.e-notes:before { content: "\e72d"; }
  &.e-export:before { content: "\e72e"; }
  &.e-bring-forward:before { content: "\e72f"; }
  &.e-edit:before { content: "\e730"; }
  &.e-filter-main:before { content: "\e731"; }
  &.e-split-vertical:before { content: "\e732"; }
  &.e-comment-show:before { content: "\e733"; }
  &.e-chevron-down-small:before { content: "\e734"; }
  &.e-filter-active:before { content: "\e735"; }
  &.e-drag-and-drop-indicator:before { content: "\e736"; }
  &.e-bold:before { content: "\e737"; }
  &.e-chevron-left-small:before { content: "\e738"; }
  &.e-highlight-color:before { content: "\e739"; }
  &.e-print-layout:before { content: "\e73a"; }
  &.e-between:before { content: "\e73b"; }
  &.e-link-remove:before { content: "\e73c"; }
  &.e-table-of-content:before { content: "\e73d"; }
  &.e-grip-vertical:before { content: "\e73e"; }
  &.e-kpi:before { content: "\e73f"; }
  &.e-redaction:before { content: "\e740"; }
  &.e-volume:before { content: "\e741"; }
  &.e-break-page:before { content: "\e742"; }
  &.e-length:before { content: "\e743"; }
  &.e-chevron-left-double:before { content: "\e744"; }
  &.e-hyperlink-copy:before { content: "\e745"; }
  &.e-lower-case:before { content: "\e746"; }
  &.e-bullet-2:before { content: "\e747"; }
  &.e-chevron-right:before { content: "\e748"; }
  &.e-ungroup-1:before { content: "\e749"; }
  &.e-auto-fit-content:before { content: "\e74a"; }
  &.e-filtered-sort-descending:before { content: "\e74b"; }
  &.e-agenda-date-range:before { content: "\e74c"; }
  &.e-grand-total:before { content: "\e74d"; }
  &.e-mouse-pointer:before { content: "\e74e"; }
  &.e-align-middle:before { content: "\e74f"; }
  &.e-bookmark:before { content: "\e750"; }
  &.e-field-settings:before { content: "\e751"; }
  &.e-paste-match-destination:before { content: "\e752"; }
  &.e-password:before { content: "\e753"; }
  &.e-search:before { content: "\e754"; }
  &.e-redo:before { content: "\e755"; }
  &.e-location:before { content: "\e756"; }
  &.e-link:before { content: "\e757"; }
  &.e-strikethrough:before { content: "\e758"; }
  &.e-auto-fit-window:before { content: "\e759"; }
  &.e-italic:before { content: "\e75a"; }
  &.e-month-agenda:before { content: "\e75b"; }
  &.e-chevron-right-small:before { content: "\e75c"; }
  &.e-print:before { content: "\e75d"; }
  &.e-timeline-today:before { content: "\e75e"; }
  &.e-text-that-contains:before { content: "\e75f"; }
  &.e-folder-open:before { content: "\e760"; }
  &.e-resizer-1:before { content: "\e761"; }
  &.e-break-section:before { content: "\e762"; }
  &.e-bullet-6:before { content: "\e763"; }
  &.e-iconsets:before { content: "\e764"; }
  &.e-chevron-left:before { content: "\e765"; }
  &.e-border-bottom:before { content: "\e766"; }
  &.e-spacing-after:before { content: "\e767"; }
  &.e-circle-add:before { content: "\e768"; }
  &.e-text-alternative:before { content: "\e769"; }
  &.e-level-1:before { content: "\e76a"; }
  &.e-two-column:before { content: "\e76b"; }
  &.e-top-10:before { content: "\e76c"; }
  &.e-rename:before { content: "\e76d"; }
  &.e-style:before { content: "\e76e"; }
  &.e-font-name:before { content: "\e76f"; }
  &.e-more-vertical-1:before { content: "\e770"; }
  &.e-line-very-small:before { content: "\e771"; }
  &.e-repeat:before { content: "\e772"; }
  &.e-arrow-left:before { content: "\e773"; }
  &.e-check:before { content: "\e774"; }
  &.e-vertical-align-top:before { content: "\e775"; }
  &.e-chevron-up:before { content: "\e776"; }
  &.e-bottom-10:before { content: "\e777"; }
  &.e-day:before { content: "\e778"; }
  &.e-ungroup-2:before { content: "\e779"; }
  &.e-open-link:before { content: "\e77a"; }
  &.e-pause:before { content: "\e77b"; }
  &.e-copy:before { content: "\e77c"; }
  &.e-page-numbering:before { content: "\e77d"; }
  &.e-list-unordered:before { content: "\e77e"; }
  &.e-freeze-row:before { content: "\e77f"; }
  &.e-level-3:before { content: "\e780"; }
  &.e-export-xls:before { content: "\e781"; }
  &.e-comment-reopen:before { content: "\e782"; }
  &.e-paint-bucket:before { content: "\e783"; }
  &.e-border-diagonal-1:before { content: "\e784"; }
  &.e-fixed-column-width:before { content: "\e785"; }
  &.e-image:before { content: "\e786"; }
  &.e-number-formatting:before { content: "\e787"; }
  &.e-protect-workbook:before { content: "\e788"; }
  &.e-recurrence-edit:before { content: "\e789"; }
  &.e-send-to-back:before { content: "\e78a"; }
  &.e-insert-left:before { content: "\e78b"; }
  &.e-area:before { content: "\e78c"; }
  &.e-line-spacing:before { content: "\e78d"; }
  &.e-select-all:before { content: "\e78e"; }
  &.e-border-inner:before { content: "\e78f"; }
  &.e-radius:before { content: "\e790"; }
  &.e-data-bars:before { content: "\e791"; }
  &.e-border-middle:before { content: "\e792"; }
  &.e-upper-case:before { content: "\e793"; }
  &.e-page-setup:before { content: "\e794"; }
  &.e-zoom-in:before { content: "\e795"; }
  &.e-filtered:before { content: "\e796"; }
  &.e-hyperlink-open:before { content: "\e797"; }
  &.e-calculated-member:before { content: "\e798"; }
  &.e-menu:before { content: "\e799"; }
  &.e-greater-than:before { content: "\e79a"; }
  &.e-bullet-4:before { content: "\e79b"; }
  &.e-bottom-10-items:before { content: "\e79c"; }
  &.e-border-diagonal-2:before { content: "\e79d"; }
  &.e-thumbnail:before { content: "\e79e"; }
  &.e-font-color:before { content: "\e79f"; }
  &.e-align-bottom:before { content: "\e7a0"; }
  &.e-download:before { content: "\e7a1"; }
  &.e-clear-rules:before { content: "\e7a2"; }
  &.e-sort-ascending:before { content: "\e7a3"; }
  &.e-split-horizontal:before { content: "\e7a4"; }
  &.e-group-2:before { content: "\e7a5"; }
  &.e-drop-down:before { content: "\e7a6"; }
  &.e-superscript:before { content: "\e7a7"; }
  &.e-changes-accept:before { content: "\e7a8"; }
  &.e-chevron-right-double:before { content: "\e7a9"; }
  &.e-sort-ascending-2:before { content: "\e7aa"; }
  &.e-border-right:before { content: "\e7ab"; }
  &.e-mdx:before { content: "\e7ac"; }
  &.e-border-outer:before { content: "\e7ad"; }
  &.e-save-as:before { content: "\e7ae"; }
  &.e-end-footnote:before { content: "\e7af"; }
  &.e-exit-full-screen:before { content: "\e7b0"; }
  &.e-pan:before { content: "\e7b1"; }
  &.e-radio-button:before { content: "\e7b2"; }
  &.e-text-annotation:before { content: "\e7b3"; }
  &.e-user:before { content: "\e7b4"; }
  &.e-spacing-before:before { content: "\e7b5"; }
  &.e-sort-descending:before { content: "\e7b6"; }
  &.e-display:before { content: "\e7b7"; }
  &.e-align-left:before { content: "\e7b8"; }
  &.e-people:before { content: "\e7b9"; }
  &.e-export-csv:before { content: "\e7ba"; }
  &.e-footer:before { content: "\e7bb"; }
  &.e-break:before { content: "\e7bc"; }
  &.e-date-occurring:before { content: "\e7bd"; }
  &.e-bullet-3:before { content: "\e7be"; }
  &.e-stroke-width:before { content: "\e7bf"; }
  &.e-description:before { content: "\e7c0"; }
  &.e-export-excel:before { content: "\e7c1"; }
  &.e-table-cell:before { content: "\e7c2"; }
  &.e-text-header:before { content: "\e7c3"; }
  &.e-line-normal:before { content: "\e7c4"; }
  &.e-month:before { content: "\e7c5"; }
  &.e-color-scales:before { content: "\e7c6"; }
  &.e-change-scale-ratio:before { content: "\e7c7"; }
  &.e-save:before { content: "\e7c8"; }
  &.e-expand:before { content: "\e7c9"; }
  &.e-circle:before { content: "\e7ca"; }
  &.e-list-ordered:before { content: "\e7cb"; }
  &.e-erase:before { content: "\e7cc"; }
  &.e-form-field:before { content: "\e7cd"; }
  &.e-text-wrap:before { content: "\e7ce"; }
  &.e-export-svg:before { content: "\e7cf"; }
  &.e-bullet-1:before { content: "\e7d0"; }
  &.e-border-all:before { content: "\e7d1"; }
  &.e-sum:before { content: "\e7d2"; }
  &.e-web-layout:before { content: "\e7d3"; }
  &.e-selection:before { content: "\e7d4"; }
  &.e-table-border-custom:before { content: "\e7d5"; }
  &.e-below-average:before { content: "\e7d6"; }
  &.e-less-than:before { content: "\e7d7"; }
  &.e-arrow-down:before { content: "\e7d8"; }
  &.e-vertical-align-bottom:before { content: "\e7d9"; }
  &.e-timeline-day:before { content: "\e7da"; }
  &.e-signature:before { content: "\e7db"; }
  &.e-file-new:before { content: "\e7dc"; }
  &.e-chevron-up-small:before { content: "\e7dd"; }
  &.e-eye:before { content: "\e7de"; }
  &.e-arrow-up:before { content: "\e7df"; }
  &.e-border-top:before { content: "\e7e0"; }
  &.e-opacity:before { content: "\e7e1"; }
  &.e-intermediate-state:before { content: "\e7e2"; }
  &.e-resizer-vertical:before { content: "\e7e3"; }
  &.e-check-box:before { content: "\e7e4"; }
  &.e-vertical-align-center:before { content: "\e7e5"; }
  &.e-two-row:before { content: "\e7e6"; }
  &.e-close:before { content: "\e7e7"; }
  &.e-all:before { content: "\e7e8"; }
  &.e-table:before { content: "\e7e9"; }
  &.e-hide-headings:before { content: "\e7ea"; }
  &.e-table-cell-none:before { content: "\e7eb"; }
  &.e-freeze-pane:before { content: "\e7ec"; }
  &.e-send-backward:before { content: "\e7ed"; }
  &.e-export-png:before { content: "\e7ee"; }
  &.e-duplicate-cell:before { content: "\e7ef"; }
  &.e-spell-check:before { content: "\e7f0"; }
  &.e-table-align-center:before { content: "\e7f1"; }
  &.e-delete-row:before { content: "\e7f2"; }
  &.e-none:before { content: "\e7f3"; }
  &.e-group-1:before { content: "\e7f4"; }
  &.e-change-case:before { content: "\e7f5"; }
  &.e-table-align-left:before { content: "\e7f6"; }
  &.e-filter:before { content: "\e7f7"; }
  &.e-clear-form:before { content: "\e7f8"; }
  &.e-arrow-right:before { content: "\e7f9"; }
  &.e-hide-formula-bar:before { content: "\e7fa"; }
  &.e-cut:before { content: "\e7fb"; }
  &.e-bullet-5:before { content: "\e7fc"; }
  &.e-resizer-horizontal:before { content: "\e7fd"; }
  &.e-chevron-down-double:before { content: "\e7fe"; }
  &.e-lock:before { content: "\e7ff"; }
  &.e-circle-info:before { content: "\e800"; }
  &.e-insert-below:before { content: "\e801"; }
  &.e-pentagon:before { content: "\e802"; }
  &.e-clear-format:before { content: "\e803"; }
  &.e-time-zone:before { content: "\e804"; }
  &.e-plus:before { content: "\e805"; }
  &.e-border-left:before { content: "\e806"; }
  &.e-level-2:before { content: "\e807"; }
  &.e-above-average:before { content: "\e808"; }
  &.e-order:before { content: "\e809"; }
  &.e-subscript:before { content: "\e80a"; }
  &.e-changes-track:before { content: "\e80b"; }
  &.e-hyperlink-remove:before { content: "\e80c"; }
  &.e-top-bottom-rules:before { content: "\e80d"; }
  &.e-code-view:before { content: "\e80e"; }
  &.e-collapse-2:before { content: "\e80f"; }
  &.e-increase-indent:before { content: "\e810"; }
  &.e-table-delete:before { content: "\e811"; }
  &.e-conditional-formatting-large:before { content: "\e812"; }
  &.e-align-center:before { content: "\e813"; }
  &.e-reapply:before { content: "\e814"; }
  &.e-changes-reject:before { content: "\e815"; }
  &.e-hide-gridlines:before { content: "\e816"; }
  &.e-week:before { content: "\e817"; }
  &.e-last-page:before { content: "\e818"; }
  &.e-line:before { content: "\e819"; }
  &.e-equalto:before { content: "\e81a"; }
  &.e-circle-remove:before { content: "\e81b"; }
  &.e-full-screen:before { content: "\e81c"; }
  &.e-dimension:before { content: "\e81d"; }
  &.e-filtered-sort-ascending:before { content: "\e81e"; }
  &.e-timeline-week:before { content: "\e81f"; }
  &.e-trash:before { content: "\e820"; }
  &.e-properties-1:before { content: "\e821"; }
  &.e-chevron-up-double:before { content: "\e822"; }
  &.e-sorting-2:before { content: "\e823"; }
  &.e-sorting-1:before { content: "\e824"; }
  &.e-zoom-out:before { content: "\e825"; }
  &.e-chart:before { content: "\e826"; }
  &.e-border-none:before { content: "\e827"; }
  &.e-table-update:before { content: "\e828"; }
  &.e-named-set:before { content: "\e829"; }
  &.e-annotation-edit:before { content: "\e82a"; }
  &.e-view-side:before { content: "\e82b"; }
  &.e-comment-add:before { content: "\e82c"; }
  &.e-grid-view:before { content: "\e82d"; }
  &.e-caption:before { content: "\e82e"; }
  &.e-underline:before { content: "\e82f"; }
  &.e-text-form:before { content: "\e830"; }
  &.e-insert-code:before { content: "\e831"; }
  &.e-resizer-right:before { content: "\e832"; }
  &.e-first-page:before { content: "\e833"; }
  &.e-box:before { content: "\e834"; }
  &.e-data-validation:before { content: "\e835"; }
  &.e-insert-above:before { content: "\e836"; }
  &.e-level-5:before { content: "\e837"; }
  &.e-zoom-to-fit:before { content: "\e838"; }
  &.e-error-treeview:before { content: "\e839"; }
  &.e-merge-cells:before { content: "\e83a"; }
  &.e-border-center:before { content: "\e83b"; }
  &.e-folder:before { content: "\e83c"; }
  &.e-highlight:before { content: "\e83d"; }
  &.e-properties-2:before { content: "\e83e"; }
  &.e-table-2:before { content: "\e83f"; }
  &.e-bring-to-front:before { content: "\e840"; }
  &.e-freeze-column:before { content: "\e841"; }
  &.e-paste-style:before { content: "\e842"; }
  &.e-unfiltered:before { content: "\e843"; }
  &.e-paragraph:before { content: "\e844"; }
  &.e-chart-insert-column:before { content: "\e845"; }
  &.e-chart-legend:before { content: "\e846"; }
  &.e-chart-insert-x-y-scatter:before { content: "\e847"; }
  &.e-add-chart-element:before { content: "\e848"; }
  &.e-chart-gridlines:before { content: "\e849"; }
  &.e-chart-insert-line:before { content: "\e84a"; }
  &.e-chart-switch-row-column:before { content: "\e84b"; }
  &.e-chart-axes:before { content: "\e84c"; }
  &.e-chart-lines:before { content: "\e84d"; }
  &.e-chart-axis-titles:before { content: "\e84e"; }
  &.e-chart-title:before { content: "\e84f"; }
  &.e-chart-insert-pie:before { content: "\e850"; }
  &.e-chart-data-labels:before { content: "\e851"; }
  &.e-chart-axis-titles-primary-horizontal:before { content: "\e852"; }
  &.e-chart-legend-none:before { content: "\e853"; }
  &.e-chart-legend-right:before { content: "\e854"; }
  &.e-chart-primary-minor-vertical:before { content: "\e855"; }
  &.e-chart-axes-primary-vertical:before { content: "\e856"; }
  &.e-chart-data-labels-center:before { content: "\e857"; }
  &.e-chart-data-labels-none:before { content: "\e858"; }
  &.e-chart-primary-major-vertical:before { content: "\e859"; }
  &.e-chart-axes-primary-horizontal:before { content: "\e85a"; }
  &.e-chart-legend-top:before { content: "\e85b"; }
  &.e-chart-primary-minor-horizontal:before { content: "\e85c"; }
  &.e-chart-primary-major-horizontal:before { content: "\e85d"; }
  &.e-chart-legend-bottom:before { content: "\e85e"; }
  &.e-chart-data-labels-outside-end:before { content: "\e85f"; }
  &.e-chart-axis-titles-primary-vertical:before { content: "\e860"; }
  &.e-chart-legend-left:before { content: "\e861"; }
  &.e-chart-data-labels-inside-base:before { content: "\e862"; }
  &.e-chart-data-labels-inside-end:before { content: "\e863"; }
  &.e-chart-title-none:before { content: "\e864"; }
  &.e-chart-title-centered-overlay:before { content: "\e865"; }
  &.e-chart-2d-stacked-bar:before { content: "\e866"; }
  &.e-chart-2d-stacked-line:before { content: "\e867"; }
  &.e-chart-donut:before { content: "\e868"; }
  &.e-chart-2d-pie-2:before { content: "\e869"; }
  &.e-chart-2d-clustered-column:before { content: "\e86a"; }
  &.e-chart-2d-100-percent-stacked-area:before { content: "\e86b"; }
  &.e-chart-2d-clustered-bar:before { content: "\e86c"; }
  &.e-chart-2d-100-percent-stacked-bar:before { content: "\e86d"; }
  &.e-chart-2d-line:before { content: "\e86e"; }
  &.e-chart-2d-100-percent-stacked-column:before { content: "\e86f"; }
  &.e-chart-2d-100-percent-stacked-line:before { content: "\e870"; }
  &.e-chart-2d-stacked-area:before { content: "\e871"; }
  &.e-chart-insert-bar:before { content: "\e872"; }
  &.e-chart-2d-area:before { content: "\e873"; }
  &.e-more-scatter-charts:before { content: "\e874"; }
  &.e-chart-2d-stacked-column:before { content: "\e875"; }
  &.e-timeline-month:before { content: "\e876"; }
  &.e-drag-fill:before { content: "\e877"; }
  &.e-circle-close:before { content: "\e878"; }
  &.e-resize:before { content: "\e879"; }
  &.e-chevron-up-fill:before { content: "\e87a"; }
  &.e-home:before { content: "\e87b"; }
  &.e-sorting-3:before { content: "\e87c"; }
  &.e-chevron-left-fill:before { content: "\e87d"; }
  &.e-chevron-right-fill:before { content: "\e87e"; }
  &.e-intermediate-state-2:before { content: "\e87f"; }
  &.e-settings:before { content: "\e880"; }
  &.e-check-small:before { content: "\e881"; }
  &.e-table-merge:before { content: "\e882"; }
  &.e-table-nested:before { content: "\e883"; }
  &.e-table-insert-row:before { content: "\e884"; }
  &.e-table-insert-column:before { content: "\e885"; }
  &.e-table-overwrite-cells:before { content: "\e886"; }
  &.e-eye-slash:before { content: "\e887"; }
  &.e-gantt-gripper:before { content: "\e888"; }
  &.e-bring-to-view:before { content: "\e889"; }
  &.e-bring-to-center:before { content: "\e88a"; }
  &.e-warning:before { content: "\e88b"; }
  &.e-critical-path:before { content: "\e88c"; }
  &.e-border-diagonal-up:before { content: "\e88d"; }
  &.e-border-diagonal-down:before { content: "\e88e"; }
  &.e-border-custom:before { content: "\e88f"; }
  &.e-border-none-1:before { content: "\e890"; }
  &.e-border-box:before { content: "\e891"; }
  &.e-border-shadow-1:before { content: "\e892"; }
  &.e-border-shadow-2:before { content: "\e893"; }
  &.e-audio:before { content: "\e894"; }
  &.e-video:before { content: "\e895"; }
  &.e-crop:before { content: "\e896"; }
  &.e-star-filled:before { content: "\e897"; }
  &.e-filters:before { content: "\e898"; }
  &.e-adjustment:before { content: "\e899"; }
  &.e-page-size:before { content: "\e89a"; }
  &.e-reset:before { content: "\e89b"; }
  &.e-triangle:before { content: "\e89c"; }
  &.e-page-text-wrap:before { content: "\e89d"; }
  &.e-tint:before { content: "\e89e"; }
  &.e-brightness:before { content: "\e89f"; }
  &.e-contrast:before { content: "\e8a0"; }
  &.e-saturation:before { content: "\e8a1"; }
  &.e-fade:before { content: "\e8a2"; }
  &.e-flip-vertical:before { content: "\e8a3"; }
  &.e-flip-horizontal:before { content: "\e8a4"; }
  &.e-transform-left:before { content: "\e8a5"; }
  &.e-transform-right:before { content: "\e8a6"; }
  &.e-sharpness:before { content: "\e8a7"; }
  &.e-grain:before { content: "\e8a8"; }
  &.e-frame-custom:before { content: "\e8a9"; }
  &.e-frame-1:before { content: "\e8aa"; }
  &.e-frame-2:before { content: "\e8ab"; }
  &.e-frame-3:before { content: "\e8ac"; }
  &.e-frame-4:before { content: "\e8ad"; }
  &.e-frame-5:before { content: "\e8ae"; }
  &.e-frame-6:before { content: "\e8af"; }
  &.e-transform:before { content: "\e8b0"; }
  &.e-check-tick:before { content: "\e8b1"; }
  &.e-even-page-break:before { content: "\e8b2"; }
  &.e-odd-page-break:before { content: "\e8b3"; }
  &.e-page-columns:before { content: "\e8b4"; }
  &.e-continuous-page-break:before { content: "\e8b5"; }
  &.e-page-column:before { content: "\e8b6"; }
  &.e-page-column-right:before { content: "\e8b7"; }
  &.e-page-column-left:before { content: "\e8b8"; }
  &.e-page-column-one:before { content: "\e8b9"; }
  &.e-page-column-two:before { content: "\e8ba"; }
  &.e-page-column-three:before { content: "\e8bb"; }
  &.e-multiple-comment:before { content: "\e8bc"; }
  &.e-format-painter:before { content: "\e8bd"; }
  &.e-launcher:before { content: "\e8be"; }
  &.e-character-style:before { content: "\e8bf"; }
  &.e-linked-style:before { content: "\e8c0"; }
  &.e-chart-2d-stacked-line-marked:before { content: "\e8c1"; }
  &.e-chart-2d-100-percent-stacked-line-marked:before { content: "\e8c2"; }
  &.e-chart-2d-line-marked:before { content: "\e8c3"; }
  &.e-list-unordered-rtl:before { content: "\e8c4"; }
  &.e-list-ordered-rtl:before { content: "\e8c5"; }
  &.e-increase-indent-rtl:before { content: "\e8c6"; }
  &.e-decrease-indent-rtl:before { content: "\e8c7"; }
  &.e-emoji:before { content: "\e8c8"; }
  &.e-travel-and-places:before { content: "\e8c9"; }
  &.e-nature:before { content: "\e8ca"; }
  &.e-food-and-drinks:before { content: "\e8cb"; }
  &.e-animals:before { content: "\e8cc"; }
  &.e-objects:before { content: "\e8cd"; }
  &.e-activities:before { content: "\e8ce"; }
  &.e-hand-gestures:before { content: "\e8cf"; }
  &.e-symbols:before { content: "\e8d0"; }
  &.e-flags:before { content: "\e8d1"; }
  &.e-unlock:before { content: "\e8d2"; }
  &.e-more-chevron:before { content: "\e8d3"; }
  &.e-border-frame:before { content: "\e8d4"; }
  &.e-frame-none:before { content: "\e8d5"; }
  &.e-frame-mat:before { content: "\e8d6"; }
  &.e-frame-bevel:before { content: "\e8d7"; }
  &.e-frame-line:before { content: "\e8d8"; }
  &.e-frame-hook:before { content: "\e8d9"; }
  &.e-frame-inset:before { content: "\e8da"; }
}

}/*! Accordion's bootstrap5 theme wise override definitions and variables */
/* stylelint-disable */
$acrdn-skin: 'bootstrap5' !default;

// font definitions
$acrdn-icon-font-size: $text-lg !default;
$acrdn-slct-header-font-weight: $font-weight-normal;
$acrdn-header-font: $content-text-color !default;
$acrdn-nested-header-font: $content-text-color !default;
$acrdn-header-font-weight: $font-weight-normal !default;
$acrdn-header-font-size: $text-sm !default;
$acrdn-nest-header-font-size: $text-sm !default;
$acrdn-nest-header-content-font-size: $acrdn-nest-header-font-size !default;
$acrdn-nest-header-content-font-weight: $font-weight-normal !default;
$acrdn-content-font-size: $text-sm !default;
$acrdn-header-font-bgr-size: $text-base !default;
$acrdn-content-font-bgr-size: $text-base !default;
$acrdn-bgr-arrow-icon-font-size: $text-xl;
$acrdn-bgr-item-header-content-font-size: $text-base !default;
$acrdn-icon-font-size: $text-lg !default;
$acrdn-selected-header-font-color: $primary !default;

// Header, Nested header and RTL mode Padding
$acrdn-nest-nrml-header-padding: 10px 0 10px 26px !default;
$acrdn-nest-bgr-header-padding: 12px 0 12px 28px !default;
$acrdn-nest-second-nrml-header-padding: 8px 0 8px 38px !default;
$acrdn-nest-second-bgr-header-padding: 12px 0 12px 40px !default;
$acrdn-nrml-header-padding: 10px 16px !default;
$acrdn-bgr-header-padding: 13px 20px !default;
$acrdn-rtl-nrml-header-padding: 7px 12px !default;
$acrdn-rtl-bgr-header-padding: 11px 17px !default;
$acrdn-rtl-nest-nrml-header-padding: 8px 26px 8px 0 !default;
$acrdn-rtl-nest-bgr-header-padding: 12px 28px 12px 0 !default;
$acrdn-rtl-nest-second-nrml-header-padding: 8px 38px 8px 0 !default;
$acrdn-rtl-nest-second-bgr-header-padding: 12px 40px 12px 0 !default;
$acrdn-nested-item-header-focus-box-shadow: inset $shadow-focus-ring1 !default;

// Content, Nested content and RTL mode Padding
$acrdn-nrml-content-padding: 12px !default;
$acrdn-bgr-content-padding: 16px !default;
$acrdn-nest-nrml-content-padding: 16px 16px 16px 26px !default;
$acrdn-nest-bgr-content-padding: 20px 20px 20px 28px !default;
$acrdn-nest-second-nrml-content-padding: 20px 20px 20px 38px !default;
$acrdn-nest-second-bgr-content-padding: 24px 24px 24px 40px !default;
$acrdn-rtl-nest-nrml-content-padding: 16px 26px 16px 16px !default;
$acrdn-rtl-nest-bgr-content-padding: 20px 28px 20px 20px !default;
$acrdn-rtl-nest-second-nrml-content-padding: 20px 38px 20px 20px !default;
$acrdn-rtl-nest-second-bgr-content-padding: 24px 40px 24px 24px !default;

// dimension definitions
$acrdn-border-radius: 4px !default;
$acrdn-nrml-header-minheight: 38px !default;
$acrdn-bgr-header-minheight: 48px !default;
$acrdn-nrml-header-lineheight: 22px !default;
$acrdn-bgr-header-lineheight: 24px !default;
$acrdn-nrml-header-paddingpix: 16px !default;
$acrdn-bgr-header-paddingpix: 16px !default;
$acrdn-content-line-height: 1.5 !default;
$acrdn-nrml-header-icon-padding: 8px !default;
$acrdn-bgr-header-icon-padding: 12px !default;
$acrdn-nrml-icn-minwidth: 22px !default;
$acrdn-bgr-icn-minwidth: 24px !default;
$acrdn-selected-border-size: 1px !default;
$acrdn-item-padding-size: 0 !default;
$acrdn-selected-border-type: none !default;
$acrdn-border-type: solid !default;
$acrdn-border-size: 1px !default;

$acrdn-item-hdr-con-lineheight: 22px !default;
$acrdn-item-selected-first-child-border-top: 1px none $border-light !default;
$acrdn-item-selected-last-child-border-bottom: 1px solid $border-light !default;
$acrdn-item-border-radius: 0 !default;
$acrdn-item-margin-top: 0 !default;
$acrdn-item-nested-panel-item-select-margin: 0 !default;
$acrdn-item-overflow: visible !default;
$acrdn-item-hover-focus-hdr-con-text-decoration: none !default;
$acrdn-item-hdr-border-radius: 0 !default;
$acrdn-item-tgl-icon-display: table !default;
$acrdn-item-arrow-icon-font-size: $text-lg !default;
$acrdn-opacity: .5 !default;

// color definitions
$acrdn-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
$acrdn-active-bg: $content-bg-color !default;
$acrdn-bg-color: $content-bg-color !default;
$acrdn-default-bg-color: $acrdn-bg-color !default;
$acrdn-active-bg-color: $acrdn-active-bg !default;
$acrdn-selected-header-color: $content-bg-color !default;
$acrdn-icon-color: $icon-color !default;
$acrdn-selected-icon-color: $primary !default;
$acrdn-content-color: $content-text-color !default;
$acrdn-selected-border-color: $border-light !default;
$acrdn-header-focus-bg: $primary-lighter !default;
$acrdn-header-hover-bg: $primary-lighter !default;
$acrdn-header-active-bg: $primary-lighter !default;
$acrdn-item-header-focus-border-color: $primary !default;
$acrdn-item-icon-disable-color: $icon-color-disabled;
$acrdn-text-disable-color: $content-text-color-disabled;
$acrdn-default-border: $acrdn-selected-border-color !default;

$acrdn-item-border-color: $acrdn-default-border !default;
$acrdn-item-border-nav-type: solid !default;
$acrdn-item-border-size: 0 0 1px 0 !default;
$acrdn-item-select-last-child-border-bottom: 0 !default;
$acrdn-item-select-last-child-border-radius: 0 !default;
$acrdn-item-first-child-hdr-focus-border-radius: 4px 4px 0 0 !default;
$acrdn-item-last-child-border-bottom: 0 !default;
$acrdn-item-last-child-not-exp-hdr-focus-border-radius: 0 0 4px 4px !default;
$acrdn-item-focus-border-color: $acrdn-default-border !default;
$acrdn-item-focus-border-size: 0 0 1px 0 !default;
$acrdn-item-focus-selected-exp-border-top: 1px none $acrdn-default-border !default;
$acrdn-item-focus-selected-exp-hdr-focus-border-color: $acrdn-default-border !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: $primary-lighter !default;
$acrdn-item-focus-exp-hdr-hover-focus-color: $acrdn-selected-header-font-color !default;
$acrdn-item-focus-selected-hdr-icons-font: $acrdn-selected-header-font-color !default;
$acrdn-item-focus-exp-hdricon-hover-font: $acrdn-icon-color !default;
$acrdn-item-focus-selected-exp-border-color: $acrdn-default-border !default;
$acrdn-item-exp-select-border-color: $acrdn-default-border !default;
$acrdn-item-exp-select-border-size: 0 0 1px 0 !default;
$acrdn-item-header-border: 0 !default;
$acrdn-item-select-exp-hdr-con-disable-font: $content-text-color-disabled !default;
$acrdn-item-header-content-disable-color: $content-text-color !default;
$acrdn-item-hdr-con-text-disabled-font: $content-text-color-disabled !default;
$acrdn-item-selected-exp-hdr-focus-border-color: $border-light !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: $primary-lighter !default;
$acrdn-item-selected-exp-hdr-hover-bg: $primary-lighter !default;
$acrdn-item-selected-exp-hdr-active-bg: $primary-lighter !default;
$acrdn-item-nes-pan-con-last-child-border-bottom: 1px none $acrdn-selected-border-color !default;
$acrdn-item-select-bg: none !default;
$acrdn-item-select-border-color: $border-light !default;
$acrdn-item-select-border-size: 0 0 1px 0 !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: none !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: $shadow-focus-ring1 !default;
$acrdn-item-header-focus-bg: none !default;
$acrdn-item-header-focus-active-color: $content-text-color !default;
$acrdn-item-select-exp-hdr-hover-color: $primary !default;
$acrdn-item-selected-exp-hdr-border-color: $border-light !default;
$acrdn-item-selected-exp-hdr-border-size: 0 0 1px 0 !default;
$acrdn-item-selected-exp-hdr-bg: $primary-lighter !default;
$acrdn-item-selected-exp-hdr-hover-color: $primary !default;
$acrdn-item-selected-exp-hdr-hover-focus-color: $primary !default;
$acrdn-item-selected-exp-hdr-icon-color: $icon-color !default;
$acrdn-item-selected-exp-hdr-hover-border-color: $border-light !default;
$acrdn-item-selected-tgl-icon-color: $primary !default;
$acrdn-item-selected-hdr-font: $primary !default;
$acrdn-item-select-hdr-focus-border-color: $border-light !default;
$acrdn-item-selected-border-color: $border-light !default;
$acrdn-item-selected-border-size: 0 0 1px 0 !default;
$acrdn-item-selected-select-last-border-bottom: 1px none $border-light !default;
$acrdn-item-selected-selected-border-color: $border-light !default;
$acrdn-item-selected-selected-border-size: 0 0 1px 0 !default;
$acrdn-item-selected-header-background: $primary-lighter !default;
$acrdn-item-selected-hdr-border-color: $border-light !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: $primary !default;
$acrdn-item-selected-select-border-color: $border-light !default;
$acrdn-item-selected-select-border-size: 0 0 1px 0 !default;
$acrdn-item-selected-hdr-icon-font: $primary !default;
$acrdn-item-selected-exp-hdr-con-hover-color: $primary !default;
$acrdn-item-selected-exp-hdr-icon-hover-color: $icon-color !default;
$acrdn-item-selected-select-active-bg: $content-bg-color !default;
$acrdn-item-nes-pan-exp-hdr-color: $content-text-color !default;
$acrdn-item-selected-hdr-hover-border-color: $border-light !default;
$acrdn-item-selected-hdr-tgl-icon-hover-font: $primary !default;
$acrdn-item-nes-selected-exp-hover-hdr-icons-font: $primary !default;
$acrdn-item-nes-selected-exp-hover-hdr-con-font: $content-text-color !default;
$acrdn-item-exp-not-selected-hdr-focus-bg: none !default;
$acrdn-item-exp-not-selected-hdr-focus-border: 0 !default;
$acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;

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

  /*! accordion layout */
  .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: 0;

            > .e-accordion {
              border: 0;
            }

            .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-minheight;
          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: 0 $acrdn-bgr-header-icon-padding 0 0;

          .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: 0 0 0 $acrdn-bgr-header-icon-padding;
          }
        }
      }
    }
  }

  .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: 0;
      }
      
      &:not(.e-select) + .e-acrdn-item:not(.e-select) {
        margin-bottom: 0;
        margin-top: 0;
      }

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

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

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

    .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-minheight;
          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: 0 $acrdn-nrml-header-icon-padding 0 0;

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

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

            > .e-accordion {
              border: 0;
            }

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

        .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: 0 0 0 $acrdn-nrml-header-icon-padding;
          }
        }
      }
    }
  }
}


@include export-module('accordion-theme') {

  /*! accordion theme */
  /* stylelint-disable property-no-vendor-prefix */
  .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;
          box-shadow: $acrdn-item-header-focus-box-shadow;
          background: $acrdn-item-header-focus-bg;

          &:active {

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

      &.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 {
            box-shadow: $acrdn-item-header-focus-box-shadow;
            position: relative;
            z-index: 2;
          }
        }

        + .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-bootstrap5-icons') {

  /*! accordion icons */
  #{&}.e-accordion {

    .e-tgl-collapse-icon {

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

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

$ddl-input-font-size: $text-sm !default;
$ddl-zero-value: 0 !default;
$ddl-input-border: 1px $border-light !default;
$ddl-input-font-family: inherit !default;
$ddl-input-margin-bottom: 4px !default;
$ddl-input-padding: 8px $ddl-zero-value 4px !default;
$ddl-input-group-border-width: $ddl-zero-value !default;
$ddl-list-search-icon-padding: 12px 8px 8px !default;
$ddl-list-filter-text-indent: 0 !default;
$ddl-bigger-list-font-size: $text-base !default;
$ddl-filter-border: 0 !default;
$ddl-filter-top-border: 0 !default;
$ddl-filter-padding: 5px !default;
$ddl-clear-icon-margin-right: 66px !default;
$ddl-back-icon-margin: 0 10px 0 -52px !default;
$ddl-back-icon-padding: 0 8px !default;
$ddl-popup-shadow: $shadow-lg !default;
$ddl-readonly-bg-color: $content-bg-color-alt2 !default;
$ddl-filter-margin: 0 !default;

// Small Size
$ddl-small-list-font-size: $text-xs !default;

// touch small
$ddl-bigger-small-list-font-size: $text-sm !default;

// color

$ddl-default-border-color: $border-light !default;
$ddl-active-font-color: $content-text-color-selected !default;
$ddl-list-box-shadow-color: rgba(0, 0, 0, .21) !default;
$ddl-filter-box-shadow-color: rgba(0, 0, 0, .3) !default;
$ddl-popup-background-color: $flyout-bg-color !default;
$ddl-filter-background-color: $content-bg-color !default;
$ddl-filter-bg: $content-bg-color !default;
$ddl-list-icon-color: $icon-color !default;
$ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;

@include export-module('dropdownlist-bootstrap5') {
  #{&}.e-popup.e-ddl {
    border-radius: 4px;
    box-shadow: none;
    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-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;
      }

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

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

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

  .e-input-group#{&}.e-control-wrapper.e-ddl .e-input[readonly],
  .e-float-input#{&}.e-control-wrapper.e-ddl input[readonly] {
    background: transparent;
  }

  .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
  .e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
    background: $ddl-readonly-bg-color;
  }

  .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.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
  .e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
  .e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
  .e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
    background: transparent;
    color: $ddl-list-icon-color;
  }

  .e-input-group.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
  .e-input-group.e-control-wrapper.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
  .e-float-input.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
  .e-float-input.e-control-wrapper.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon {
    background: $content-bg-color-alt2;
  }

  .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-input-group:not(.e-disabled) .e-clear-icon {
    background: transparent;
    display: flex;
    position: relative;
  }

  .e-ddl#{&}.e-popup .e-filter-parent .e-input-group,
  .e-ddl#{&}.e-popup .e-filter-parent {
    background: $ddl-filter-bg;
  }

  .e-input-group .e-control#{&}.e-dropdownlist~.e-ddl-icon {
    font-size: $text-sm;
  }

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

@include export-module('dropdownlist-layout') {
  .e-bigger .e-input-group.e-ddl {
    #{if(&, '&', '*')} .e-input-filter,
    #{if(&, '&', '*')} .e-input-filter:focus {
      margin-left: -20px;
    }
  }

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

  .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 != 'tailwind' and $skin-name != 'FluentUI' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap4-dark' and $skin-name != 'Material3') {
        padding: 4px 0;
      }
      @if ($skin-name == 'Material3') {
        margin-top: 8px;
      }
    }
  }

  .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 != 'tailwind' and $skin-name != 'FluentUI' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap4-dark') {
        padding: 4px 0;
      }
    }
  }

  .e-popup-full-page {
    bottom: 0;
    left: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    right: 0;
    top: 0;

    #{&}.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-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: 0;
    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: 0;
      }
    }
  }

  .e-ddl#{&}.e-popup {
    background: $ddl-popup-background-color;
    @if $skin-name != 'material' and $skin-name != 'Material3' {
      border: 1px solid $ddl-default-border-color;
    }
    @if $skin-name == 'Material3' {
      border-radius: 4px;
    }
    position: absolute;
    @at-root {
      #{if(&, '&', '*')} .e-search-icon {
        margin: 0;
        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 != 'tailwind') {
          padding: $ddl-list-filter-text-indent;
        }
      }

      #{if(&, '&', '*')} .e-input-group {
        margin-bottom: 0;
      }

      #{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: 0;
    padding: 0;
    visibility: hidden;
    width: 0;
  }

  .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-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: 100%;
    }

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

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

  // Small 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-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;
      }
    }
  }

  //touch small
  .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-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: 33px;
  }

  .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: 40px;
  }
}


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


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

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

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

$input-skin-name: $skin-name !default;
$zero-value: 0 !default;
$one-value: 1px !default;
$border-type: solid !default;
$border-size: 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;
$textarea-padding: 4px 8px 4px 8px !default;
$textarea-bigger-padding: 6px 12px 6px 12px !default;
$textarea-small-padding: 4px 8px 4px 8px !default;
$textarea-bigger-small-padding: 6px 12px 6px 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-text-indent: 8px !default;
$input-bigger-text-indent: 12px !default;
$input-small-text-indent: 8px !default;
$input-small-bigger-text-indent: 12px !default;
$input-font-size: $text-sm !default;
$input-bigger-font-size: $text-base !default;
$input-small-font-size: $text-xs !default;
$input-bigger-small-font-size: $text-sm !default;
$input-box-border-radius: 4px !default;
$input-small-border-radius: 2px !default;
$input-bigger-border-radius: 4px !default;
$input-bigger-small-border-radius: 4px !default;
$input-groupo-focus-border-radius: 4px !default;
$input-group-focus-box-shadow: $shadow-focus-ring1 !default;
$input-group-icon-border-radius: 3px !default;
$input-group-child-border-width: $zero-value !default;
$input-padding: $zero-value !default;
$float-input-padding: $zero-value !default;
$float-label-padding: $text-xxs !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: 14px !default;
$input-bigger-clear-icon: 16px !default;
$input-small-clear-icon: 12px !default;
$input-bigger-small-clear-icon: 14px !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-child-min-height: 30px !default;
$input-child-min-width: 30px !default;
$input-bigger-child-padding: $zero-value !default;
$input-bigger-child-min-height: 36px !default;
$input-bigger-child-min-width: 36px !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-margin-top: 24px !default;
$input-bigger-margin-top: 24px !default;
$input-small-margin-top: 20px !default;
$input-small-bigger-margin-top: 24px !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-bigger-small-child-min-height: 32px !default;
$input-bigger-small-child-min-width: 32px !default;
$input-small-child-padding: $zero-value !default;
$input-small-child-min-height: 24px !default;
$input-small-child-min-width: 24px !default;
$input-font-family: $font-family !default;
$input-font-style: normal !default;
$input-font-normal: normal !default;
$input-border: $zero-value $border-type !default;
$float-input-border: $zero-value $border-type !default;
$input-box-border-width: 1px !default;
$float-input-border-width: 1px !default;
$input-focus-border-width: 1px !default;
$input-disable-border-type: solid !default;
$input-border-left-width: 1px !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-width-hover: 1px !default;
$input-group-full-border-width: $one-value !default;
$input-valid-border-bottom-width: 2px !default;
$input-right-border-width: $zero-value !default;
$float-label-font-size: $text-xs !default;
$float-label-bigger-font-size: $text-sm !default;
$float-label-small-font-size: $text-xxs !default;
$float-label-bigger-small-font-size: $text-xs !default;
$float-placeholder-font-size: $text-sm !default;
$float-placeholder-bigger-font-size: $text-base !default;
$float-placeholder-small-font-size: $text-xs !default;
$float-placeholder-bigger-small-font-size: $text-sm !default;
$input-border-size: 2px !default;
$input-normal-height: 30px !default;
$input-bigger-height: 36px !default;
$input-small-height: 24px !default;
$input-bigger-small-height: 34px - $input-border-size !default;
$float-input-normal-height: 32px !default;
$float-input-bigger-height: 38px !default;
$float-input-small-height: 26px !default;
$float-input-bigger-small-height: 34px !default;
$input-float-font-weight: $font-weight-medium !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: $text-sm !default;
$input-bigger-icon-font-size: $text-base !default;
$input-small-icon-font-size: $text-xs !default;
$input-bigger-small-icon-font-size: $text-xs !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: 30px !default;
$input-bigger-clear-icon-min-height: $zero-value !default;
$input-bigger-clear-icon-min-width: 36px !default;
$input-bigger-small-clear-icon-min-height: $zero-value !default;
$input-bigger-small-clear-icon-min-width: 36px !default;
$input-small-clear-icon-min-height: $zero-value !default;
$input-small-clear-icon-min-width: 24px !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-error-border-shadow: 0 0 0 4px rgba($danger, .25) !default;
$input-success-border-shadow: 0 0 0 4px rgba($success, .25) !default;
$input-warning-border-shadow: 0 0 0 4px rgba($warning, .25) !default;
$input-group-border-shadow: $shadow-sm !default;

// color

$hover-border-color: $border-hover !default;
$pressed-border-color: $border-pressed !default;
$input-bg-color: $content-bg-color !default;
$input-box-border-focus: $primary-light !default;
$input-success-color: $border-success !default;
$input-warning-color:  $border-warning !default;
$input-error-color: $border-error !default;
$input-disable-bg-color: $content-bg-color-alt2 !default;
$input-disable-font-color: $content-text-color-alt1 !default;
$input-box-border-color: $border !default;
$input-font-color: $content-text-color !default;
$input-icon-font-color: $icon-color !default;
$input-clear-icon-color: $icon-color !default;
$input-clear-icon-hover-color: $icon-color-hover !default;
$input-error-color: $danger !default;
$input-accent:  $content-bg-color !default;
$input-placeholder: $placeholder-text-color !default;
$input-active-border-color: $input-box-border-focus !default;
$input-group-active-border-color: $border !default;
$input-disable-border-color: $border !default;
$input-disabled-group-bg-color: transparent !default;
$input-group-border-right-focus: transparent !default;
$input-group-border-left-focus: transparent !default;
$input-group-active-border: transparent !default;
$input-group-pressed-bg: $secondary-bg-color-pressed !default;
$input-hover-bg-color: $secondary-bg-color-hover !default;
$input-header-font-color: $placeholder-text-color !default;
$input-group-border-color-focus: $primary-light !default;
$input-group-border-color-hover: $border-hover !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-group-pressed-color: $secondary-text-color-pressed !default;
$input-select-font-color: $content-text-color-selected !default;
$float-label-font-color: $content-text-color-alt1 !default;
$float-label-disbale-font-color: $content-text-color-alt3 !default;
$input-placeholder-color: $placeholder-text-color !default;
$input-group-disabled-color: $icon-color-disabled !default;
$input-group-hovered-color: $secondary-text-color-hover !default;
$input-readonly-bg-color: $content-bg-color-alt2 !default;
$input-readonly-color: $content-text-color-alt1 !default;
$input-icon-shadow: inset  0 3px 5px rgba(0, 0, 0, .125) !default;
$input-border-shadow: 0 0 0 3px rgba($primary-light, .25) !default;
$input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
$border-type: solid !default;
$float-label-rtl-value: -7px !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: $primary;
  color: $primary-text-color;
}
/* 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: 13px;
  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: 1.4;
    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: auto;
    line-height: inherit;
    margin: $zero-value;
    margin-bottom: $input-margin-bottom;
    outline: none;
    padding: $input-padding;
    text-indent: $input-text-indent;
    width: 100%;
  }

  input.e-input#{$css},
  textarea.e-input#{$css},
  .e-input-group,
  .e-input-group.e-control-wrapper {
    font-family: $input-font-family;
    font-size: $input-font-size;
    font-weight: normal;
  }

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

  .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 {
    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 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .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 {
    border-radius: $input-box-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 == 'bootstrap5') {
      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.e-bigger#{$css}:focus,
  .e-bigger .e-input#{$css}:focus {
    padding-bottom: $input-bigger-padding-bottom;
  }

  .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#{$css}:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding-bottom: $input-focus-padding-bottom;
    }
  }

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

  .e-input.e-bigger#{$css}:focus,
  .e-bigger .e-input#{$css}:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding-bottom: $input-focus-bigger-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' {
      padding-bottom: $input-focus-bigger-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;
  }

  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') {
      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') {
      border-radius: $input-bigger-border-radius;
    }
  }

  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') {
      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') {
      border-radius: $input-bigger-small-border-radius;
    }
  }

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

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

  .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: 1;
    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') {
      border: 1px solid;
      border-bottom: $zero-value;
      border-collapse: collapse;
      border-top: $zero-value;
    }
    @if $input-skin-name == 'Material3' {
      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') {
      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 {
    @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') {
      border-left-width: $zero-value;
    }
  }

  .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 {
    @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: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 == 'tailwind') {
      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 {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5') {
      border-left-width: 1px;
      border-right-width: $zero-value;
    }
  }

  .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') {
      border-left-width: 1px;
      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') {
      border-left-width: $zero-value;
      border-right: 1px 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') {
      border-left-width: $zero-value;
      border-right-width: 1px;
    }
  }

  .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') {
      border-left-width: $zero-value;
    }
  }

  .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' {
      -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: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 == 'tailwind') {
      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 == 'tailwind') {
      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 == 'tailwind') {
      border-bottom-left-radius: $input-group-icon-border-radius;
      border-bottom-right-radius: $zero-value;
      border-top-left-radius: $input-group-icon-border-radius;
      border-top-right-radius: $zero-value;
    }
  }

  .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') {
      border-bottom-left-radius: $zero-value;
      border-bottom-right-radius: $input-group-icon-border-radius;
      border-top-left-radius: $zero-value;
      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' {
      font-size: $input-left-icon-font-size;
      margin: $zero-value;
      min-height: $input-left-child-min-height;
      min-width: $input-left-child-min-width;
      padding: $zero-value;
    }
  }

  .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 {
    min-height: $input-bigger-child-min-height;
    min-width: $input-bigger-child-min-width;
    @if $input-skin-name == 'Material3' {
      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' {
      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-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' {
      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-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' {
      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-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' {
      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' {
      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 {
    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 {
    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   {
    direction: rtl;
  }

  .e-input#{$css}.e-corner {
    border-radius: $input-box-border-radius;
  }

  .e-input-group,
  .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) {
    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 != '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 != '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 != 'FluentUI') {
      border-left-width: $zero-value;
    }
  }

  .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 {
    @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: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 {
    @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-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 {
    @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-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 != '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 != 'tailwind') or $input-skin-name == 'highcontrast' {
      border-left-width: $input-border-left-width;
      border-right-width: $zero-value;
    }
  }

  
  .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 {
    @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-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 != '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 != '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-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;
  }

  .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.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 {
    font-size: $input-bigger-small-font-size;
  }

  .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.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,
  .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 {
    padding: $input-bigger-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' {
      border-radius: $input-small-child-border-radius;
    }
  }

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

  .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 {
    @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-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-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' {
      border-radius: $input-bigger-small-child-border-radius;
      margin: $input-bigger-small-child-margin;
    }
  }

  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: normal;
    left: 0;
    overflow: hidden;
    padding-left: $float-label-padding;
    pointer-events: none;
    position: absolute;
    text-overflow: ellipsis;
    top: -11px;
    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: 100%;
  }

  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: -11px;
  }

  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-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-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-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: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-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-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-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' {
      top: -8px;
    }
  }

  .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' {
      top: -11px;
    }
  }

  .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' {
      top: -9px;
    }
    font-style: $input-font-style;
  }

  .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' {
      top: -11px;
    }
  }

  .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' {
      top: -8px;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -10px;
    }
  }

  .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' {
      top: -10px;
    }
  }

  .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: -9px;
      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' or $input-skin-name == 'bootstrap4') {
      padding-right: 0;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -35px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap5') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -36px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-weight: 600;
      padding-right: 0;
      transform: translate3d(-10px, -41px, 0) scale(1);
    }
  }

  .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,
  .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' {
      top: -9px;
      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' or $input-skin-name == 'bootstrap4') {
      padding-right: 0;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -34px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap5') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -35px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      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' {
      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: 0;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' {
      padding-right: 0;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap4') {
      padding-right: 0;
      transform: translate3d(-10px, -42px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -37px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap5') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      transform: translate3d(-10px, -45px, 0) scale(1);
    }
  }

  .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' {
      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' or $input-skin-name == 'bootstrap4' {
      padding-right: 0;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -34px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap5') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -36px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      transform: translate3d(-10px, -41px, 0) scale(1);
    }
  }

  .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' {
      top: -9px;
    }
  }

  .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' {
      top: -9px;
    }
    @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 == 'highcontrast' or $input-skin-name == 'tailwind' {
      padding-right: 0;
      top: 14px;
    }
  }

  .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' {
      top: -7px;
    }
  }

  .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' {
      top: -8px;
    }
    @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 == 'highcontrast' or $input-skin-name == 'tailwind' {
      padding-right: 0;
      top: 17px;
    }
  }

  .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' {
      top: -7px;
    }
  }

  .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: -7px;
    }
    @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 == 'highcontrast' or $input-skin-name == 'tailwind' {
      padding-right: 0;
      top: 16px;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -10px;
    }
  }

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

  .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: 1.5;
    margin-bottom: $input-bigger-margin-bottom;
    margin-top: $input-bigger-margin-top;
    padding-top: $float-input-bigger-wrap-padding-top;
    position: relative;
    width: 100%;
  }

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

  .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: 1.4;
    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: 1.5;
  }

  .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,
  .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-no-float-label,
  .e-float-input.e-bigger.e-no-float-label,
  .e-bigger .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-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-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-no-float-label,
  .e-small .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: $zero-value;
  }

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

  .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: 100%;
  }

  .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 {
    text-indent: $input-text-indent;
  }

  .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-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.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 {
    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-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.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 {
    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: inherit;
    padding: $float-input-small-padding;
  }

  .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.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 {
    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: inherit;
    padding: $float-input-bigger-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 {
    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 {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5') {
      font-weight: $input-float-font-weight;
    }
    user-select: 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') {
      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: -34px;
      width: auto;
    }
  }

  .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: -34px;
      width: auto;
    }
  }
  
  .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: -40px;
      width: auto;
    }
  }

  .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: -40px;
      width: auto;
    }
  }

  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-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: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-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: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: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.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 {
    font-weight: normal;
  }

  .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-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: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-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: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: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,
  .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: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: 0;
    content: '';
    height: 2px;
    position: absolute;
    transition: .2s ease;
    width: 0;
  }

  .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: 50%;
  }

  .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: 50%;
  }

  .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: 50%;
  }

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

  .e-float-input.e-rtl,
  .e-float-input.e-control-wrapper.e-rtl {
    direction: rtl;
  }

  .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: 0;
    transform-origin: right top;
  }

  /* stylelint-disable selector-max-empty-lines */
  .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 {
    padding-right: $float-label-padding;
  }

  .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 {
    padding-right: $float-label-padding;
  }

  .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-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;
  }
  /* stylelint-enable selector-max-empty-lines */
  
  .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: $zero-value;
    border-bottom-right-radius: $input-box-border-radius;
    border-top-left-radius: $zero-value;
    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: $zero-value;
    border-top-left-radius: $input-box-border-radius;
    border-top-right-radius: $zero-value;
  }

  .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-corner.e-rtl input.e-input:only-child,
  .e-input-group.e-control-wrapper.e-corner.e-rtl input.e-input:only-child {
    border-radius: $input-box-border-radius;
  }

  .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: 100%;
  }

  .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-bigger .e-input,
  .e-input-group.e-control-wrapper input.e-input,
  .e-input-group.e-control-wrapper textarea.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 {
    margin-bottom: $zero-value;
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation-left;
    }
  }

  .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 == 'material' or $input-skin-name == 'Material3' {
      @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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation-width;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation-right;
    }
  }

  .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 == 'material' or $input-skin-name == 'Material3' {
      @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: 100%;
  }

  .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 != '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#{$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: inherit;
    margin-bottom: $input-small-bigger-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-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') {
      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' {
      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 {
    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' {
      margin-top: $float-input-child-small-bigger-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' {
      margin-top: $float-input-child-small-margin-top;
    }
  }

  .e-input-group .e-input-group-icon:last-child,
  .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-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-input-group-icon: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-input-group-icon: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 {
    margin-right: $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) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      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: 1px;
    }
  }

  .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.e-input-focus.e-corner,
  .e-input-group.e-control-wrapper.e-input-focus.e-corner {
    border-radius: $input-box-border-radius;
  }

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

  .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-float-custom-tag,
  .e-float-custom-tag.e-control-wrapper {
    display: inline-block;
  }

  .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-input-group .e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input-group-icon {
    @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 {
    @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 {
    @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 {
    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: -1px;
    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' {
      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: $zero-value;
  }

  
  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 {
    font-size: $input-font-size;
    font-style: $input-font-style;
  }

  
  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 {
    font-size: $input-font-size;
    font-style: $input-font-style;
  }

  
  .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 {
    font-size: $input-bigger-font-size;
    font-style: $input-font-style;
  }

  
  .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 {
    font-size: $input-bigger-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 {
    font-size: $input-small-font-size;
    font-style: $input-font-style;
  }

  
  .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 {
    font-size: $input-small-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 {
    font-size: $input-bigger-small-font-size;
    font-style: $input-font-style;
  }

  
  .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 {
    font-size: $input-bigger-small-font-size;
    font-style: $input-font-style;
  }

  
  input.e-input#{$css}:-moz-placeholder {
    font-style: $input-font-style;
    user-select: none;
  }

  
  textarea.e-input#{$css}:-moz-placeholder {
    font-style: $input-font-style;
    user-select: none;
  }

  
  .e-input-group input.e-input:-moz-placeholder {/* stylelint-disable-line selector-no-vendor-prefix */
    font-style: $input-font-style;
    user-select: none;
  }

  
  .e-input-group textarea.e-input:-moz-placeholder {/* stylelint-disable-line selector-no-vendor-prefix */
    font-style: $input-font-style;
    user-select: none;
  }

  
  .e-input-group.e-control-wrapper input.e-input:-moz-placeholder {/* stylelint-disable-line selector-no-vendor-prefix */
    font-style: $input-font-style;
    user-select: none;
  }

  
  .e-input-group.e-control-wrapper textarea.e-input:-moz-placeholder {/* stylelint-disable-line selector-no-vendor-prefix */
    font-style: $input-font-style;
    user-select: none;
  }

  
  input.e-input#{$css}:-moz-placeholder {
    font-style: $input-font-style;
    user-select: none;
  }

  
  .e-input-group input.e-input:-moz-placeholder {/* stylelint-disable-line selector-no-vendor-prefix */
    font-style: $input-font-style;
    user-select: none;
  }

  
  .e-input-group.e-control-wrapper input.e-input:-moz-placeholder {/* stylelint-disable-line selector-no-vendor-prefix */
    font-style: $input-font-style;
    user-select: none;
  }

  
  textarea.e-input#{$css}:-moz-placeholder {
    font-style: $input-font-style;
    user-select: none;
  }

  
  input.e-input#{$css}::-moz-placeholder {
    font-style: $input-font-style;
    user-select: none;
  }

  
  textarea.e-input#{$css}::-moz-placeholder {
    font-style: $input-font-style;
    user-select: none;
  }

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

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

  
  input.e-input#{$css}::-webkit-input-placeholder {
    font-style: $input-font-style;
    user-select: none;
  }

  
  textarea.e-input#{$css}::-webkit-input-placeholder {
    font-style: $input-font-style;
    user-select: none;
  }

  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' {
      @include input-sizing;
    }
  }

  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#{$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);
  }

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

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

  .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#{$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);
  }

  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#{$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 {
    text-indent: $input-small-text-indent;
  }

  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: 0;
  }

  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 {
    padding-left: $input-text-indent;
    text-indent: 0;
  }

  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: 0;
    padding-right: $input-text-indent;
    text-indent: 0;
  }

  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: 0;
  }

  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 {
    padding-left: $input-small-text-indent;
    text-indent: 0;
  }

  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: 0;
  }

  .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: 0;
    padding-right: $input-small-text-indent;
    text-indent: 0;
  }

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

  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 {
    padding-left: $input-bigger-text-indent;
    text-indent: 0;
  }

  .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: 0;
    padding-right: $input-bigger-text-indent;
    text-indent: 0;
  }

  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 {
    padding-left: $input-bigger-text-indent;
    text-indent: 0;
  }

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

  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 {
    padding-left: $input-small-bigger-text-indent;
    text-indent: 0;
  }

  .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: 0;
    padding-right: $input-small-bigger-text-indent;
    text-indent: 0;
  }

  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: 0;
  }

  .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' {
      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: 0;
  }
  // 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: 1;
    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: $zero-value;
    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-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: $zero-value;
  }

  .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-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: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 {
    display: none;
  }

  .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-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-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' {
      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' {
      padding-right: $input-clear-icon-padding-right;
      padding-top: $float-input-clear-icon-padding-top;
    }
  }

  .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' {
      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 {
      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' {
      padding-right: $input-clear-icon-bigger-padding-right;
      padding-top: $float-input-clear-icon-bigger-padding-top;
    }
  }

  .e-input-group.e-small .e-clear-icon,
  .e-input-group .e-clear-icon.e-small,
  .e-small.e-bigger .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-bigger .e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name != 'Material3' {
      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' {
      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' {
      padding-right: $input-clear-icon-small-bigger-padding-right;
      padding-top: $float-input-clear-icon-small-bigger-padding-top;
    }
  }

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

  // Left side icon with floating label issue

  .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: 100%;
    @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 == 'highcontrast' or $input-skin-name == 'tailwind' {
      display: flex;
      position: relative;
    }
  }

  .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 {
    @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-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 {
    @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-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-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: 0;
    @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 == 'highcontrast' or $input-skin-name == 'tailwind' {
      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' {
      display: flex;
      position: relative;
      width: 100%;
    }
  }

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

  .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' {
      margin-left: $zero-value;
      margin-right: $input-inner-wrap-margin-left;
    }
  }

  // Double border issue while adding floating input with class .e-input
  .e-float-input input.e-input,
  .e-float-input.e-bigger .e-input,
  .e-bigger .e-float-input .e-input,
  .e-float-input.e-control-wrapper 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: $zero-value;
  }

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

  // textarea floating label support.

  .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' {
      top: -22px;
      transform: translate3d(0, 6px, 0) scale(.92);
    }
    @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: 0;
      transform: translate3d(-10px, -37px, 0) scale(1);
    }
    @else if $input-skin-name == 'tailwind' {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -33px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap5') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -36px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      transform: translate3d(-10px, -41px, 0) scale(1);
    }
  }

  .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: -20px;
    }
    @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 == 'highcontrast' {
      top: 14px;
    }
    @else if $input-skin-name == 'tailwind' {
      top: 12px;
    }
  }

  .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' {
      top: -21px;
    }
    @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 == 'highcontrast' or $input-skin-name == 'tailwind' {
      top: 16px;
    }
  }

  .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' {
      top: -20px;
    }
    @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 == 'highcontrast' {
      top: 16px;
    }
    @else if $input-skin-name == 'tailwind' {
      top: 15px;
    }
  }

  // Floating label on the top of the textarea
  .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' {
      top: -11px;
    }
    @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 == 'highcontrast' {
      top: 15px;
    }
    @else if $input-skin-name == 'tailwind' {
      top: 13px;
    }
  }

  .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' {
      top: -11px;
    }
  }

  .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' {
      top: -8px;
    }
    @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 == 'highcontrast' {
      top: 18px;
    }
    @else if $input-skin-name == 'tailwind' {
      top: -11px;
    }
  }

  .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' {
      top: -11px;
    }
    @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 == 'highcontrast' or $input-skin-name == 'tailwind' {
      top: 15px;
    }
  }

  .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' {
      min-height: 28px;
    }
  }

  .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' {
      min-height: 14px;
    }
  }

  .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' {
      min-height: 26px;
    }
  }

  .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' {
      min-height: 22px;
    }
  }

  .e-input-group:hover:not(.e-disabled):not(.e-float-icon-left),
  .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left),
  .e-float-input:hover:not(.e-disabled):not(.e-float-icon-left),
  .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):not(.e-float-icon-left),
  .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' or $input-skin-name == 'Material3' {
      border-bottom-width: $input-group-border-width-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' {
      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' {
      bottom: -2px;
    }
  }

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

  .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: -9px;
      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' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
      font-weight: bold;
      padding-right: 0;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      transform: translate3d(-10px, -41px, 0) scale(1);
    }
    user-select: text;
  }

  .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: -8px;
      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: 0;
      top: 14px;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
      font-weight: bold;
      padding-right: 0;
      top: 14px;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -40px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      transform: translate3d(-10px, -45px, 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' {
      top: -8px;
      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;
      top: 17px;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
      font-weight: bold;
      padding-right: 0;
      top: 17px;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      top: 17px;
      transform: translate3d(-10px, -38px, 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' {
      top: -10px;
      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;
      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' {
      font-weight: bold;
      padding-right: 0;
      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: 0;
      top: 16px;
      transform: translate3d(-10px, -41px, 0) scale(1);
    }
    user-select: text;
  }

  .e-float-input textarea: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-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-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 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-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,
  .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' {
      @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' {
      top: -10px;
    }
    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' {
      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' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
      padding-right: 0;
      transform: translate3d(-10px, -37px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      padding-right: 0;
      transform: translate3d(-10px, -41px, 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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      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: normal;
    left: 0;
    overflow: hidden;
    padding-left: $float-label-padding;
    pointer-events: none;
    position: absolute;
    text-overflow: ellipsis;
    top: -11px;
    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: 100%;
  }

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

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

  
  .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-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' {
      top: -9px;
      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 == 'bootstrap5') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -40px, 0) scale(1);
    }
    @else if $input-skin-name == 'FluentUI' {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      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' {
      top: -8px;
      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;
      top: 17px;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' {
      font-weight: $input-float-font-weight;
      padding-right: 0;
      top: 17px;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if $input-skin-name == 'FluentUI' {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      top: 17px;
      transform: translate3d(-10px, -37px, 0) scale(1);
    }
    user-select: text;
  }

  .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' {
      top: -10px;
      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;
      top: 16px;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }

    @else if $input-skin-name == 'bootstrap' {
      font-weight: $input-float-font-weight;
      padding-right: 0;
      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: 0;
      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' {
      top: -8px;
      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: 0;
      top: 14px;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' {
      font-weight: $input-float-font-weight;
      padding-right: 0;
      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: 0;
      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' {
      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: 0;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' {
      padding-right: 0;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -35px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap5') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      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' {
      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: 0;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' {
      padding-right: 0;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -33px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap5') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -36px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      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-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' {
      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: 0;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' {
      padding-right: 0;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -31px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap5') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -35px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      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-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-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,
  .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-box-border-radius;
  }

  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: 1.5;
    min-height: $textarea-min-height;
    min-width: 0;
    padding: $textarea-padding;
    resize: vertical;
  }

  .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: 1.5;
    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: 1.5;
    min-height: $textarea-bigger-min-height;
    padding: $textarea-bigger-padding;
  }

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

  .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: 1.5;
    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: 1.5;
    min-height: $textarea-bigger-small-min-height;
    padding: $textarea-bigger-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' {
      min-height: $input-smaller-min-height;
    }
  }

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

  .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' {
      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' {
      min-height: $input-bigger-smaller-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: 100%;
    }
  }

  .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: 1px solid $outline-border-color;
      border-radius: 4px;
      border-width: 1px;
      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: $zero-value;
    }
  }

  .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) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-top-color: transparent;
    }
  }

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

  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 {
    @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-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' {
      box-sizing: border-box;
      margin: $outline-textarea-margin-top;
      padding: $zero-value $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: $zero-value;
    }
  }

  .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-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: 4px;
      margin-right: $zero-value;
    }
  }

  .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: 4px;
      margin-left: $zero-value;
    }
  }

  .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: 32px;
      margin: 4px;
    }
  }

  .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: 9px $outline-input-icon-margin-right 9px $zero-value;
    }
  }

  .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: 9px $zero-value 9px $outline-input-icon-margin-right;
    }
  }

  .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-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-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-input-group-icon + .e-input-group-icon: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-input-group-icon + .e-input-group-icon: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-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' {
      font-size: $outline-small-label-font-size;
    }
  }

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

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-small-bigger-label-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 {
    @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-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: 8px;
      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: 9px $outline-small-bigger-icon-margin-left 9px $zero-value;
    }
  }

  .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-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-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: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-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: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: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-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 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-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 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-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 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 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-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: $zero-value;
      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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      line-height: $outline-textarea-bigger-label-line-height;
    }
  }

  .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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      line-height: $outline-textarea-small-label-line-height;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      line-height: $outline-textarea-label-line-height;
    }
  }

  .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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      line-height: $outline-textarea-small-bigger-label-line-height;
    }
  }

  .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-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-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-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-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-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: 1px;
    }
  }

  .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 1px 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 1px 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-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-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-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-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-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-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-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-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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $outline-small-input-icon-margin-left;
      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 {
    @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-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-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-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-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-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-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 {
    @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-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-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' {
      top: $outline-float-label-top;
      transform: translate3d($zero-value, $zero-value, $zero-value) scale(1);
    }
  }

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

  // Float label font size configuration

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-float-label-font-size;
    }
  }

  .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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-small-outline-float-label-font-size;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $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-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-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 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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-outline-float-label-font-size;
    }
  }

  .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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-outline-float-label-font-size;
    }
  }

  .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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-small-outline-float-label-font-size;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-outline-float-label-font-size;
    }
  }

  .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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-outline-float-label-font-size;
    }
  }

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

  // Filled Input

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

  // Filled Input box sizing configuration

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
    }
  }

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

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
    }
  }

  .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  {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
    }
  }

  .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  {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
    }
  }

  .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' {
      box-sizing: border-box;
    }
  }

  .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' {
      box-sizing: border-box;
    }
  }

  // Filled inside input border configuration

  .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' {
      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]) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      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' {
      border-width: $zero-value;
    }
  }

  // Filled wrapper margin/padding configuration

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

  .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' {
      margin-top: $filled-wrapper-margin;
      padding: $bigger-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' {
      margin-top: $filled-wrapper-margin;
      padding: $small-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' {
      margin-top: $filled-wrapper-margin;
      padding: $bigger-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' {
      border: $input-group-full-border;
      border-radius: 4px 4px $zero-value $zero-value;
      border-width: $input-group-full-border-width;
      margin-top: $filled-wrapper-margin;
      padding: $filled-float-input-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' {
      margin-top: $filled-wrapper-margin;
      padding: $bigger-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' {
      margin-top: $filled-wrapper-margin;
      padding: $small-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' {
      margin-top: $filled-wrapper-margin;
      padding: $bigger-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' {
      padding: $filled-wrapper-rtl-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' {
      padding: $bigger-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' {
      padding: $small-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' {
      padding: $bigger-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' {
      padding: $filled-float-input-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' {
      padding: $bigger-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' {
      padding: $small-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' {
      padding: $bigger-small-filled-float-input-wrapper-rtl-padding;
    }
  }

  // Filled input padding configuration

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-input-padding;
    }
  }

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

  .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' {
      padding: $filled-input-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-bigger-input-padding;
    }
  }

  .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' {
      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' {
      padding-bottom: $filled-bigger-input-padding-bottom;
    }
  }

  .e-filled .e-input.e-small#{$css}:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-small-input-padding;
    }
  }

  .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' {
      padding: $filled-small-input-padding;
    }
  }

  .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' {
      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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-bigger-small-input-padding;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-bigger-small-input-padding;
    }
  }

  .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' {
      padding: $filled-bigger-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' {
      padding: $filled-float-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' {
      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' {
      padding: $filled-bigger-small-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' {
      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' {
      padding: $filled-input-rtl-padding;
      text-indent: 0;
    }
  }

  .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' {
      padding: $filled-float-input-rtl-padding;
      text-indent: 0;
    }
  }

  .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' {
      padding: $filled-small-input-rtl-padding;
      text-indent: 0;
    }
  }

  .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' {
      padding: $filled-small-float-input-rtl-padding;
      text-indent: 0;
    }
  }

  .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' {
      padding: $filled-bigger-input-rtl-padding;
      text-indent: 0;
    }
  }

  .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' {
      padding: $filled-bigger-float-input-rtl-padding;
      text-indent: 0;
    }
  }

  .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' {
      padding: $filled-bigger-small-input-rtl-padding;
      text-indent: 0;
    }
  }

  .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' {
      padding: $filled-bigger-small-float-input-rtl-padding;
      text-indent: 0;
    }
  }

  // Filled input font size configuration

  .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' {
      font-size: $filled-input-font-size;
    }
  }

  .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' {
      font-size: $bigger-filled-input-font-size;
    }
  }

  .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' {
      font-size: $bigger-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-filled-input-font-size;
    }
  }

  .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' {
      font-size: $small-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-small-filled-input-font-size;
    }
  }

  .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' {
      font-size: $bigger-small-filled-input-font-size;
    }
  }

  // Filled min-height configuration

  .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' {
      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' {
      min-height: $bigger-filled-input-min-height;
    }
  }

  .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' {
      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' {
      min-height: $small-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' {
      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' {
      min-height: $bigger-small-filled-input-min-height;
    }
  }

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

  .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' {
      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' {
      min-height: $filled-input-min-height;
    }
  }

  // Filled label configuration

  .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' {
      font-size: $filled-float-label-font-size;
      left: $filled-input-label-left;
      letter-spacing: .009375em;
      line-height: 1.15;
      padding-left: $float-label-padding;
      pointer-events: none;
      right: auto;
      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: 100%;
    }
  }

  .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' {
      font-size: $filled-float-label-font-size;
      padding-left: $float-label-padding;
      top: $filled-input-label-top;
      transform: none;
      width: 100%;
    }
  }

  .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' {
      font-size: $filled-float-label-font-size;
      top: $filled-input-label-top-after-floating;
      transform: translateY(-50%) scale(.75);
    }
  }

  .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' {
      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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      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 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' {
      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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-filled-float-label-font-size;
      top: $bigger-filled-input-label-top-after-floating;
    }
  }

  .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' {
      font-size: $bigger-filled-float-label-font-size;
      top: $bigger-filled-input-label-top-after-floating;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      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-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' {
      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 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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-filled-float-label-font-size;
      top: $small-filled-input-label-top-after-floating;
    }
  }

  .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' {
      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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      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-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' {
      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.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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-small-filled-float-label-font-size;
      top: $bigger-small-filled-input-label-top-after-floating;
    }
  }

  .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' {
      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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      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-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' {
      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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-filled-float-label-font-size;
      top: $bigger-filled-input-label-top;
    }
  }

  .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' {
      font-size: $bigger-filled-float-label-font-size;
      top: $bigger-filled-input-label-top;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-filled-float-label-font-size;
      top: $small-filled-input-label-top;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-filled-float-label-font-size;
      top: $small-filled-input-label-top;
    }
  }

  .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' {
      font-size: $small-filled-float-label-font-size;
      top: $small-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' {
      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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      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' {
      font-size: $bigger-small-filled-float-label-font-size;
      top: $bigger-small-filled-input-label-top;
    }
  }

  .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' {
      transform: translateY(-50%) scale(.75);
    }
  }

  // Filled textbox label padding config

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      left: $filled-input-label-left;
    }
  }

  .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' {
      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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      right: $filled-input-label-left;
    }
  }

  .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' {
      right: $filled-input-label-left;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      left: $bigger-filled-input-label-left;
    }
  }

  .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' {
      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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      right: $bigger-filled-input-label-left;
    }
  }

  .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' {
      right: $bigger-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.e-bigger label.e-float-text,
  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      left: $small-filled-input-label-left;
    }
  }

  .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' {
      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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      right: $small-filled-input-label-left;
    }
  }

  .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' {
      right: $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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      left: $bigger-small-filled-input-label-left;
    }
  }

  .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' {
      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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      right: $bigger-small-filled-input-label-left;
    }
  }

  .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' {
      right: $bigger-small-filled-input-label-left;
    }
  }

  // Filled input ripple effect configuration

  .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' {
      bottom: -1px;
      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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      right: $zero-value;
    }
  }

  .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' {
      bottom: -1px;
    }
  }

  // Filled input Icon margin configuration

  .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-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,
  .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' {
      font-size: $filled-input-icon-size;
      margin-bottom: $zero-value;
      margin-top: $zero-value;
      min-height: $filled-input-icon-min-height;
      min-width: $filled-input-icon-min-height;
      padding: $zero-value $zero-value $zero-value 8px;
    }
  }

  .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-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-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-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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $zero-value 8px $zero-value $zero-value;
    }
  }

  .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' {
      font-size: $small-filled-input-icon-size;
      min-height: $small-filled-input-icon-min-height;
      min-width: $small-filled-input-icon-min-height;
      padding: $zero-value $zero-value $zero-value 4px;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $zero-value 4px $zero-value $zero-value;
    }
  }

  .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' {
      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' {
      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: $zero-value $zero-value $zero-value 8px;
    }
  }

  .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-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-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-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-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' {
      padding: $zero-value 8px $zero-value $zero-value;
    }
  }

  .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-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,
  .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' {
      font-size: $filled-input-icon-size;
      margin-bottom: $zero-value;
      margin-top: $zero-value;
      padding: 8px;
      @if $input-skin-name == 'Material3' {
        padding: 0;
        margin: 9px 12px 9px 0;
      }
    }
  }

  .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' {
      font-size: $small-filled-input-icon-size;
      padding: $zero-value $zero-value $zero-value 4px;
    }
  }

  .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' {
      padding: $zero-value 4px $zero-value $zero-value;
    }
  }

  .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' {
      font-size: $bigger-filled-input-icon-size;
      padding: $zero-value $zero-value $zero-value 8px;
    }
  }

  .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' {
      font-size: $bigger-small-filled-input-icon-size;
      padding: $zero-value $zero-value $zero-value 8px;
    }
  }

  // Filled input clear icon configuration

  .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: $zero-value $zero-value $zero-value 8px;
    }
  }

  .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: $zero-value $zero-value $zero-value 8px;
    }
  }

  .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' {
      padding: $zero-value;
      margin: 2px;
      height: 32px;
    }
  }

  .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' {
      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: 8px;
    }
  }

  .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: $zero-value $zero-value $zero-value 8px;
    }
  }

  .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: $zero-value $zero-value $zero-value 8px;
    }
  }

  .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: $zero-value $zero-value $zero-value 4px;
    }
    @if $input-skin-name == 'Material3' {
      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: $zero-value;
    }
  }

  .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: $zero-value $zero-value $zero-value 4px;
    }
  }

  .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-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-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-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-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: $zero-value 8px $zero-value $zero-value;
    }
  }

  .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: $zero-value 4px $zero-value $zero-value;
    }
  }

  .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-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-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-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-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: $zero-value 8px $zero-value $zero-value;
    }
  }

  .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: $zero-value 4px $zero-value $zero-value;
    }
  }

  .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' {
      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' {
      font-size: $small-filled-input-clear-icon-size;
    }
  }

  .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' {
      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' {
      font-size: $bigger-small-filled-input-clear-icon-size;
    }
  }

  // Filled input - prefix icon configuration

  .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' {
      top: $filled-input-label-top-after-floating;
    }
  }

  .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' {
      top: $bigger-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' {
      top: $small-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' {
      top: $bigger-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' {
      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' {
      top: $filled-input-label-top;
    }
  }

  .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' {
      top: $bigger-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' {
      top: $small-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' {
      top: $bigger-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' {
      font-size: $filled-input-icon-size;
      margin: $zero-value;
      min-height: $filled-input-left-icon-min-height;
      min-width: $filled-input-left-icon-min-width;
      padding: $zero-value;
    }
  }

  .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' {
      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-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' {
      font-size: $small-filled-input-icon-size;
      margin: $zero-value;
      min-height: $small-filled-input-left-icon-min-height;
      min-width: $small-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' {
      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-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' {
      margin: $zero-value;
      min-height: $filled-input-left-icon-min-height;
      min-width: $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' {
      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-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' {
      margin: $zero-value;
      min-height: $small-filled-input-left-icon-min-height;
      min-width: $small-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' {
      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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      left: $zero-value;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      right: $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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      left: $zero-value;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      right: $zero-value;
    }
  }

  .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-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-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' {
      left: $zero-value;
    }
  }

  .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' {
      right: $zero-value;
    }
  }

  .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-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' {
      left: $zero-value;
    }
  }

  .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' {
      right: $zero-value;
    }
  }

  .e-filled.e-input-group .e-input-group-icon:last-child,
  .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-input-group-icon:last-child,
  .e-small .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-control-wrapper .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-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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-right: $zero-value;
    }
  }

  .e-filled.e-input-group.e-rtl .e-input-group-icon:last-child,
  .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-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-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-control-wrapper.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-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-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-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-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-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-control-wrapper .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-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,
  .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' {
      margin-left: $zero-value;
    }
  }

  .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-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' {
      margin-right: $zero-value;
    }
  }

  .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-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-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-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' {
      margin-left: $zero-value;
      margin-right: $zero-value;
    }
  }

  .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' {
      margin-right: $zero-value;
    }
  }

  .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' {
      margin-left: $zero-value;
      margin-right: $zero-value;
    }
  }

  // Filled input textarea padding / wrapper padding configuration

  .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' {
      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' {
      padding: $filled-float-textarea-padding;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      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' {
      padding: $filled-bigger-float-textarea-padding;
    }
  }

  .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' {
      padding: $filled-bigger-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      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' {
      padding: $filled-small-float-textarea-padding;
    }
  }

  .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' {
      padding: $filled-small-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      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' {
      padding: $filled-bigger-small-float-textarea-padding;
    }
  }

  .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' {
      padding: $filled-bigger-small-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' {
      padding: $filled-textarea-wrapper-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' {
      padding: $bigger-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' {
      padding: $small-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' {
      padding: $bigger-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' {
      padding: $filled-float-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' {
      padding: $bigger-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' {
      padding: $small-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' {
      padding: $bigger-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' {
      padding: $filled-textarea-padding;
      text-indent: 0;
    }
  }

  .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' {
      padding: $filled-float-textarea-padding;
      text-indent: 0;
    }
  }

  .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' {
      padding: $filled-small-textarea-padding;
      text-indent: 0;
    }
  }

  .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' {
      padding: $filled-small-float-textarea-padding;
      text-indent: 0;
    }
  }

  .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' {
      padding: $filled-bigger-textarea-padding;
      text-indent: 0;
    }
  }

  .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' {
      padding: $filled-bigger-float-textarea-padding;
      text-indent: 0;
    }
  }

  .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' {
      padding: $filled-bigger-small-textarea-padding;
      text-indent: 0;
    }
  }

  .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' {
      padding: $filled-bigger-small-float-textarea-padding;
      text-indent: 0;
    }
  }

  // Filled input - prefix icon configuration

  .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' {
      border: $input-group-full-border;
      border-width: $zero-value;
      margin-left: 8px;
    }
  }

  .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' {
      margin-left: $zero-value;
      margin-right: 8px;
    }
  }

  .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' {
      border: $input-group-full-border;
      border-width: $zero-value;
      margin-left: 8px;
    }
  }

  .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' {
      margin-left: 4px;
    }
  }

  .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' {
      margin-left: $zero-value;
      margin-right: 8px;
    }
  }

  .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' {
      margin-left: $zero-value;
      margin-right: 4px;
    }
  }

  .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' {
      border-bottom-width: $zero-value;
    }
  }

  .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' {
      @include input-group-animation;
      bottom: -1px;
    }
  }

  .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' {
      @include input-group-animation;
    }
  }

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

  .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' {
      @include input-group-animation-left;
    }
  }

  .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' {
      @include input-group-animation-width;
      bottom: -1px;
    }
  }

  .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' {
      @include input-group-animation-width;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation-right;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation-right;
    }
  }

  .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' {
      @include input-group-animation-right;
    }
  }

  .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' {
      width: $zero-value;
    }
  }

  .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' {
      border-bottom: $input-group-border;
    }
  }

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

  .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' {
      border: $input-group-full-border;
      border-width: $input-group-full-border-width;
    }
  }

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

  .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: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) {
    @if $input-skin-name == 'material' {
      border-bottom: transparent;
    }
  }

  .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 {
    @if $input-skin-name == 'material' {
      border-bottom: transparent;
    }
  }

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


/* 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;
  }

  .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') {
      margin: 0;
    }
  }

  .e-input-group.e-disabled .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-disabled .e-input-group-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' {
      -webkit-text-fill-color: $input-disable-font-color;
    }
    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;
    }

    @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' {
      color: $input-readonly-color;
    }
    @if $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' {
      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' {
      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' {
      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' {
      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-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: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,
  .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-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 {
    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 {
    @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' {
      background: $input-active-accent-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-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-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-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: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-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-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  {
    @if $input-skin-name == 'highcontrast' {
      color: $content-font-alt;
    }
  }

  .e-float-input textarea: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-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-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 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-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,
  .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-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' {
      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' {
      background: $input-warning-color;
    }
  }

  .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) {
    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' {
      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 {
    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 {
    @if $input-skin-name == 'highcontrast' {
      border-right-color: transparent;
    }
  }

  .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 {
    @if $input-skin-name == 'highcontrast' {
      border-left-color: transparent;
    }
  }

  .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 {
    @if $input-skin-name == 'highcontrast' {
      border-right-color: transparent;
    }
  }

  .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 {
    @if $input-skin-name == 'highcontrast' {
      border-left-color: transparent;
    }
  }

  .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' {
      border-left-color: transparent;
    }
  }

  .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 {
    @if $input-skin-name == 'highcontrast' {
      border-right-color: transparent;
    }
  }

  .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 {
    @if $input-skin-name == 'highcontrast' {
      border-left-color: transparent;
    }
  }

  .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 {
    @if $input-skin-name == 'highcontrast' {
      border-right-color: transparent;
    }
  }

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

  
  .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 {
    @if $input-skin-name == 'highcontrast' {
      border-right-color: transparent;
    }
  }

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

  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 {
    @include input-selection;
  }

  .e-float-input.e-small textarea::selection,
  .e-float-input textarea::selection {
    @include input-selection;
  }

  
  input.e-input#{$css}:-moz-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group input.e-input:-moz-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group input.e-input:-moz-placeholder,
  .e-input-group.e-control-wrapper input.e-input:-moz-placeholder {
    color: $input-placeholder;
  }

  
  input.e-input#{$css}:-moz-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group input.e-input:-moz-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group.e-control-wrapper input.e-input:-moz-placeholder {
    color: $input-placeholder;
  }

  
  textarea.e-input#{$css}:-moz-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group textarea.e-input:-moz-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group.e-control-wrapper textarea.e-input:-moz-placeholder {
    color: $input-placeholder;
  }

  
  input.e-input#{$css}::-moz-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group input.e-input::-moz-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group.e-control-wrapper input.e-input::-moz-placeholder {
    color: $input-placeholder;
  }

  
  textarea.e-input#{$css}::-moz-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group textarea.e-input::-moz-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group.e-control-wrapper textarea.e-input::-moz-placeholder {
    color: $input-placeholder;
  }

  
  input.e-input#{$css}:-ms-input-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group input.e-input:-ms-input-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group.e-control-wrapper input.e-input:-ms-input-placeholder {
    color: $input-placeholder;
  }

  
  textarea.e-input#{$css}:-ms-input-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group.e-control-wrapper textarea.e-input:-ms-input-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group textarea.e-input:-ms-input-placeholder {
    color: $input-placeholder;
  }

  
  input.e-input#{$css}::-webkit-input-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group.e-control-wrapper input.e-input::-webkit-input-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group input.e-input::-webkit-input-placeholder {
    color: $input-placeholder;
  }

  
  textarea.e-input#{$css}::-webkit-input-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group textarea.e-input::-webkit-input-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group.e-control-wrapper textarea.e-input::-webkit-input-placeholder {
    color: $input-placeholder;
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation-bg;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation-bg;
    }
  }

  .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  {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-success-animation-bg;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-warning-animation-bg;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-error-animation-bg;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @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 {
    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 {
    color: $input-icon-font-color;
    @if $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'FluentUI' {
      color: $input-group-hovered-color;
    }
  }

  .e-input-group.e-warning .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-warning .e-input-group-icon {
    color: $input-icon-font-color;
  }

  .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 {
    color: $input-icon-font-color;
    @if $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'FluentUI' {
      color: $input-group-hovered-color;
    }
  }

  .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-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 == '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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-icon-font-color;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-icon-font-color;
    }
  }

  .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' {
      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 {
    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 {
    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 == 'bootstrap5' 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;
    }
  }

  
  .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 == 'bootstrap5' 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 {
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' 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 == '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 {
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' 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) {
    @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' {
      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 == 'bootstrap5' 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-success):not(.e-warning).e-error,
  .e-input-group.e-control-wrapper.e-input-focus: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 == 'FluentUI' {
      -webkit-box-shadow: $input-error-border-shadow;
      box-shadow: $input-error-border-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 {
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' 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-error).e-warning,
  .e-input-group.e-control-wrapper.e-input-focus: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 == 'FluentUI' {
      -webkit-box-shadow: $input-warning-border-shadow;
      box-shadow: $input-warning-border-shadow;
    }
  }

  .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-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') {
      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') {
      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') {
      border-color: transparent;
    }
  }

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

  .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' {
      border-color: $input-group-full-border-color;
    }
    @if $input-skin-name == 'tailwind' {
      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 == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' 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 == 'FluentUI' {
      box-shadow: $input-group-focus-box-shadow;
    }
  }

  .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 == 'FluentUI' {
      -webkit-box-shadow: $input-error-border-shadow;
      box-shadow: $input-error-border-shadow;
    }
  }

  .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 == 'FluentUI' {
      -webkit-box-shadow: $input-success-border-shadow;
      box-shadow: $input-success-border-shadow;
    }
  }

  .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 == 'FluentUI' {
      -webkit-box-shadow: $input-warning-border-shadow;
      box-shadow: $input-warning-border-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-group.e-control-wrapper {
    border-bottom-color: $input-box-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' {
      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-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' {
      @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-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' {
      @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-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' {
      @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' {
      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-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;
  }

  // Double border issue while adding floating input with class .e-input
  .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.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:not(.e-error).e-input-focus input ~ 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 {
    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.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: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 {
    color: $float-label-font-color;
  }

  .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.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: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-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 {
    color: $float-label-font-color;
  }

  .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.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: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.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 {
    color: $float-label-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-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: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,
  .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: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: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-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 {
    color: $float-label-font-color;
  }

  .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,
  .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 {
    color: $float-label-font-color;
  }

  .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.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 {
    color: $float-label-font-color;
  }

  .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,
  .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-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-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: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.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 {
    color: $float-label-disbale-font-color;
  }

  .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-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: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-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 {
    color: $float-label-disbale-font-color;
  }

  .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-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: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-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: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-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: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.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 {
    color: $float-label-disbale-font-color;
  }

  .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-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: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-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: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-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: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,
  .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:not(.e-error) input:focus ~ label.e-float-text,
  .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-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-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: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: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-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: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.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:not(.e-error).e-input-focus input[readonly] ~ 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: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: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-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: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.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:not(.e-error) textarea[readonly]:focus ~ 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: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: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-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-small .e-float-input.e-control-wrapper:not(.e-error) textarea[readonly]:focus ~ label.e-float-text.e-label-top,
  .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:not(.e-error).e-input-focus textarea[readonly] ~ 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: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: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-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-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.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:not(.e-error) textarea: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: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-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:not(.e-error) input: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: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.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:not(.e-error) textarea: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: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.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:not(.e-error).e-input-focus input ~ 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: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-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: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: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.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' {
      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;
    }
  }

  .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 != 'highcontrast' and $input-skin-name != 'tailwind' and $input-skin-name != 'FluentUI' {
      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):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: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' {
      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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      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):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-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: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-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-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-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-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 {
    color: $float-label-font-color;
  }

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

  // Outline textbox

  .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-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) {
    @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) {
    @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-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-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-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-success textarea: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-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-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-success input: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-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-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-success textarea: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-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-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-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-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-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-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-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-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,
  .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-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-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-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-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-error textarea: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-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-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-error input: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-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-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-error textarea: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-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-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-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-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-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-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-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-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-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-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-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-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-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-warning textarea: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-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-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-warning input: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-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-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-warning textarea: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-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-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-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-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-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-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-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-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,
  .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-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-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-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-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-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: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.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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $outline-float-label-disbale-font-color;
    }
  }

  .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-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: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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $outline-float-label-disbale-font-color;
    }
  }

  .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-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: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-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: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-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: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.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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $outline-float-label-disbale-font-color;
    }
  }

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

  // Outline input clear icon

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

  // Filled input background color changes

  .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' {
      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' {
      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' {
      background: $filled-input-overlay-activated-bg-color;
      transition: $background-color-transition;
    }
  }

  // Filled input border color changes

  .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) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $filled-input-hover-border-color;
    }
  }

  .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) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $filled-input-hover-border-color;
    }
  }

  .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) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      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) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-group-full-border-color;
    }
  }

  .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' {
      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' {
      @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' {
      @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' {
      @include input-state-color ($input-error-color);
    }
  }

  // Filled input floating label color configuration

  .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-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: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.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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      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' {
      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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      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.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:not(.e-error).e-input-focus input ~ 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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      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: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.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:not(.e-error).e-input-focus input ~ 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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  .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.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: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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  .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.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: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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  .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.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: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.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' {
      color: $filled-input-float-label-color;
    }
  }

  .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-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: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.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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  .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) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  .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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  .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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  .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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  .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,
  .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' {
      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-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: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.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:not(.e-error) input[readonly]:focus ~ label.e-label-top.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: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: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-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: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.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: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).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: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: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-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: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.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:not(.e-error) textarea[readonly]:focus ~ 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: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: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-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-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.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: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).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: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: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-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-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.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:not(.e-error) textarea:focus ~ label.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: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-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:not(.e-error) input: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: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.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:not(.e-error) textarea: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: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.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:not(.e-error).e-input-focus input ~ 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: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-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: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: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.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' {
      color: $input-active-accent-color;
    }
  }

  .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: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-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-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-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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  .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: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-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-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-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,
  .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' {
      color: $filled-input-float-label-color;
    }
  }

  
  input.e-filled.e-input#{$css}:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled input.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled input.e-input:-moz-placeholder,
  .e-input-group.e-filled.e-control-wrapper input.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  input.e-filled.e-input#{$css}:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled input.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled.e-control-wrapper input.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  textarea.e-filled.e-input#{$css}:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled textarea.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled.e-control-wrapper textarea.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  input.e-filled.e-input#{$css}::-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled input.e-input::-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled.e-control-wrapper input.e-input::-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  textarea.e-filled.e-input#{$css}::-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled textarea.e-input::-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled.e-control-wrapper textarea.e-input::-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  input.e-filled.e-input#{$css}:-ms-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled input.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled.e-control-wrapper input.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  textarea.e-filled.e-input#{$css}:-ms-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled.e-control-wrapper textarea.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group textarea.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' {
      color: $input-placeholder-color;
    }
  }

  
  .e-input-group textarea.e-input:-moz-placeholder {
    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' {
      color: $input-placeholder-color;
    }
  }

  
  .e-input-group .e-input:-ms-input-placeholder {
    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' {
      color: $input-placeholder-color;
    }
  }

  
  input.e-input#{$css}::-webkit-input-placeholder {
    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' {
      color: $input-placeholder-color;
    }
  }

  
  .e-input-group.e-filled textarea.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  input.e-filled.e-input#{$css}::-webkit-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled.e-control-wrapper input.e-input::-webkit-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled input.e-input::-webkit-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  textarea.e-filled.e-input#{$css}::-webkit-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled textarea.e-input::-webkit-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled.e-control-wrapper textarea.e-input::-webkit-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  // Filled input clear icon states

  .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' {
      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' {
      color: $filled-input-clear-icon-active-color;
    }
  }

  // Filled input disabled configuration

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-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' {
      //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' {
      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' {
      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: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' {
      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-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: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.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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  .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-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: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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  .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-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: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-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: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-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: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.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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  .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-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: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-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: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-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: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,
  .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' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  input.e-filled.e-disabled.e-input#{$css}:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled input.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  input.e-filled.e-disabled.e-input#{$css}:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled input.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  textarea.e-filled.e-disabled.e-input#{$css}:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled textarea.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled.e-control-wrapper textarea.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  input.e-filled.e-disabled.e-input#{$css}::-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled input.e-input::-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input::-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  textarea.e-filled.e-disabled.e-input#{$css}::-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled textarea.e-input::-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled.e-control-wrapper textarea.e-input::-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  input.e-filled.e-disabled.e-input#{$css}:-ms-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled input.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  textarea.e-filled.e-disabled.e-input#{$css}:-ms-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled.e-control-wrapper textarea.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled textarea.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  input.e-filled.e-disabled.e-input#{$css}::-webkit-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input::-webkit-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled input.e-input::-webkit-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  textarea.e-filled.e-disabled.e-input#{$css}::-webkit-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled textarea.e-input::-webkit-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled.e-control-wrapper textarea.e-input::-webkit-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  // Filled input ripple action

  .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' {
      @include input-group-animation-bg;
    }
  }

  .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' {
      @include input-group-animation-bg;
    }
  }

  .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  {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-success-animation-bg;
    }
  }

  .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' {
      @include input-group-success-animation-bg;
    }
  }

  .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' {
      @include input-group-warning-animation-bg;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-error-animation-bg;
    }
  }

  .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' {
      @include input-group-error-animation-bg;
    }
  }

  .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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $filled-input-hover-border-color;
    }
  }

  .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' {
      border-color: $filled-input-hover-border-color;
    }
  }

  .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' {
      border-color: $filled-input-hover-border-color;
    }
  }

  .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-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-success.e-input-focus input ~ 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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .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-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-warning.e-input-focus input ~ 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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .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-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-success.e-input-focus input ~ 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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .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-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-warning.e-input-focus input ~ 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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .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-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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .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-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-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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .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-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-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-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' {
      color: $input-success-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-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-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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .e-filled.e-float-input.e-success input:focus ~ label.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-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-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-success textarea: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-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-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-success input: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-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-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-success textarea: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-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-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-success.e-input-focus input ~ 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-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-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-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-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-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' {
      color: $input-success-color;
    }
  }

  .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-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-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-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-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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .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-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-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-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-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,
  .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' {
      color: $input-success-color;
    }
  }

  .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-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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .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-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-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-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' {
      color: $input-warning-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-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-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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .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-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-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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .e-filled.e-float-input.e-warning input:focus ~ label.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-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-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-warning textarea: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-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-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-warning input: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-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-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-warning textarea: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-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-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-warning.e-input-focus input ~ 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-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-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-warning.e-input-focus inputs ~ 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-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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .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-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-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-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-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-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 {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .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-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-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-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-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,
  .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' {
      color: $input-warning-color;
    }
  }
}


@include export-module('input-bootstrap5-icons') {
  .e-float-input,
  .e-float-input.e-control-wrapper {
    .e-clear-icon::before {
      content: '\e7e7';
      font-family: 'e-icons';
    }
  }

  .e-input-group,
  .e-input-group.e-control-wrapper {
    .e-clear-icon::before {
      content: '\e7e7';
      font-family: 'e-icons';
    }
  }
}

/* stylelint-disable-line no-empty-source */

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

  /*! popup layout */
  .e-popup {
    height: auto;
    position: absolute;
    width: auto;
    z-index: 1000;
  }

  .e-popup.e-popup-open {
    display: block;
  }

  .e-popup.e-popup-close {
    display: none;
  }
}

$theme: 'Bootstrap5';

//Layout Variables Start
$spin-padding: 10px;
$spin-label-margin-top: 10px;
$spin-label-font-size: $text-sm;
$spin-label-font-family: $font-family;
$spin-boot4-stroke-width: 4;
$spin-fabric-stroke-width: 1.5;
$spin-boot5-stroke-width: 4;

//Layout Variables End

//Theme based other styles start
$spin-label-color: $primary;
$spin-overlay-background: $overlay-bg-color;
$spin-overlay-stroke-color: $white;
$spin-overlay-font-color: $white;

$spin-material-stroke-color: $primary;
$spin-boot4-stroke-color: $primary;
$spin-fabric-stroke-color: $primary-light;
$spin-boot5-stroke-color: $primary;
$spin-fabric-arc-color: $primary;
$spin-bootstrap-stroke-color: $primary;
$spin-tailwind-stroke-width: 4.5;
$spin-tailwind-arc-color: $primary;
$spin-tailwind-stroke-color: $primary-light;

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

@mixin boot5-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);
  }
}

//Theme based other styles end

@include export-module('spinner-layout') {
  .e-spinner-pane {
    align-items: center;
    display: inline-flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    user-select: none;
    vertical-align: middle;
    width: 100%;
    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: 0;
        padding-left: $spin-padding;
        transform: translateX(0%) translateY(-50%);
      }
    }

    &.e-spin-right {
      .e-spinner-inner {
        -webkit-transform: translateX(-100%) translateY(-50%);
        left: 100%;
        padding-right: $spin-padding;
        transform: translateX(-100%) translateY(-50%);
      }
    }

    &.e-spin-center {
      .e-spinner-inner {
        -webkit-transform: translateX(-50%) translateY(-50%);
        left: 50%;
        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: 50%;
      margin: 0;
      position: absolute;
      text-align: center;
      top: 50%;
      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 {
        @include mat-spinner-rotate;
        display: block;
        margin: 0 auto;

        .e-path-circle {
          fill: none;
          stroke-linecap: square;
        }
      }

      .e-spin-bootstrap4 {
        @include boot4-spinner-rotate;
        border-radius: 50%;
        display: block;
        margin: 0 auto;

        .e-path-circle {
          fill: none;
          stroke-linecap: square;
          stroke-width: $spin-boot4-stroke-width;
        }
      }

      .e-spin-fluent,
      .e-spin-fabric {
        @include fb-spinner-rotate;
        display: block;
        margin: 0 auto;
        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: 0 auto;
        overflow: visible;

        .e-path-arc,
        .e-path-circle {
          fill: none;
          stroke-width: $spin-tailwind-stroke-width;
        }
      }

      .e-spin-bootstrap5 {
        @include boot5-spinner-rotate;
        border-radius: 50%;
        display: block;
        margin: 0 auto;

        .e-path-circle {
          fill: none;
          stroke-linecap: square;
          stroke-width: $spin-boot5-stroke-width;
        }
      }

      .e-spin-bootstrap {
        display: block;
        margin: 0 auto;
      }

      .e-spin-high-contrast {
        @include fb-spinner-rotate;
        display: block;
        margin: 0 auto;
        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-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 {
        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 {
        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;
      }
    }
  }
}

$ddl-list-line-height: 30px !default;
$ddl-header-font-weight: $font-weight-medium !default;
$ddl-last-child-bottom-border: 0 !default;
$ddl-default-font-family: $font-family !default;
$ddl-line-height: 32px !default;
$ddl-list-border-size: 0 !default;
$ddl-list-bottom-border: $ddl-list-border-size !default;

$ddl-list-font-size: $text-sm !default;
$ddl-list-font-family: $font-family !default;
$ddl-list-focus-border: 1px solid $border-focus !default;
$ddl-group-list-padding-left: 12px !default;
$ddl-group-list-small-padding-left: 8px !default;
$ddl-group-list-bigger-padding-left: 16px !default;
$ddl-group-list-bigger-small-padding-left: 14px !default;
$ddl-list-header-padding-left: 12px !default;
$ddl-list-header-small-padding-left: 8px !default;
$ddl-list-header-bigger-small-padding-left: 14px !default;
$ddl-list-header-bigger-padding-left: 16px !default;
$ddl-list-text-indent: 12px !default;
$ddl-list-rtl-padding-right: 0 !default;
$ddl-list-padding-right: 16px !default;
$ddl-list-rtl-padding-left: 16px !default;
$ddl-multi-column-border-width: 0 0 1px 0 !default;
$ddl-bigger-list-header-font-size: $text-base !default;
$ddl-group-list-font-size: $text-sm !default;
$ddl-list-header-font-size: $text-sm !default;

// Small Size

$ddl-small-icon-font-size: $font-icon-14 !default;
$ddl-small-line-height: 26px !default;
$ddl-small-list-text-indent: 8px !default;
$ddl-small-list-header-font-size: $text-xxs !default;

// Touch Small

$ddl-bigger-small-icon-font-size: $font-icon-18 !default;
$ddl-bigger-small-line-height: 30px !default;
$ddl-bigger-small-list-text-indent: 16px !default;
$ddl-bigger-text-indent: 16px !default;
$ddl-bigger-small-list-header-font-size: $text-xs !default;
$ddl-group-list-item-text-intent: 0 !default;

$ddl-list-border-color: $border-light !default;
$ddl-list-gradient-color: $border-light !default;
$mention-gradient-color: $white !default;
$mention-list-box-shadow-color: rgba(0, 0, 0, .21) !default;
$mention-chip-bg-color: $content-bg-color-alt2 !default;
$mention-chip-border-radius: 2px !default;
$mention-chip-border: none !default;
$ddl-list-bg-color: $flyout-bg-color !default;
$ddl-list-header-bg-color: $transparent !default;
$ddl-list-tap-color: transparent !default;
$ddl-list-header-border-color: $border-light !default;
$ddl-nodata-font-color: $content-text-color !default;
$ddl-list-default-font-color: $content-text-color !default;
$ddl-list-active-border-color: $content-bg-color !default;
$mention-popup-bg-color: $content-bg-color !default;
$ddl-list-active-font-color: $content-text-color-selected !default;
$mention-active-font-color: $primary !default;
$ddl-list-active-bg-color: $content-bg-color-selected !default;
$ddl-list-hover-border-color: $content-bg-color !default;
$ddl-list-hover-bg-color: $flyout-bg-color-hover !default;
$ddl-list-hover-font-color: $flyout-text-color-hover !default;
$ddl-list-header-font-color: $content-text-color-alt3 !default;
$ddl-default-header-font-color: $content-text-color-alt3 !default;
$ddl-list-focus-color: $flyout-text-color-hover !default;
$ddl-multi-column-border-color: $flyout-border !default;

// Small Size color
$ddl-small-list-font-color: $content-text-color !default;

// Touch Small color
$ddl-bigger-small-list-font-color: $content-text-color !default;

@include export-module('dropdownbase-bootstrap5') {

  .e-dropdownbase .e-list-group-item,
  .e-fixed-head {
    font-size: $text-xs;
  }

  .e-small .e-dropdownbase .e-list-group-item,
  .e-small .e-fixed-head,
  .e-small.e-dropdownbase .e-list-group-item,
  .e-small.e-fixed-head {
    font-size: $text-xxs;
  }

  .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 {
    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 {
    font-size: $text-xs;
  }

  .e-dropdownbase .e-list-item .e-list-icon {
    padding: 0 8px 0 0;
  }

  .e-bigger .e-dropdownbase .e-list-item .e-list-icon,
  .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
    padding: 0 12px 0 0;
  }

  .e-small .e-dropdownbase .e-list-item .e-list-icon {
    padding: 0 6px 0 0;
  }
}

@include export-module('dropdownbase-layout') {
  .e-bigger .e-dropdownbase,
  .e-dropdownbase.e-bigger {
    min-height: 45px;
    @at-root {
      #{if(&, '&', '*')} .e-list-item {
        line-height: $ddl-line-height;
        text-indent: $ddl-bigger-text-indent;
      }

      #{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: 20px;
      }
    }
  }

  .e-dropdownbase {
    display: block;
    height: 100%;
    min-height: 36px;
    position: relative;
    width: 100%;
    @at-root {
      #{if(&, '&', '*')} .e-list-parent {
        margin: 0;
        padding: 0;
      }

      #{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: 100%;
      }

      #{if(&, '&', '*')} .e-list-item .e-list-icon {
        font-size: 16px;
        vertical-align: middle;
      }

      #{if(&, '&', '*')} .e-fixed-head {
        position: absolute;
        top: 0;
        .e-rtl #{if(&, '&', '*')} {
          left: 33px;
        }
      }
    }
  }

  .e-dropdownbase.e-content {
    overflow: auto;
    position: relative;
  }

  #{&}.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: 14px;
    padding: 14px 16px;
    text-align: center;
  }

  .e-mention.e-popup {
    background: $mention-popup-bg-color;
    border: 0;
    box-shadow: 0 2px 3px 1px $mention-list-box-shadow-color;
    margin-top: 2px;
    position: absolute;
  }

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

  .e-mention .e-mention-chip::selection {
    color: $mention-gradient-color;
    background: $mention-active-font-color;
  }

  .e-mention.e-editable-element {
    border: 2px solid $ddl-list-border-color;
    height: auto;
    min-height: 120px;
    width: 100%;
  }

  .e-form-mirror-div {
    white-space: pre-wrap;
  }

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

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

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

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

  .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: 100%;
    @if $skin-name == 'bootstrap5' or $skin-name == 'tailwind' {
      font-weight: 500;
    }
  }

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

  // Rtl small size

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

  // Rtl bigger size

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

  // Rtl bigger small size

  .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-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(&, '&', '*')} .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;
        @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' {
          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;
      }

      #{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' {
          background-color: $ddl-list-hover-bg-color;
        }
      }

      #{if(&, '&', '*')} .e-list-item.e-active:last-child {
        @if ($skin-name == 'bootstrap5') {
          border-radius: 2px;
        }
      }
    }
  }

  .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-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: 16px;
    text-indent: 10px;
    text-overflow: ellipsis;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open th {
    line-height: 36px;
    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: 0;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open#{&}.e-scroller .e-ddl-header {
    padding-right: 16px;
  }

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

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

  // small size
  .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;
      }
    }
  }

  // Bigger small 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-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-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 == '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;
  }
}

//default
//enddefault
// Avatar Base
$avatar-base-border-radius: 2px !default;
$avatar-base-background-color: $content-bg-color-alt3 !default;
$avatar-base-font-size: $text-sm !default;
$avatar-base-width: 40px !default;
$avatar-base-height: 40px !default;
$avatar-base-line-height: 22px !default;
$avatar-base-text-color: $icon-color !default;
$avatar-base-font-weight: $font-weight-medium !default;
$avatar-base-img-height: 100% !default;

// Circle Avatar
$avatar-circle-border-radius: 50% !default;

// Avatar size
$avatar-xsmall-font-size: $text-xxs !default;
$avatar-small-font-size: $text-xs !default;
$avatar-large-font-size: $text-lg !default;
$avatar-xlarge-font-size: $text-xl !default;
$avatar-large-border-radius: 4px !default;

// Avatar Line Height
$avatar-base-xsmall-line-height: 16px !default;
$avatar-base-small-line-height: 18px !default;
$avatar-base-large-line-height: 28px !default;
$avatar-base-xlarge-line-height: 28px !default;

@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: $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 == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
      line-height: $avatar-base-line-height;
    }

    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 == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
        height: 24px;
        line-height: $avatar-base-xsmall-line-height;
        width: 24px;
      }
    }

    &.e-avatar-small {
      font-size: $avatar-small-font-size;
      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
        height: 32px;
        line-height: $avatar-base-small-line-height;
        width: 32px;
      }
    }

    &.e-avatar-large {
      font-size: $avatar-large-font-size;
      @if ($skin-name == 'bootstrap5') {
        border-radius: $avatar-large-border-radius;
      }
      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
        height: 48px;
        line-height: $avatar-base-large-line-height;
        width: 48px;
      }
    }

    &.e-avatar-xlarge {
      font-size: $avatar-xlarge-font-size;
      @if ($skin-name == 'bootstrap5') {
        border-radius: $avatar-large-border-radius;
      }
      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark'or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
        height: 56px;
        line-height: $avatar-base-xlarge-line-height;
        width: 56px;
      }
    }
  }
}


/* stylelint-disable-line no-empty-source */

// layout variable
$badge-theme : $skin-name !default;

// Base Badge
$badge-base-border-radius: 2px !default;
$badge-base-font-size: $text-xs !default;
$badge-base-line-height: $leading-none !default;
$badge-base-height: 20px !default;
$badge-base-font-weight: $font-weight-medium !default;
$badge-base-text-indent: 0 !default;
$badge-base-text-color: $content-text-color-alt1 !default;
$badge-base-background-color: $content-bg-color-alt1 !default;

// Pill Badge
$badge-pill-border-radius: 10px !default;
$badge-pill-padding: 3px 11px 3px 11px !default;

// Notification Badge
$badge-notification-top: -10px !default;
$badge-notification-left: 100% !default;
$badge-notification-font-size: $text-xs !default;
$badge-notification-border-radius: 10px !default;
$badge-notification-min-width: 32px !default;
$badge-notification-height: 18px !default;

// Circle Badge
$badge-circle-width: 20px !default;
$badge-circle-height: 20px !default;
$badge-circle-border-radius: 10px !default;
$badge-circle-padding: 4px 3px 4px 3px !default;
$badge-circle-min-width: 0 !default;
$badge-circle-ghost-line-height: $leading-none !default;
$badge-circle-ghost-padding: 3px !default;

// Overlap Badge
$badge-overlap-top: -10px !default;
$badge-overlap-transform-left: translateX(-50%) !default;

// Button Badge
$badge-button-line-height: $leading-none !default;
$badge-button-circle-width: 18px !default;
$badge-button-circle-height: 18px !default;
$badge-button-circle-line-height: $leading-none !default;
$badge-ghost-circle-line-height: $leading-none !default;
$badge-button-top: -2px !default;

// Dot Badge
$badge-dot-top: -3px !default;
$badge-dot-width: 10px !default;
$badge-dot-height: 10px !default;
$badge-dot-line-height: $leading-none !default;
$badge-dot-border-radius: 10px !default;
$badge-dot-padding: 0 !default;
$badge-dot-min-width: 0 !default;
$badge-dot-left: 100% !default;
$badge-dot-box-shadow: none !default;

$badge-padding: 3px 4px !default;
$badge-notification-line-height: $leading-none !default;
$badge-notification-ghost-line-height: $leading-none !default;
$badge-notification-padding: 3px 10px !default;
$badge-circle-line-height: $leading-none !default;
$badge-ghost-line-height: $leading-none !default;
$badge-ghost-padding: 3px 10px 3px 10px !default;

//bigger styles
// Base Badge
$badge-touch-base-border-radius: 4px !default;
$badge-touch-base-font-size: $text-sm !default;
$badge-touch-base-line-height: $leading-none !default;
$badge-touch-base-height: 22px !default;
$badge-touch-base-font-weight: $font-weight-medium !default;
$badge-touch-padding: 4px 3px !default;

// Pill Badge
$badge-touch-pill-padding: 3px 8px !default;

//ghost badge
$badge-touch-ghost-padding: 3px !default;
$badge-touch-ghost-notification-padding: 3px 10px !default;
$badge-touch-ghost-circle-padding: 3px !default;

// Notification Badge
$badge-touch-notification-min-width: 30px !default;

// Circle Badge
$badge-touch-circle-width: 22px !default;
$badge-touch-circle-padding: 4px 3px !default;

// Dot Badge
$badge-touch-dot-width: 12px !default;
$badge-touch-dot-height: 12px !default;

// theme variable
$badge-primary-bg-color: $primary !default;
$badge-secondary-bg-color: $content-bg-color-alt1 !default;
$badge-success-bg-color: $success-light !default;
$badge-danger-bg-color: $danger-light !default;
$badge-warning-bg-color: $warning-light !default;
$badge-info-bg-color: $info-light !default;
$badge-light-bg-color: $content-bg-color-alt2 !default;
$badge-dark-bg-color: $content-text-color-alt2 !default;

$badge-primary-font-color: $primary-text-color !default;
$badge-secondary-font-color: $content-text-color-alt1 !default;
$badge-success-font-color: $success !default;
$badge-danger-font-color: $danger !default;
$badge-info-font-color: $info-dark !default;
$badge-light-font-color: $content-text-color-alt1 !default;
$badge-dark-font-color: $secondary-text-color !default;
$badge-warning-font-color: $warning-dark !default;

@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;
    line-height: $badge-base-line-height;
    @if ($badge-theme == 'tailwind' or $badge-theme == 'FluentUI' or $badge-theme == 'tailwind-dark' or $badge-theme == 'bootstrap5') {
      height: $badge-base-height;
    }
    overflow: hidden;
    padding: $badge-padding;
    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 {
      border-radius: $badge-notification-border-radius;
      font-size: $badge-notification-font-size;
      height: $badge-notification-height;
      left: $badge-notification-left;
      line-height: $badge-notification-line-height;
      min-width: $badge-notification-min-width;
      padding: $badge-notification-padding;
      position: absolute;
      top: $badge-notification-top;
      width: auto;

      &.e-badge-ghost {
        line-height: $badge-notification-ghost-line-height;
      }
    }

    &.e-badge-circle {
      border-radius: $badge-circle-border-radius;
      height: $badge-circle-height;
      line-height: $badge-circle-line-height;
      min-width: $badge-circle-min-width;
      padding: $badge-circle-padding;
      width: $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 {
      position: absolute;
      top: $badge-overlap-top;
      transform: $badge-overlap-transform-left;
    }

    &.e-badge-dot {
      border-radius: $badge-dot-border-radius;
      box-shadow: $badge-dot-box-shadow;
      height: $badge-dot-height;
      left: $badge-dot-left;
      line-height: $badge-dot-line-height;
      margin: 0;
      min-width: $badge-dot-min-width;
      overflow: visible;
      padding: $badge-dot-padding;
      position: absolute;
      top: $badge-dot-top;
      width: $badge-dot-width;
    }

    &.e-badge-bottom {
      &.e-badge-dot {
        bottom: 3px;
        position: absolute;
        top: auto;
      }

      &.e-badge-notification {
        bottom: -3px;
        position: absolute;
        top: auto;
      }
    }

    @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: .9;
        }
        position: relative;
        top: $badge-button-top;

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

  .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') {
      border-radius: $badge-touch-base-border-radius;
      font-size: $badge-touch-base-font-size;
      font-weight: $badge-touch-base-font-weight;
      height: $badge-touch-base-height;
      line-height: $badge-touch-base-line-height;
      padding: $badge-touch-padding;

      &.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 {
        border-radius: $badge-pill-border-radius;
        min-width: $badge-touch-notification-min-width;
        padding: $badge-touch-pill-padding;
      }

      &.e-badge-circle {
        border-radius: $badge-circle-border-radius;
        min-width: $badge-circle-min-width;
        padding: $badge-touch-circle-padding;
        width: $badge-touch-circle-width;
      }

      &.e-badge-dot {
        border-radius: $badge-dot-border-radius;
        height: $badge-touch-dot-height;
        width: $badge-touch-dot-width;
      }
    }
  }
}


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

    &.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 == 'tailwind-dark' or $badge-theme == 'bootstrap5' or $badge-theme == 'Material3') {
        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 == 'tailwind-dark' or $badge-theme == 'bootstrap5' or $badge-theme == 'Material3' ) {
        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 == 'tailwind-dark' or $badge-theme == 'bootstrap5' or $badge-theme == 'Material3') {
        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;
    }

    &.e-badge-primary[href]:not(.e-badge-ghost) {
      &:hover {
        @if $badge-theme == 'Material3' {
          text-decoration: underline;
        }
        @else {
          background-color: darken($color: $badge-primary-bg-color, $amount: 10%);
        }
      }
    }

    &.e-badge-secondary[href]:not(.e-badge-ghost) {
      &:hover {
        @if $badge-theme == 'Material3' {
          text-decoration: underline;
        }
        @else {
          background-color: darken($color: $badge-secondary-bg-color, $amount: 10%);
        }
      }
    }

    &.e-badge-success[href]:not(.e-badge-ghost) {
      &:hover {
        @if $badge-theme == 'Material3' {
          text-decoration: underline;
        }
        @else {
          background-color: darken($color: $badge-success-bg-color, $amount: 10%);
        }
      }
    }

    &.e-badge-danger[href]:not(.e-badge-ghost) {
      &:hover {
        @if $badge-theme == 'Material3' {
          text-decoration: underline;
        }
        @else {
          background-color: darken($color: $badge-danger-bg-color, $amount: 10%);
        }
      }
    }

    &.e-badge-warning[href]:not(.e-badge-ghost) {
      &:hover {
        @if $badge-theme == 'Material3' {
          text-decoration: underline;
        }
        @else {
          background-color: darken($color: $badge-warning-bg-color, $amount: 10%);
        }
      }
    }

    &.e-badge-info[href]:not(.e-badge-ghost) {
      &:hover {
        @if $badge-theme == 'Material3' {
          text-decoration: underline;
        }
        @else {
          background-color: darken($color: $badge-info-bg-color, $amount: 10%);
        }
      }
    }

    &.e-badge-light[href]:not(.e-badge-ghost) {
      &:hover {
        @if $badge-theme == 'Material3' {
          text-decoration: underline;
        }
        @else {
          background-color: darken($color: $badge-light-bg-color, $amount: 10%);
        }
      }
    }

    &.e-badge-dark[href]:not(.e-badge-ghost) {
      &:hover {
        @if $badge-theme == 'Material3' {
          text-decoration: underline;
        }
        @else {
          background-color: darken($color: $badge-dark-bg-color, $amount: 10%);
        }
      }
    }

    &.e-badge-primary[href].e-badge-ghost {
      &:hover {
        @if $badge-theme != 'Material3' {
          border-color: darken($color: $badge-primary-bg-color, $amount: 15%);
          color: darken($color: $badge-primary-bg-color, $amount: 15%);
        }
      }
    }

    &.e-badge-secondary[href].e-badge-ghost {
      &:hover {
        @if $badge-theme != 'Material3' {
          border-color: darken($color: $badge-secondary-bg-color, $amount: 15%);
          color: darken($color: $badge-secondary-bg-color, $amount: 15%);
        }
      }
    }

    &.e-badge-success[href].e-badge-ghost {
      &:hover {
        @if $badge-theme != 'Material3' {
          border-color: darken($color: $badge-success-bg-color, $amount: 15%);
          color: darken($color: $badge-success-bg-color, $amount: 15%);
        }
      }
    }

    &.e-badge-danger[href].e-badge-ghost {
      &:hover {
        @if $badge-theme != 'Material3' {
          border-color: darken($color: $badge-danger-bg-color, $amount: 15%);
          color: darken($color: $badge-danger-bg-color, $amount: 15%);
        }
      }
    }

    &.e-badge-warning[href].e-badge-ghost {
      &:hover {
        @if $badge-theme != 'Material3' {
          border-color: darken($color: $badge-warning-bg-color, $amount: 15%);
          color: darken($color: $badge-warning-bg-color, $amount: 15%);
        }
      }
    }

    &.e-badge-info[href].e-badge-ghost {
      &:hover {
        @if $badge-theme != 'Material3' {
          border-color: darken($color: $badge-info-bg-color, $amount: 15%);
          color: darken($color: $badge-info-bg-color, $amount: 15%);
        }
      }
    }

    &.e-badge-light[href].e-badge-ghost {
      &:hover {
        @if $badge-theme != 'Material3' {
          border-color: darken($color: $badge-light-bg-color, $amount: 15%);
          color: darken($color: $badge-light-bg-color, $amount: 15%);
        }
      }
    }

    &.e-badge-dark[href].e-badge-ghost {
      &:hover {
        @if $badge-theme != 'Material3' {
          border-color: darken($color: $badge-dark-bg-color, $amount: 15%);
          color: darken($color: $badge-dark-bg-color, $amount: 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') {
          border: 1px solid $badge-secondary-font-color;
          color: $badge-secondary-font-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;
        }
        @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;
        }
        @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 {
          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 {
          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;
        }
        @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;
      }
    }
  }
}

//Message bootstrap5 theme variables

// Dimension variables
$msg-font-family: $font-family !default;
$msg-font-weight: 400 !default;
$msg-font-style: normal !default;
$msg-padding: 11px 7px !default;
$msg-border-radius: 4px !default;
$msg-icon-size: 16px !default;
$msg-icon-margin: 3px 4px !default;
$msg-close-icon-margin: 3px 4px 3px auto !default;
$msg-close-icon-size: $msg-icon-size !default;
$msg-content-font-size: 14px !default;
$msg-content-line-height: 22px !default;
$msg-content-padding: 0 4px !default;

$msg-rtl-close-icon-margin: 3px auto 3px 4px !default;

$msg-bigger-padding: 16px 9px !default;
$msg-bigger-icon-size: 18px !default;
$msg-bigger-icon-margin: 3px 6px !default;
$msg-bigger-close-icon-margin: 3px 6px 3px auto !default;
$msg-bigger-close-icon-size: $msg-bigger-icon-size !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: 3px auto 3px 6px !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-success-close-icon-color: $msg-success-close-icon-color !default;
$msg-warning-close-icon-color: $msg-warning-close-icon-color !default;
$msg-info-close-icon-color: $msg-info-close-icon-color !default;
$msg-error-close-icon-color: $msg-danger-close-icon-color !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-success-close-icon-color: $msg-success-close-icon-color-alt1 !default;
$msg-outline-warning-close-icon-color: $msg-warning-close-icon-color-alt1 !default;
$msg-outline-info-close-icon-color: $msg-info-close-icon-color-alt1 !default;
$msg-outline-error-close-icon-color: $msg-danger-close-icon-color-alt1 !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-success-close-icon-color: $msg-success-close-icon-color-alt2 !default;
$msg-filled-warning-close-icon-color: $msg-warning-close-icon-color-alt2 !default;
$msg-filled-info-close-icon-color: $msg-info-close-icon-color-alt2 !default;
$msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;

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

  .e-message {
    border: 1px 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;
    }

    .e-msg-close-icon {
      border-width: 0;
      cursor: pointer;
      font-size: $msg-close-icon-size;
      margin: $msg-close-icon-margin;
      padding: 0;
      @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast') {
        height: $msg-close-icon-size;
      }
      @else {
        height: $msg-icon-size;
      }
    }

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

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

    .e-msg-close-icon {
      font-size: $msg-bigger-close-icon-size;
      margin: $msg-bigger-close-icon-margin;
      @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast') {
        height: $msg-bigger-close-icon-size;
      }
      @else {
        height: $msg-bigger-icon-size;
      }
    }

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


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

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

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

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

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

      .e-msg-close-icon {
        color: $msg-error-close-icon-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;
      }

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

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

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

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

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

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

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

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

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

        .e-msg-close-icon {
          color: $msg-filled-error-close-icon-color;
        }
      }
    }
  }
}


@include export-module('message-bootstrap5-icons') {
  .e-message {
    .e-msg-icon::before,
    .e-msg-close-icon::before {
      font-family: 'e-icons';
    }

    .e-msg-icon::before {
      content: '\e800';
    }

    .e-msg-close-icon::before {
      content: '\e7e7';
    }

    &.e-success .e-msg-icon::before {
      content: '\e72b';
    }

    &.e-error .e-msg-icon::before {
      content: '\e878';
    }

    &.e-info .e-msg-icon::before {
      content: '\e800';
    }

    &.e-warning .e-msg-icon::before {
      content: '\e88b';
    }
  }
}

$skeleton-background-color: $content-bg-color-alt2 !default;
$shimmer-wave-color: $content-bg-color !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;

@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: 50%;
      }

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

      &.e-shimmer-wave::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: calc(200% + 200px);
        animation: e-shimmer-wave $shimmer-effect-duration infinite;
        animation-timing-function: $shimmer-effect-timing-function;
      }

      &.e-shimmer-fade {
        animation: e-shimmer-fade $shimmer-effect-duration infinite;
        animation-timing-function: $shimmer-effect-timing-function;
      }

      &.e-shimmer-pulse {
        animation: e-shimmer-pulse $shimmer-effect-duration infinite;
        animation-timing-function: $shimmer-effect-timing-function;
      }
    }
  }

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

//layout variables
$btn-font-size: $text-sm !default;
$btn-border: 1px solid !default;
$btn-icon-margin-top: -2px !default;
$btn-icon-btn-width: 1em !default;
$btn-icon-top-bottom-padding: 8px !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-offset: 0 !default;
$btn-active-outline-offset: 0 !default;
$btn-font-weight: $font-weight-normal !default;
$btn-font-size: $text-sm !default;
$btn-small-font-size: $text-xs !default;
$btn-bigger-font-size: $text-base !default;
$btn-bigger-small-font-size: $text-sm !default;
$btn-border-radius: 4px !default;
$btn-text-transform: none !default;
$btn-icon-font-size: $text-base !default;
$btn-small-icon-font-size: $text-xs !default;
$btn-bigger-icon-font-size: 22px !default;
$btn-bigger-small-icon-font-size: $text-xl !default;
$btn-round-small-height: 26px !default;
$btn-round-small-width: 26px !default;
$btn-round-height: 32px !default;
$btn-round-width: 32px !default;
$btn-round-bigger-small-height: 34px !default;
$btn-round-bigger-small-width: 34px !default;
$btn-round-bigger-height: 38px !default;
$btn-round-bigger-width: 38px !default;
$btn-round-font-size: $text-base !default;
$btn-small-round-font-size: $text-sm !default;
$btn-bigger-round-font-size: 22px !default;
$btn-bigger-small-round-font-size: $text-lg !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: 2em !default;
$btn-small-icon-width: 2em !default;
$btn-bigger-icon-width: 2em !default;
$btn-bigger-small-icon-width: 2em !default;
$btn-round-icon-line-height: 1.5em !default;
$btn-small-round-icon-line-height: 1 !default;
$btn-bigger-round-icon-line-height: 0 !default;
$btn-bigger-small-round-icon-line-height: 0 !default;
$btn-text-line-height: 1.6em !default;
$btn-bigger-text-line-height: 1.5em !default;
$btn-small-text-line-height: 1.34em !default;
$btn-bigger-small-text-line-height: 1.572em !default;
$btn-padding: 4px 8px !default;
$btn-small-padding: 4px 6px !default;
$btn-bigger-padding: 6px 12px !default;
$btn-bigger-small-padding: 5px 8px !default;
$btn-icon-padding: 4px 11px !default;
$btn-small-icon-padding: 3px 7px !default;
$btn-bigger-icon-padding: 6px 15px !default;
$btn-bigger-small-icon-padding: 6px 13px !default;

//normal
$btn-color: $secondary-text-color !default;
$btn-bgcolor: $secondary-bg-color !default;
$btn-border-color: $secondary-border-color !default;
$btn-hover-bgcolor: $secondary-bg-color-hover !default;
$btn-hover-border-color: $secondary-border-color-hover !default;
$btn-hover-color: $secondary-text-color-hover !default;
$btn-focus-bgcolor: $secondary-bg-color-focus !default;
$btn-focus-border-color: $btn-border-color !default;
$btn-focus-color: $secondary-text-color-focus !default;
$btn-active-outline: $btn-bgcolor 0 solid !default;
$btn-focus-outline: $btn-bgcolor 0 solid !default;
$btn-focus-outline-round: $white 0 solid !default;
$btn-active-border-color: $secondary-border-color-pressed !default;
$btn-active-bgcolor: $secondary-bg-color-pressed !default;
$btn-active-color: $secondary-text-color-pressed !default;
$btn-disabled-color: $secondary-text-color-disabled !default;
$btn-disabled-bgcolor: $secondary-bg-color-disabled !default;
$btn-disabled-border-color: $secondary-border-color-disabled !default;
$btn-active-box-shadow: $secondary-shadow-focus !default;
$btn-ripple-bgcolor: transparent !default;
$btn-link-bgcolor: transparent !default;
$btn-link-border-color: transparent !default;
$btn-link-color: $primary !default;
$btn-link-hover-color: $primary-bg-color-pressed !default;
$btn-link-disabled-bgcolor: transparent !default;

//endnormal
//primary
$btn-ripple-primary-bgcolor: transparent !default;
$btn-primary-outline: $btn-bgcolor 0 solid !default;
$btn-primary-color: $primary-text-color !default;
$btn-primary-hover-color: $primary-text-hover !default;
$btn-primary-focus-color: $primary-text-focus !default;
$btn-primary-active-color: $primary-text-pressed !default;
$btn-primary-bgcolor: $primary-bg-color !default;
$btn-primary-hover-bgcolor: $primary-bg-color-hover !default;
$btn-primary-active-bgcolor: $primary-bg-color-pressed !default;
$btn-primary-border-color:  $primary-border-color !default;
$btn-primary-hover-border-color: $primary-border-color-hover !default;
$btn-primary-focus-border-color: $btn-primary-border-color !default;
$btn-primary-active-border-color: $primary-border-color-pressed !default;
$btn-primary-focus-bgcolor: $primary-bg-color-focus !default;
$btn-primary-disabled-bgcolor: $primary-bg-color-disabled !default;
$btn-primary-disabled-color: $primary-text-disabled !default;
$btn-primary-disabled-border-color: $primary-border-color-disabled !default;

//endprimary
//outline
$btn-outline-color: $secondary-outline !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-outline-border-color !default;
$btn-outline-default-focus-border-color: $btn-outline-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: $secondary-bg-color-disabled !default;
$btn-outline-disabled-border-color: $secondary-border-color-disabled !default;
$btn-outline-disabled-color: $secondary-text-color-disabled !default;
$btn-outline-primary-color: $primary-outline !default;
$btn-outline-primary-focus-bgcolor: $btn-primary-bgcolor !default;
$btn-outline-primary-focus-color: $white !default;

//endoutline
//flat
$btn-flat-color: $secondary-bg-color !default;
$btn-flat-border: $btn-border !default;
$btn-flat-border-color: $transparent !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: none !default;
$btn-flat-active-bgcolor: $btn-active-bgcolor !default;
$btn-flat-bgcolor: $transparent !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-flat-hover-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;

//endflat
//success
$btn-success-color: $success-text !default;
$btn-success-bgcolor: $success-bg-color !default;
$btn-success-hover-bgcolor: $success-bg-color-hover !default;
$btn-success-focus-bgcolor: $success-bg-color-focus !default;
$btn-success-active-bgcolor: $success-bg-color-pressed !default;
$btn-success-border-color: $success-border-color !default;
$btn-success-hover-border-color: $success-border-color-hover !default;
$btn-success-focus-border-color: $btn-success-border-color !default;
$btn-success-active-border-color: $success-border-color-pressed !default;
$btn-success-disabled-bgcolor: $success-bg-color-disabled !default;
$btn-success-disabled-color: $success-text-disabled !default;
$btn-success-disabled-border-color: $success-border-color-disabled !default;
$btn-success-hover-color: $success-text-hover !default;
$btn-success-focus-color: $success-text-focus !default;
$btn-ripple-success-bgcolor: transparent !default;
$btn-success-active-color: $btn-success-color !default;

//endsuccess
//warning
$btn-warning-bgcolor: $warning-bg-color !default;
$btn-warning-color: $warning-text !default;
$btn-warning-hover-color: $warning-text-hover !default;
$btn-warning-hover-bgcolor: $warning-bg-color-hover !default;
$btn-warning-focus-bgcolor: $warning-bg-color-focus !default;
$btn-warning-active-bgcolor: $warning-bg-color-pressed !default;
$btn-warning-border-color: $warning-border-color !default;
$btn-warning-hover-border-color: $warning-border-color-hover !default;
$btn-warning-focus-border-color: $btn-warning-border-color !default;
$btn-warning-focus-color: $warning-text-focus !default;
$btn-warning-active-color: $warning-text-pressed !default;
$btn-warning-active-border-color: $warning-border-color-pressed !default;
$btn-warning-disabled-bgcolor: $warning-bg-color-disabled !default;
$btn-warning-disabled-color: $warning-text-disabled !default;
$btn-warning-disabled-border-color: $warning-border-color-disabled !default;
$btn-ripple-warning-bgcolor: transparent !default;

//endwarning
//danger
$btn-danger-color: $danger-text !default;
$btn-danger-bgcolor: $danger-bg-color !default;
$btn-danger-hover-bgcolor: $danger-bg-color-hover !default;
$btn-danger-focus-bgcolor: $danger-bg-color-focus !default;
$btn-danger-active-bgcolor: $danger-bg-color-pressed !default;
$btn-danger-active-color: $danger-text-pressed !default;
$btn-danger-border-color: $danger-border-color !default;
$btn-danger-hover-border-color: $danger-border-color-hover !default;
$btn-danger-focus-border-color: $btn-danger-border-color !default;
$btn-danger-active-border-color: $danger-border-color-pressed !default;
$btn-danger-disabled-bgcolor: $danger-bg-color-disabled !default;
$btn-danger-disabled-color: $warning-text-disabled !default;
$btn-danger-disabled-border-color: $danger-border-color-disabled !default;
$btn-danger-hover-color: $danger-text-hover !default;
$btn-ripple-danger-bgcolor: transparent !default;

//enddanger
//info
$btn-info-bgcolor: $info-bg-color !default;
$btn-info-color: $info-text !default;
$btn-info-hover-bgcolor: $info-bg-color-hover !default;
$btn-info-focus-bgcolor: $info-bg-color-focus !default;
$btn-info-active-bgcolor: $info-bg-color-pressed !default;
$btn-info-border-color: $info-border-color !default;
$btn-info-hover-border-color: $info-border-color-hover !default;
$btn-info-focus-border-color: $btn-info-border-color !default;
$btn-info-active-border-color: $info-border-color-pressed !default;
$btn-info-disabled-bgcolor: $info-bg-color-disabled !default;
$btn-info-disabled-color: $info-text-disabled !default;
$btn-info-disabled-border-color: $info-border-color-disabled !default;
$btn-info-active-color: $info-text-pressed !default;
$btn-info-hover-color: $info-text-hover !default;
$btn-ripple-info-bgcolor: transparent !default;

//endinfo
//round
$btn-round-focus-color: $secondary-text-color !default;
$btn-round-active-color: $secondary-text-color-pressed !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;

//endround
//flatprimary
$btn-flat-primary-hover-bgcolor: $btn-primary-hover-bgcolor !default;
$btn-flat-primary-border-color: $btn-flat-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-flat-primary-border-color !default;
$btn-flat-primary-disabled-border-color: transparent !default;
$btn-flat-primary-focus-bgcolor: $btn-flat-primary-hover-bgcolor !default;
$btn-flat-disabled-color: $secondary-text-color-disabled !default;
$btn-flat-primary-disabled-color: $primary-text-disabled !default;
$btn-flat-primary-bgcolor: $btn-flat-bgcolor !default;
$btn-flat-primary-color: $primary-outline !default;
$btn-flat-primary-hover-color: $btn-primary-color !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;

//endflatprimary
//flatsuccess
$btn-flat-success-color: $success-outline !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: $btn-success-disabled-color !default;
$btn-flat-success-bgcolor: $btn-flat-bgcolor !default;
$btn-flat-success-hover-bgcolor: $btn-success-hover-bgcolor !default;
$btn-flat-success-border-color: $btn-flat-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-flat-success-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;

//endflatsuccess
//flatinfo
$btn-flat-info-bgcolor: $btn-flat-bgcolor !default;
$btn-flat-info-hover-bgcolor: $btn-info-hover-bgcolor !default;
$btn-flat-info-border-color: $btn-flat-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-flat-info-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-bgcolor !default;
$btn-flat-info-disabled-color: $btn-info-disabled-color !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;

//endflatinfo
//flatwarning
$btn-flat-warning-bgcolor: $btn-flat-bgcolor !default;
$btn-flat-warning-hover-bgcolor: $btn-warning-hover-bgcolor !default;
$btn-flat-warning-border-color: $btn-flat-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-flat-warning-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: $warning-outline !default;
$btn-flat-warning-disabled-color: $btn-warning-disabled-color !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;

//endflatwarning
//flatdanger
$btn-flat-danger-bgcolor: $btn-flat-bgcolor !default;
$btn-flat-danger-hover-bgcolor: $btn-danger-hover-bgcolor !default;
$btn-flat-danger-border-color: $btn-flat-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-flat-danger-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: $danger-outline !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: $btn-danger-disabled-color !default;

//endflatdanger
//outlineprimary
$btn-outline-primary-disabled-color: $primary-text-disabled !default;
$btn-outline-primary-disabled-border-color: rgba($primary, .65) !default;
$btn-outline-primary-hover-border-color: $primary !default;
$btn-outline-primary-hover-bgcolor: $btn-primary-bgcolor !default;
$btn-outline-primary-focus-border-color: $primary !default;
$btn-outline-primary-active-border-color: $primary !default;

//endoutlineprimay
//outlinesuccess
$btn-outline-success-disabled-color: $success-text-disabled !default;
$btn-outline-success-disabled-border-color: rgba($btn-success-bgcolor, .65) !default;
$btn-outline-success-hover-bgcolor: $btn-success-bgcolor !default;

//endoutlinesuccess
//outlineinfo
$btn-outline-info-disabled-color: $info-text-disabled !default;
$btn-outline-info-disabled-border-color: rgba($btn-info-bgcolor, .65) !default;

//endoutlineinfo
//outlinewarning
$btn-outline-warning-disabled-color: $warning-text-disabled !default;
$btn-outline-warning-disabled-border-color: rgba($btn-warning-bgcolor, .65) !default;

//endoutlinewarning
//outlinedanger
$btn-outline-danger-disabled-color: $danger-text-disabled !default;
$btn-outline-danger-disabled-border-color: rgba($btn-danger-bgcolor, .65) !default;

//endoutlinedanger
//size
$btn-box-shadow: $shadow-sm !default;
$btn-hover-focus-box-shadow: none !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: $secondary-shadow-focus !default;

// bootstrap5 theme variables
$btn-primary-focus-box-shadow: $primary-shadow-focus !default;
$btn-success-focus-box-shadow: $success-shadow-focus !default;
$btn-danger-focus-box-shadow: $danger-shadow-focus !default;
$btn-info-focus-box-shadow: $info-shadow-focus !default;
$btn-warning-focus-box-shadow: $warning-shadow-focus !default;

//endsize

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

  /*! 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: .15px;
    }
    @at-root {
      &:disabled {
        cursor: default;
      }

      &:hover,
      &:focus {
        text-decoration: none;
      }

      &::-moz-focus-inner {
        border: 0;
        padding: 0;
      }

      & .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;
          @if $skin-name == 'bootstrap4' {
            padding: 0 $btn-bigger-icon-top-bottom-padding;
          }
          @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
            line-height: 0;
          }
        }

        &.e-icon-right {
          margin-right: $btn-icon-margin;
          width: $btn-icon-width;
          @if $skin-name == 'bootstrap4' {
            padding: 0 $btn-bigger-icon-top-bottom-padding;
          }
          @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
            line-height: 0;
          }
        }

        &.e-icon-top {
          display: block;
          margin-top: 0;
          padding-bottom: $btn-icon-top-bottom-padding;
          width: auto;
        }

        &.e-icon-bottom {
          display: block;
          margin-top: 0;
          padding-top: $btn-icon-top-bottom-padding;
          width: auto;
        }
      }

      &.e-icon-btn {
        padding: $btn-icon-padding;
        @if $skin-name == 'Material3' {
          border-radius: 4px;
        }
      }

      &.e-top-icon-btn,
      &.e-bottom-icon-btn {
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          line-height: 0;
        }
        @else {
          line-height: 1;
        }
        padding: $btn-top-icon-padding;
      }

      &.e-round {
        border-radius: 50%;
        height: $btn-round-height;
        line-height: 1;
        padding: 0;
        width: $btn-round-width;

        & .e-btn-icon {
          font-size: $btn-round-font-size;
          line-height: $btn-round-icon-line-height;
          margin-top: 0;
          width: auto;
        }
      }

      &.e-round-corner {
        @if $skin-name == 'Material3' {
          border-radius: 25px;
          padding: $btn-padding;
        }
      }

      &.e-rtl {
        & .e-icon-right {
          margin-left: $btn-icon-margin;
          margin-right: 0;
        }

        & .e-icon-left {
          margin-left: 0;
          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: 25px;
            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;
            @if $skin-name == 'bootstrap4' {
              padding: 0 $btn-bigger-icon-top-bottom-padding;
            }
            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
              line-height: 0;
            }
          }

          &.e-icon-right {
            margin-right: $btn-small-icon-margin;
            width: $btn-small-icon-width;
            @if $skin-name == 'bootstrap4' {
              padding: 0 $btn-bigger-icon-top-bottom-padding;
            }
            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
              line-height: 0;
            }
          }

          &.e-icon-top {
            padding-bottom: $btn-small-icon-top-bottom-padding;
            width: auto;
          }

          &.e-icon-bottom {
            padding-top: $btn-small-icon-top-bottom-padding;
            width: auto;
          }
        }

        &.e-icon-btn {
          padding: $btn-small-icon-padding;
          @if $skin-name == 'Material3' {
            border-radius: 4px;
          }
        }

        &.e-top-icon-btn,
        &.e-bottom-icon-btn {
          @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
            line-height: 0;
          }
          @else {
            line-height: 1;
          }
          padding: $btn-top-icon-padding;
        }

        &.e-round {
          height: $btn-round-small-height;
          line-height: 1;
          padding: 0;
          width: $btn-round-small-width;
          @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' {
            border-radius: 50%;
          }

          & .e-btn-icon {
            font-size: $btn-small-round-font-size;
            line-height: $btn-small-round-icon-line-height;
            width: auto;
          }
        }

        &.e-rtl {
          & .e-icon-right {
            margin-left: $btn-small-icon-margin;
            margin-right: 0;
          }

          & .e-icon-left {
            margin-left: 0;
            margin-right: $btn-small-icon-margin;
          }
        }
      }

      &.e-block {
        display: block;
        width: 100%;
      }
    }
  }

  .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: 25px;
        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;
        @if $skin-name == 'bootstrap4' {
          padding: 0 $btn-bigger-icon-top-bottom-padding;
        }
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          line-height: 0;
        }
      }

      &.e-icon-right {
        margin-right: $btn-small-icon-margin;
        width: $btn-small-icon-width;
        @if $skin-name == 'bootstrap4' {
          padding: 0 $btn-bigger-icon-top-bottom-padding;
        }
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          line-height: 0;
        }
      }

      &.e-icon-top {
        padding-bottom: $btn-small-icon-top-bottom-padding;
        width: auto;
      }

      &.e-icon-bottom {
        padding-top: $btn-small-icon-top-bottom-padding;
        width: auto;
      }
    }

    &.e-icon-btn {
      padding: $btn-small-icon-padding;
      @if $skin-name == 'Material3' {
        border-radius: 4px;
      }
    }

    &.e-top-icon-btn,
    &.e-bottom-icon-btn {
      @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
        line-height: 0;
      }
      @else {
        line-height: 1;
      }
      padding: $btn-top-icon-padding;
    }

    &.e-round {
      height: $btn-round-small-height;
      line-height: 1;
      padding: 0;
      width: $btn-round-small-width;
      @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or or $skin-name == 'Material3' {
        border-radius: 50%;
      }

      & .e-btn-icon {
        font-size: $btn-small-round-font-size;
        line-height: $btn-small-round-icon-line-height;
        width: auto;
      }
    }

    &.e-rtl {
      & .e-icon-right {
        margin-left: $btn-small-icon-margin;
        margin-right: 0;
      }

      & .e-icon-left {
        margin-left: 0;
        margin-right: $btn-small-icon-margin;
      }
    }
  }

  .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: 4px;
    }

    &.e-round-corner {
      @if $skin-name == 'Material3' {
        border-radius: 25px;
        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;
        @if $skin-name == 'bootstrap4' {
          padding: 0 $btn-bigger-icon-top-bottom-padding;
        }
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          line-height: 0;
        }
      }

      &.e-icon-right {
        margin-right: $btn-bigger-small-icon-margin;
        width: $btn-bigger-small-icon-width;
        @if $skin-name == 'bootstrap4' {
          padding: 0 $btn-bigger-icon-top-bottom-padding;
        }
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          line-height: 0;
        }
      }

      &.e-icon-top {
        padding-bottom: $btn-small-icon-top-bottom-padding;
        width: auto;
      }

      &.e-icon-bottom {
        padding-top: $btn-small-icon-top-bottom-padding;
        width: auto;
      }
    }

    &.e-icon-btn {
      padding: $btn-bigger-small-icon-padding;
      @if $skin-name == 'Material3' {
        border-radius: 4px;
      }
    }

    &.e-top-icon-btn,
    &.e-bottom-icon-btn {
      @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
        line-height: 0;
      }
      @else {
        line-height: 1;
      }
      padding: $btn-top-icon-bigger-padding;
    }

    &.e-round {
      height: $btn-round-bigger-small-height;
      line-height: 1;
      padding: 0;
      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: auto;
      }
    }

    &.e-rtl {
      & .e-icon-right {
        margin-left: $btn-bigger-small-icon-margin;
        margin-right: 0;
      }

      & .e-icon-left {
        margin-left: 0;
        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: 4px;
    }

    &.e-round-corner {
      @if $skin-name == 'Material3' {
        border-radius: 25px;
        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;
        @if $skin-name == 'bootstrap4' {
          padding: 0 $btn-bigger-icon-top-bottom-padding;
        }
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          line-height: 0;
        }
      }

      &.e-icon-right {
        margin-right: $btn-bigger-icon-margin;
        width: $btn-bigger-icon-width;
        @if $skin-name == 'bootstrap4' {
          padding: 0 $btn-bigger-icon-top-bottom-padding;
        }
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          line-height: 0;
        }
      }

      &.e-icon-top {
        padding-bottom: $btn-bigger-icon-top-bottom-padding;
        width: auto;
      }

      &.e-icon-bottom {
        padding-top: $btn-bigger-icon-top-bottom-padding;
        width: auto;
      }
    }

    &.e-icon-btn {
      padding: $btn-bigger-icon-padding;
      @if $skin-name == 'Material3' {
        border-radius: 4px;
      }
    }

    &.e-top-icon-btn,
    &.e-bottom-icon-btn {
      @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
        line-height: 0;
      }
      @else {
        line-height: 1;
      }
      padding: $btn-top-icon-bigger-padding;
    }

    &.e-round {
      height: $btn-round-bigger-height;
      line-height: 1;
      padding: 0;
      width: $btn-round-bigger-width;
      @if $skin-name == 'tailwind' or $skin-name == 'Material3' {
        border-radius: 50%;
      }

      & .e-btn-icon {
        font-size: $btn-bigger-round-font-size;
        line-height: $btn-bigger-round-icon-line-height;
        width: auto;
      }
    }

    &.e-rtl {
      & .e-icon-right {
        margin-left: $btn-bigger-icon-margin;
        margin-right: 0;
      }

      & .e-icon-left {
        margin-left: 0;
        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;
      }

      &.e-round-corner {
        @if $skin-name == 'Material3' {
          border-radius: 25px;
          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;
          @if $skin-name == 'bootstrap4' {
            padding: 0 $btn-bigger-icon-top-bottom-padding;
          }
          @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
            line-height: 0;
          }
        }

        &.e-icon-right {
          margin-right: $btn-bigger-small-icon-margin;
          width: $btn-bigger-small-icon-width;
          @if $skin-name == 'bootstrap4' {
            padding: 0 $btn-bigger-icon-top-bottom-padding;
          }
          @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
            line-height: 0;
          }
        }

        &.e-icon-top {
          padding-bottom: $btn-small-icon-top-bottom-padding;
          width: auto;
        }

        &.e-icon-bottom {
          padding-top: $btn-small-icon-top-bottom-padding;
          width: auto;
        }
      }

      &.e-icon-btn {
        padding: $btn-bigger-small-icon-padding;
        @if $skin-name == 'Material3' {
          border-radius: 4px;
        }
      }

      &.e-top-icon-btn,
      &.e-bottom-icon-btn {
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          line-height: 0;
        }
        @else {
          line-height: 1;
        }
        padding: $btn-top-icon-bigger-padding;
      }

      &.e-round {
        height: $btn-round-bigger-small-height;
        line-height: 1;
        padding: 0;
        width: $btn-round-bigger-small-width;
        @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' {
          border-radius: 50%;
        }

        & .e-btn-icon {
          font-size: $btn-bigger-small-round-font-size;
          line-height: $btn-bigger-small-round-icon-line-height;
          width: auto;
        }
      }

      &.e-rtl {
        & .e-icon-right {
          margin-left: $btn-bigger-small-icon-margin;
          margin-right: 0;
        }

        & .e-icon-left {
          margin-left: 0;
          margin-right: $btn-bigger-small-icon-margin;
        }
      }
    }
  }
}


@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(mix(lighten($btn-focus-bgcolor, 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 {
    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;
  }
  @if $skin-name == 'bootstrap4' {
    $color-rgba: rgba(mix(lighten($btn-active-bgcolor, 50%), $btn-active-border-color, 15%), .5);
    box-shadow: 0 0 0 .25em $color-rgba;
  }
  @else if $skin-name != 'bootstrap5' {
    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(mix(lighten($btn-primary-focus-bgcolor, 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 {
    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 == 'bootstrap4' {
    $color-rgba: rgba(mix(lighten($btn-primary-active-bgcolor, 50%), $btn-primary-active-border-color, 15%), .5);
    box-shadow: 0 0 0 .25em $color-rgba;
  }
  @else if $skin-name != 'bootstrap5' {
    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(mix(lighten($btn-outline-focus-bgcolor, 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 {
    box-shadow: $btn-hover-focus-box-shadow;
  }
}

@mixin outline-active {
  @if $skin-name == 'bootstrap4' {
    background: $btn-bgcolor;
    border-color: transparent;
    $color-rgba: rgba(mix(lighten($btn-outline-active-bgcolor, 50%), $btn-outline-active-border-color, 15%), .5);
    box-shadow: 0 0 0 .25em $color-rgba;
  }
  @else {
    background: $btn-outline-active-bgcolor;
    border-color: $btn-outline-active-border-color;
    @if $skin-name != 'bootstrap5' {
      box-shadow: $btn-outline-active-box-shadow;
    }
  }
  color: $btn-outline-active-color;
}

@mixin outline-primary-focus {
  @if $skin-name == 'bootstrap4' {
    $color-rgba: rgba(mix(lighten($btn-outline-primary-focus-bgcolor, 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);
  }
}

@mixin outline-primary-active {
  @if $skin-name == 'bootstrap4' {
    background: $btn-primary-bgcolor;
    border-color: transparent;
    $color-rgba: rgba(mix(lighten($btn-primary-active-bgcolor, 50%), $btn-outline-primary-active-border-color, 15%), .5);
    box-shadow: 0 0 0 .25em $color-rgba;
  }
  @else if ($skin-name == 'bootstrap5') {
    background: $btn-primary-bgcolor;
  }
  @else {
    background: $btn-primary-active-bgcolor;
    border-color: $btn-outline-primary-active-border-color;
    @if $skin-name != 'bootstrap5' {
      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(mix(lighten($btn-success-focus-bgcolor, 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);
  }
}

@mixin outline-success-active {
  @if $skin-name == 'bootstrap4' {
    background: $btn-success-bgcolor;
    border-color: transparent;
    $color-rgba: rgba(mix(lighten($btn-success-active-bgcolor, 50%), $btn-success-active-border-color, 15%), .5);
    box-shadow: 0 0 0 .25em $color-rgba;
  }
  @else {
    background: $btn-success-active-bgcolor;
    border-color: $btn-success-active-border-color;
    @if $skin-name != 'bootstrap5' {
      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(mix(lighten($btn-info-hover-bgcolor, 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);
  }
}

@mixin outline-info-active {
  @if $skin-name == 'bootstrap4' {
    background: $btn-info-bgcolor;
    border-color: transparent;
    $color-rgba: rgba(mix(lighten($btn-info-active-bgcolor, 50%), $btn-info-active-border-color, 15%), .5);
    box-shadow: 0 0 0 .25em $color-rgba;
  }
  @else if ($skin-name == 'bootstrap5') {
    background: $btn-info-bgcolor;
  }
  @else {
    background: $btn-info-active-bgcolor;
    border-color: $btn-info-active-border-color;
    @if $skin-name != 'bootstrap5' {
      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(mix(lighten($btn-warning-hover-bgcolor, 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);
  }
}

@mixin outline-warning-active {
  @if $skin-name == 'bootstrap4' {
    background: $btn-warning-bgcolor;
    border-color: transparent;
    $color-rgba: rgba(mix(lighten($btn-warning-active-bgcolor, 50%), $btn-warning-active-border-color, 15%), .5);
    box-shadow: 0 0 0 .25em $color-rgba;
  }
  @else {
    background: $btn-warning-active-bgcolor;
    border-color: $btn-warning-active-border-color;
    @if $skin-name != 'bootstrap5' {
      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(mix(lighten($btn-danger-hover-bgcolor, 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);
  }
}

@mixin outline-danger-active {
  @if $skin-name == 'bootstrap4' {
    background: $btn-danger-bgcolor;
    border-color: transparent;
    $color-rgba: rgba(mix(lighten($btn-danger-active-bgcolor, 50%), $btn-danger-active-border-color, 15%), .5);
    box-shadow: 0 0 0 .25em $color-rgba;
  }
  @else {
    background: $btn-danger-active-bgcolor;
    border-color: $btn-danger-active-border-color;
    @if $skin-name != 'bootstrap5' {
      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' {
    border-color: $btn-outline-disabled-border-color;
    color: $btn-outline-active-bgcolor;
  }
  @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;
  }
  @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' {
    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' {
    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' {
    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' {
    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(mix(lighten($btn-success-focus-bgcolor, 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 {
    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 == 'bootstrap4' {
    $color-rgba: rgba(mix(lighten($btn-success-active-bgcolor, 50%), $btn-success-active-border-color, 15%), .5);
    box-shadow: 0 0 0 .25em $color-rgba;
  }
  @else if $skin-name != 'bootstrap5' {
    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(mix(lighten($btn-info-focus-bgcolor, 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 {
    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 == 'bootstrap4' {
    $color-rgba: rgba(mix(lighten($btn-info-active-bgcolor, 50%), $btn-info-active-border-color, 15%), .5);
    box-shadow: 0 0 0 .25em $color-rgba;
  }
  @else if $skin-name != 'bootstrap5' {
    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(mix(lighten($btn-warning-focus-bgcolor, 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 {
    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 == 'bootstrap4' {
    $color-rgba: rgba(mix(lighten($btn-warning-active-bgcolor, 50%), $btn-warning-active-border-color, 15%), .5);
    box-shadow: 0 0 0 .25em $color-rgba;
  }
  @else if $skin-name != 'bootstrap5' {
    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(mix(lighten($btn-danger-focus-bgcolor, 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 {
    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 == 'bootstrap4' {
    $color-rgba: rgba(mix(lighten($btn-danger-active-bgcolor, 50%), $btn-danger-active-border-color, 15%), .5);
    box-shadow: 0 0 0 .25em $color-rgba;
  }
  @else if $skin-name != 'bootstrap5' {
    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 == 'bootstrap5' {
    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 == 'bootstrap5') {
    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 == 'bootstrap5') {
    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 == 'bootstrap5') {
    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' {
    color: $secondary-border-color-disabled;
    text-decoration: underline;
  }
  @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') {

  /*! 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' {
      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
        @if $skin-name == 'FluentUI' {
          outline: none !important; /* stylelint-disable-line declaration-no-important */
        }
      }

      &:focus-visible { // only for keybord
        @if $skin-name == 'FluentUI' {
          background: $btn-bgcolor;
        }
        @if $skin-name == 'Material3' {
          background: $btn-active-bgcolor;
          box-shadow: $btn-keyboard-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' {
          box-shadow: $btn-active-box-shadow;
        }
        color: $btn-active-color;
      }

      &: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-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
          @if $skin-name == 'FluentUI' {
            outline: none !important; /* stylelint-disable-line declaration-no-important */
          }
        }

        &:focus-visible { // only for keybord
          @if $skin-name == 'FluentUI' {
            background: $btn-bgcolor;
          }
          @if $skin-name == 'Material3' {
            background: $btn-active-bgcolor;
            box-shadow: $btn-keyboard-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 {
            border-color: $btn-primary-bgcolor;
          }

          &:focus {
            outline: $btn-focus-outline-round;
          }

          &:focus:not(:focus-visible) { //mouse click
            @if $skin-name == 'FluentUI' {
              outline: none !important; /* stylelint-disable-line declaration-no-important */
            }
          }

          &:focus-visible { // only for keybord
            @if $skin-name == 'FluentUI' {
              background: $btn-primary-bgcolor;
            }
            @if $skin-name == 'Material3' {
              background: $btn-primary-active-bgcolor;
              box-shadow: $btn-keyboard-focus-box-shadow;
            }
          }
        }

        &.e-success {
          &:hover {
            border-color: $btn-success-bgcolor;
          }

          &:focus {
            outline: $btn-focus-outline-round;
          }

          &:focus:not(:focus-visible) { //mouse click
            @if $skin-name == 'FluentUI'{
              outline: none !important; /* stylelint-disable-line declaration-no-important */
            }
          }

          &:focus-visible { // only for keybord
            @if $skin-name == 'FluentUI' {
              background: $btn-success-bgcolor;
            }
            @if $skin-name == 'Material3' {
              background: $btn-success-active-bgcolor;
              box-shadow: $btn-keyboard-focus-box-shadow;
            }
          }
        }

        &.e-info {
          &:hover {
            border-color: $btn-info-bgcolor;
          }

          &:focus {
            outline: $btn-focus-outline-round;
          }

          &:focus:not(:focus-visible) { //mouse click
            @if $skin-name == 'FluentUI' {
              outline: none !important; /* stylelint-disable-line declaration-no-important */
            }
          }

          &:focus-visible { // only for keybord
            @if $skin-name == 'FluentUI' {
              background: $btn-info-bgcolor;
            }
            @if $skin-name == 'Material3' {
              background: $btn-info-active-bgcolor;
              box-shadow: $btn-keyboard-focus-box-shadow;
            }
          }
        }

        &.e-warning {
          &:hover {
            border-color: $btn-warning-bgcolor;
          }

          &:focus {
            outline: $btn-focus-outline-round;
          }

          &:focus:not(:focus-visible) { //mouse click
            @if $skin-name == 'FluentUI' {
              outline: none !important; /* stylelint-disable-line declaration-no-important */
            }
          }

          &:focus-visible { // only for keybord
            @if $skin-name == 'FluentUI' {
              background: $btn-warning-bgcolor;
            }
            @if $skin-name == 'Material3' {
              background: $btn-warning-active-bgcolor;
              box-shadow: $btn-keyboard-focus-box-shadow;
            }
          }
        }

        &.e-danger {
          &:hover {
            border-color: $btn-danger-bgcolor;
          }

          &:focus {
            outline: $btn-focus-outline-round;
          }

          &:focus:not(:focus-visible) { //mouse click
            @if $skin-name == 'FluentUI' {
              outline: none !important; /* stylelint-disable-line declaration-no-important */
            }
          }

          &:focus-visible { // only for keybord
            @if $skin-name == 'FluentUI' {
              background: $btn-danger-bgcolor;
            }
            @if $skin-name == 'Material3' {
              background: $btn-danger-active-bgcolor;
              box-shadow: $btn-keyboard-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
          @if $skin-name == 'FluentUI' {
            outline: none !important; /* stylelint-disable-line declaration-no-important */
          }
        }

        &:focus-visible { // only for keybord
          @if $skin-name == 'FluentUI' {
            background: $btn-primary-bgcolor;
          }
          @if $skin-name == 'Material3' {
            background: $btn-primary-active-bgcolor;
            box-shadow: $btn-keyboard-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(mix(lighten($btn-primary-focus-bgcolor, 50%), $btn-primary-focus-border-color, 15%), .5);
            box-shadow: 0 0 0 .25em $color-rgba;
          }
          @else if $skin-name != 'bootstrap5' {
            box-shadow: $btn-active-box-shadow;
          }
          color: $btn-primary-active-color;
        }

        &: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
          @if $skin-name == 'FluentUI' {
            outline: none !important; /* stylelint-disable-line declaration-no-important */
          }
        }

        &:focus-visible { // only for keybord
          @if $skin-name == 'FluentUI' {
            background: $btn-success-bgcolor;
          }
          @if $skin-name == 'Material3' {
            background: $btn-success-active-bgcolor;
            box-shadow: $btn-keyboard-focus-box-shadow;
          }
        }

        &:active,
        &.e-active {
          @include success-active;
        }

        &: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
          @if $skin-name == 'FluentUI' {
            outline: none !important; /* stylelint-disable-line declaration-no-important */
          }
        }

        &:focus-visible { // only for keybord
          @if $skin-name == 'FluentUI' {
            background: $btn-info-bgcolor;
          }
          @if $skin-name == 'Material3' {
            background: $btn-info-active-bgcolor;
            box-shadow: $btn-keyboard-focus-box-shadow;
          }
        }

        &:active,
        &.e-active {
          @include info-active;
        }

        &: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
          @if $skin-name == 'FluentUI' {
            outline: none !important; /* stylelint-disable-line declaration-no-important */
          }
        }

        &:focus-visible { // only for keybord
          @if $skin-name == 'FluentUI' {
            background: $btn-warning-bgcolor;
          }
          @if $skin-name == 'Material3' {
            background: $btn-warning-active-bgcolor;
            box-shadow: $btn-keyboard-focus-box-shadow;
          }
        }

        &:active,
        &.e-active {
          @include warning-active;
        }

        &: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
          @if $skin-name == 'FluentUI' {
            outline: none !important; /* stylelint-disable-line declaration-no-important */
          }
        }

        &:focus-visible { // only for keybord
          @if $skin-name == 'FluentUI' {
            background: $btn-danger-bgcolor;
          }
          @if $skin-name == 'Material3' {
            background: $btn-danger-active-bgcolor;
            box-shadow: $btn-keyboard-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(mix(lighten($btn-primary-focus-bgcolor, 50%), $btn-primary-focus-border-color, 15%), .5);
            box-shadow: 0 0 0 .25em $color-rgba;
          }
          @else if $skin-name != 'bootstrap5' {
            box-shadow: $btn-active-box-shadow;
          }
          color: $btn-danger-active-color;
        }

        &: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(mix(lighten($btn-flat-focus-bgcolor, 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 {
            box-shadow: $btn-flat-box-shadow;
          }
        }

        &:focus:not(:focus-visible) { //mouse click
          @if $skin-name == 'FluentUI' {
            outline: none !important; /* stylelint-disable-line declaration-no-important */
          }
        }

        &:focus-visible { // only for keybord
          @if $skin-name == 'Material3' {
            background: $btn-active-bgcolor;
            box-shadow: $btn-keyboard-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(mix(lighten($btn-flat-active-bgcolor, 50%), $btn-flat-active-border-color, 15%), .5);
            box-shadow: 0 0 0 .25em $color-rgba;
          }
          @else if $skin-name != 'bootstrap5' {
            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(mix(lighten($btn-flat-primary-focus-bgcolor, 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
            @if $skin-name == 'FluentUI' {
              outline: none !important; /* stylelint-disable-line declaration-no-important */
            }
          }

          &: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;
            }
          }

          &: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(mix(lighten($btn-flat-primary-active-bgcolor, 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(mix(lighten($btn-flat-success-focus-bgcolor, 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 {
              box-shadow: $btn-flat-box-shadow;
            }
          }

          &:focus:not(:focus-visible) { //mouse click
            @if $skin-name == 'FluentUI' {
              outline: none !important; /* stylelint-disable-line declaration-no-important */
            }
          }

          &: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;
            }
          }

          &: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(mix(lighten($btn-flat-success-active-bgcolor, 50%), $btn-flat-success-active-border-color, 15%), .5);
              box-shadow: 0 0 0 .25em $color-rgba;
            }
            @else if $skin-name != 'bootstrap5' {
              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(mix(lighten($btn-flat-info-focus-bgcolor, 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 {
              box-shadow: $btn-flat-box-shadow;
            }
          }

          &:focus:not(:focus-visible) { //mouse click
            @if $skin-name == 'FluentUI' {
              outline: none !important; /* stylelint-disable-line declaration-no-important */
            }
          }

          &: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;
            }
          }

          &: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(mix(lighten($btn-flat-info-active-bgcolor, 50%), $btn-flat-info-active-border-color, 15%), .5);
              box-shadow: 0 0 0 .25em $color-rgba;
            }
            @else if $skin-name != 'bootstrap5' {
              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(mix(lighten($btn-flat-warning-focus-bgcolor, 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 {
              box-shadow: $btn-flat-box-shadow;
            }
          }

          &:focus:not(:focus-visible) { //mouse click
            @if $skin-name == 'FluentUI' {
              outline: none !important; /* stylelint-disable-line declaration-no-important */
            }
          }

          &: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;
            }
          }

          &: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(mix(lighten($btn-flat-warning-active-bgcolor, 50%), $btn-flat-warning-active-border-color, 15%), .5);
              box-shadow: 0 0 0 .25em $color-rgba;
            }
            @else if $skin-name != 'bootstrap5' {
              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(mix(lighten($btn-flat-danger-focus-bgcolor, 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 {
              box-shadow: $btn-flat-box-shadow;
            }
          }

          &:focus:not(:focus-visible) { //mouse click
            @if $skin-name == 'FluentUI' {
              outline: none !important; /* stylelint-disable-line declaration-no-important */
            }
          }

          &: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;
            }
          }

          &: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(mix(lighten($btn-flat-danger-active-bgcolor, 50%), $btn-flat-danger-active-border-color, 15%), .5);
              box-shadow: 0 0 0 .25em $color-rgba;
            }
            @else if $skin-name != 'bootstrap5' {
              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
          @if $skin-name == 'FluentUI' {
            outline: none !important; /* stylelint-disable-line declaration-no-important */
          }
        }

        &:focus-visible { // only for keybord
          @if $skin-name == 'FluentUI' {
            background: $btn-outline-bgcolor;
          }
          @if $skin-name == 'Material3' {
            background: $btn-active-bgcolor;
            box-shadow: $btn-keyboard-focus-box-shadow;
          }
        }

        &:active,
        &.e-active {
          @include outline-active;
        }

        &: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 {
              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
            @if $skin-name == 'FluentUI' {
              outline: none !important; /* stylelint-disable-line declaration-no-important */
            }
          }

          &:focus-visible { // only for keybord
            @if $skin-name == 'FluentUI' {
              background: $btn-outline-bgcolor;
            }
            @if $skin-name == 'Material3' {
              background: $btn-primary-active-bgcolor;
              box-shadow: $btn-keyboard-focus-box-shadow;
              color: $btn-primary-color;
            }
          }

          &:active,
          &.e-active {
            @include outline-primary-active;
          }

          &:disabled,
          &.e-disabled {
            @include outline-primary-disabled;
          }
        }

        &.e-success {
          background: $btn-outline-bgcolor;
          @if $skin-name == 'bootstrap5' 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 {
              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
            @if $skin-name == 'FluentUI' {
              outline: none !important; /* stylelint-disable-line declaration-no-important */
            }
          }

          &:focus-visible { // only for keybord
            @if $skin-name == 'FluentUI' {
              background: $btn-outline-bgcolor;
            }
            @if $skin-name == 'Material3' {
              background: $btn-success-active-bgcolor;
              box-shadow: $btn-keyboard-focus-box-shadow;
              color: $btn-success-color;
            }
          }

          &:active,
          &.e-active {
            @include outline-success-active;
          }

          &:disabled,
          &.e-disabled {
            @include outline-success-disabled;
          }
        }

        &.e-info {
          background: $btn-outline-bgcolor;
          @if $skin-name == 'bootstrap5' 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 {
              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
            @if $skin-name == 'FluentUI' {
              outline: none !important; /* stylelint-disable-line declaration-no-important */
            }
          }

          &:focus-visible { // only for keybord
            @if $skin-name == 'FluentUI' {
              background: $btn-outline-bgcolor;
            }
            @if $skin-name == 'Material3' {
              background: $btn-info-active-bgcolor;
              box-shadow: $btn-keyboard-focus-box-shadow;
              color: $btn-info-color;
            }
          }

          &:active,
          &.e-active {
            @include outline-info-active;
          }

          &:disabled,
          &.e-disabled {
            @include outline-info-disabled;
          }
        }

        &.e-warning {
          background: $btn-outline-bgcolor;
          @if $skin-name == 'bootstrap5' 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 {
              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
            @if $skin-name == 'FluentUI' {
              outline: none !important; /* stylelint-disable-line declaration-no-important */
            }
          }

          &:focus-visible { // only for keybord
            @if $skin-name == 'FluentUI' {
              background: $btn-outline-bgcolor;
            }
            @if $skin-name == 'Material3' {
              background: $btn-warning-active-bgcolor;
              box-shadow: $btn-keyboard-focus-box-shadow;
              color: $btn-warning-color;
            }
          }

          &:active,
          &.e-active {
            @include outline-warning-active;
          }

          &:disabled,
          &.e-disabled {
            @include outline-warning-disabled;
          }
        }

        &.e-danger {
          background: $btn-outline-bgcolor;
          @if $skin-name == 'bootstrap5' 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);
            }
            @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
            @if $skin-name == 'FluentUI' {
              outline: none !important; /* stylelint-disable-line declaration-no-important */
            }
          }

          &:focus-visible { // only for keybord
            @if $skin-name == 'FluentUI' {
              background: $btn-outline-bgcolor;
            }
            @if $skin-name == 'Material3' {
              background: $btn-danger-active-bgcolor;
              box-shadow: $btn-keyboard-focus-box-shadow;
              color: $btn-danger-color;
            }
          }

          &:active,
          &.e-active {
            @include outline-danger-active;
          }

          &: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;
          }
        }

        &: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;
        }
      }
    }
  }
}

/*! calendar bootstrap5 theme variables */
//month view
$calendar-normal-month-view-height: 32px !default;
$calendar-normal-month-view-line-height: $calendar-normal-month-view-height !default;
$calendar-normal-month-view-width: 32px !default;
$calendar-normal-month-cell-padding: 0 !default;
$calendar-bigger-table-month-padding: 0 12px 12px 12px !default;
$calendar-bigger-month-font-size: $text-base !default;
$calendar-bigger-month-view-padding: 0 !default;
$calendar-bigger-month-view-height: 38px !default;
$calendar-bigger-month-view-line-height: $calendar-bigger-month-view-height !default;
$calendar-bigger-month-view-width: 38px !default;

//header dimension
$calendar-header-font-size: $text-sm !default;
$calendar-bigger-header-padding: 10px 0 10px 15px !default;
$calendar-bigger-day-header-height: 40px !default;
$calendar-bigger-header-height: 28px !default;
$calendar-normal-header-padding: 8px 0 8px 12px !default;
$calendar-normal-day-header-height: 32px !default;
$calendar-normal-day-header-text: none !default;
$calendar-normal-header-height: 24px !default;
$calendar-bigger-header-font-size: $text-lg !default;
$calendar-normal-day-header-font-weight: $font-weight-medium !default;
$calendar-title-font-size: $text-base !default;
$calendar-title-margin-left-style: 2px !default;
$calendar-title-font-weight-style: $font-weight-bold !default;
$calendar-title-decoration-style: none !default;

// common size properties
$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-icon-padding-top: 0 !default;
$calendar-zero-value: 0 !default;
$calendar-disable-opacity: 1 !default;

//popup styles
$calendar-normal-max-width: 242px !default;
$calendar-normal-min-width: 240px !default;
$calendar-small-max-width: 200px !default;
$calendar-small-min-width: 200px !default;
$calendar-bigger-max-width: 292px !default;
$calendar-bigger-min-width: 292px !default;
$calendar-weeknumber-min-width: 300px !default;
$calendar-weeknumber-bigger-width: 325px !default;
$calendar-popup-padding: 0 !default;
$calendar-popup-bigger-padding: 0 !default;

// today button
$calendar-bigger-today-button-height: 48px !default;
$calendar-normal-today-button-height: 36px !default;

//  year decade view
//dimension
$calendar-normal-year-decade-height: 56px !default;
$calendar-normal-year-decade-width: 56px !default;
$calendar-small-year-decade-width: 46px !default;
$calendar-normal-year-decade-padding: 2px !default;
$calendar-yeardeacde-span-padding: 0 !default;
$calendar-yeardecade-padding: 0 8px 8px !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 12px 12px 12px !default;
$calendar-bigger-yeardecade-font-weight: $font-weight-normal !default;
$calendar-yeardecade-font-weight: $font-weight-normal !default;
$calendar-bigger-year-decade-height: 66px !default;
$calendar-bigger-year-decade-width: 66px !default;
$calendar-yeardecade-header-padding: 8px 0 8px 12px !default;
$calendar-bigger-yeardecade-header-padding: 10px !default;
$calendar-decade-title-left-margin-style: 15px !default;

// table related styles
$calendar-table-padding: 0 8px 8px 8px !default;
$calendar-rtl-text-indent: 12px !default;
$calendar-day-bigger-small-cell-size: 34px !default;
$calendar-rtl-bigger-small-text-indent: 12px !default;
$calendar-rtl-bigger-text-indent: 15px !default;
$calendar-title-margin-bigger-small-left-style: 5px !default;
$calendar-title-margin-small-left-style: 0 !default;

//font icons
$calendar-prev-icon: '\e910' !default;
$calendar-next-icon: '\e916' !default;
$calendar-next-prev-icon-size: 14px !default;
$calendar-icon-line-height: 1 !default;
$calendar-bigger-icon-size: 24px !default;
$calendar-normal-icon-size: 24px !default;
$calendar-spanicon-font-weight-style: $font-weight-normal !default;

//pending
$calendar-icon-font-size-style: $font-icon-14 !default;
$calendar-bigger-icon-font-size: $font-icon-16 !default;
$calendar-footer-container-padding: 8px !default;
$calendar-bigger-footer-container-padding: 16px !default;
$calendar-week-number-font-weight: $font-weight-medium !default;

// small size
$calendar-small-icon-size: 24px !default;
$calendar-small-icon-font-size-style: $font-icon-12 !default;
$calendar-small-title-font-size: $text-xs !default;
$calendar-small-icon-padding: 0 !default;
$calendar-small-header-height: 22px !default;
$calendar-small-day-header-height: 24px !default;
$calendar-small-month-view-height: 26px !default;
$calendar-small-month-view-line-height: $calendar-small-month-view-height !default;
$calendar-small-date-font-size: $text-xs !default;
$calendar-small-month-view-width: 26px !default;
$calendar-small-popup-padding: 0 !default;
$calendar-bigger-small-table-padding: 0 12px 12px 12px !default;
$calendar-bigger-small-yeardecade-font-size: $text-sm !default;
$calendar-small-font-size: $text-xs !default;

//week number
$calendar-week-number-font-size-style: $text-sm !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: 5px !default;
$calendar-icon-button-margin: 8px !default;
$calendar-bigger-icon-padding: 0 !default;
$calendar-bigger-icon-margin: 12px !default;

//thead style
$calendar-thead-padding: 0 0 6px !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-pointer-events: initial !default;
$calendar-float-right-style: right !default;
$calendar-float-left-style: left !default;
$calendar-other-month-display-style: inline-block !default;
$calendar-other-month-row-display-style: none !default;
$calendar-footer-border: 1px solid $border-light !default;
$calendar-bigger-footer-border: 1px solid $border-light !default;
$calendar-week-number-font-style: italic !default;

//dimension
$calendar-date-font-size: $text-sm !default;
$calendar-bigger-day-font-size: $text-base !default;
$calendar-link-font-weight-style: $font-weight-normal !default;
$calendar-disable-font-weight-style: $font-weight-normal !default;
$calendar-border-radius: 4px !default;

//week header font size
$calendar-bigger-week-header-font-size: $text-sm !default;

//header color
$calendar-header-font-color: $content-text-color-alt1 !default;
$calendar-header-icon-color: $icon-color !default;
$calendar-title-font-color: $content-text-color-alt1 !default;
$calendar-icon-font-color: $content-text-color-alt1 !default;
$calendar-active-icon-color: $secondary-text-color !default;
$calendar-title-hover-color: $content-text-color-alt3 !default;
$calendar-icon-hover-color: $secondary-text-color !default;
$calendar-icon-hover-bg-color: $secondary-bg-color-hover !default;
$calendar-device-icon-hover-bg-color: $secondary-bg-color-hover !default;
$calendar-default-border-color: none !default;
$calendar-icon-hover-border-color: $content-bg-color-hover !default;
$calendar-active-state-icon-bg-color: $secondary-border-color-pressed !default;

//popup styles
$calendar-border-style: 1px solid $border-light !default;
$calendar-bg-color: $flyout-bg-color !default;
$calendar-box-shadow: none !default;

//  year decade view
//color
$calendar-yeardecade-bg-color: none !default;
$calendar-yeardecade-hover-bg: $content-bg-color-hover !default;
$calendar-yeardecade-selected-hover-bg: darken($primary-bg-color, 10%) !default;

//decade view color
$calendar-other-decade-cell-color: $content-text-color-alt2 !default;

// end year decade
//other months
$calendar-other-month-date: $content-text-color-alt3 !default;
$calendar-other-month-date-hover-bg: $calendar-other-month-date !default;

// td styles
//color
$calendar-light-font: $content-text-color-alt1 !default;
$calendar-active-font-color: $secondary-text-color !default;
$calendar-active-hover-font-color: $primary-text-pressed !default;
$calendar-active-today-font-color: $primary-text-pressed !default;
$calendar-active-today-hover-font-color: $primary-text-pressed !default;
$calendar-active-bg-color: $primary-bg-color !default;
$calendar-active-bg-box-shadow: inset 1px 0 $primary-bg-color, inset 0 1px $primary-bg-color, inset -1px 0 $primary-bg-color, inset 0 -1px $primary-bg-color !default;
$calendar-active-bg-border-color: none !default;
$calendar-active-hover-bg-color: darken($primary-bg-color, 10%) !default;
$calendar-hover-color: $flyout-bg-color-hover !default;
$calendar-text-color: $content-text-color !default;
$calendar-hover-text: $calendar-text-color !default;
$calendar-focus-bg-color: $content-bg-color-hover !default;
$calendar-focused-today-bg-style: $content-bg-color-hover !default;
$calendar-focused-today-box-shadow: inset 1px 0 $primary-bg-color, inset 0 1px $primary-bg-color, inset -1px 0 $primary-bg-color, inset 0 -1px $primary-bg-color !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: $content-text-color-disabled !default;
$calendar-focused-date-bg-style: $calendar-hover-color !default;
$calendar-small-title-font-color: $content-text-color-alt1 !default;

// end td styles
//today date
$calendar-today-bg-style: none !default;
$calendar-today-bg-hover-color: $content-bg-color-alt1 !default;
$calendar-today-box-shadow: inset 2px 0 $primary-bg-color, inset 0 2px $primary-bg-color, inset -2px 0 $primary-bg-color, inset 0 -2px $primary-bg-color !default;
$calendar-today-border-color:  none !default;
$calendar-selected-border-color: none !default;

//pending
$calendar-today-color: $primary !default;
$calendar-today-focused-font-color: $content-text-color-alt1 !default;
$calendar-today-focus-color: $content-text-color-alt1 !default;

//week header
$calendar-week-header-font-color: $content-text-color-alt2 !default;
$calendar-week-header-bg-style: none !default;

//week number
$calendar-week-number-color-style: $content-text-color-disabled !default;
$calendar-week-number-font-color: $calendar-text-color !default;

//today button
$calendar-footer-background: $transparent !default;
$calendar-today-disabled-background-style: $primary-bg-color-disabled !default;
$calendar-today-disabled-border-style: $primary-border-color-disabled !default;
$calendar-today-disabled-box-shadow: none !default;
$calendar-today-disabled-color: $primary-text-disabled !default;

//today button flat button override style
$today-button-bg: $primary-bg-color !default;
$today-button-bg-border-color: $primary-border-color !default;
$today-button-text-color: $primary-text-color !default;
$today-button-hover-bg: $primary-bg-color-hover !default;
$today-button-bg-border-hover-color: $primary-border-color-hover !default;
$today-button-text-hover-color: $primary-text-hover !default;
$today-button-active-bg: $primary-bg-color-pressed !default;
$today-button-bg-border-active-color: $primary-border-color-pressed !default;
$today-button-text-active-color: $primary-text-pressed !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,
  .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: 0;
        margin-right: $calendar-icon-button-margin;
        padding: 0;
        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: 0;
      }
      #{if(&, '&', '*')} span.e-day {
        border-radius: 0;
        cursor: $calendar-cursor-pointer-style;
        display: $calendar-inline-block-style;
        font-size: $calendar-date-font-size;
        overflow: hidden;
        padding: 0;
        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' {
          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(&, '&', '*')}.e-overlay {
          background: $calendar-none-style;
          width: initial;
        }
      }

      table {
        border-collapse: separate;
        border-spacing: 0;
        border-width: 0;
        float: $calendar-float-left-style;
        margin: 0;
        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' {
          background-color: $calendar-bg-color;
        }
        @if $skin-name == 'Material3' {
          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;
      }
      #{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;
    }
  }

  //normal style
  #{&}.e-calendar,
  .e-bigger.e-small #{&}.e-calendar {
    @if $skin-name != 'Material3' {
      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: 0;
      }
      #{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' {
        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' {
        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' {
        background-color: $calendar-footer-background;
      }
      @if $skin-name == 'Material3' {
        background: $calendar-footer-background;
      }
      border-top: $calendar-footer-border;
      cursor: $calendar-cursor-default-style;
      display: $calendar-display-style;
      flex-direction: row;
      justify-content: flex-end;
      padding: $calendar-footer-container-padding;
      text-align: center;
      width: $calendar-full-width;
    }
    #{if(&, '&', '*')}.e-rtl .e-header .e-title {
      @if $skin-name == 'bootstrap5' {
        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' {
        height: $calendar-day-bigger-small-cell-size;
        width: $calendar-day-bigger-small-cell-size;
      }
    }
    #{if(&, '&', '*')} .e-header .e-title {
      @if $skin-name == 'bootstrap5' {
        margin-left: $calendar-title-margin-bigger-small-left-style;
      }
    }
  }

  //bigger style
  .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(&, '&', '*')}.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;
      line-height: $calendar-bigger-header-height;
      width: 60%;
    }
    #{if(&, '&', '*')}.e-rtl .e-header .e-title {
      line-height: $calendar-bigger-header-height;
      text-indent: 6px;
    }
    #{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: 0;
      }
      #{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' {
        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' {
        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 {
      border-top: $calendar-bigger-footer-border;
      padding: $calendar-bigger-footer-container-padding;
    }
    #{if(&, '&', '*')} .e-header .e-title {
      @if $skin-name == 'bootstrap5' {
        margin-left: $calendar-title-margin-bigger-small-left-style;
      }
    }

    #{if(&, '&', '*')}.e-rtl .e-header .e-title {
      @if $skin-name == 'bootstrap5' {
        text-indent: $calendar-rtl-bigger-text-indent;
      }
    }
  }

  // Mouse small style
  .e-small#{&}.e-calendar,
  .e-small #{&}.e-calendar {
    @if $skin-name != 'Material3' or $skin-name != 'Material3-dark' {
      max-width: $calendar-small-max-width;
      min-width: $calendar-small-min-width;
      padding: $calendar-small-popup-padding;
      min-height: 220px;
    }
    @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: 14px;
        }
      }

      #{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' {
        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' {
        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' {
        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;
  }

  .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: 392px;
  }
}


@include export-module('calendar-theme') {
  #{&}.e-calendar,
  .e-bigger.e-small #{&}.e-calendar {
    @if $skin-name == 'Material3' {
      background: $calendar-bg-color;
      border-radius: 8px;
    }
    @if $skin-name != 'Material3' {
      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 {
          color: $calendar-title-hover-color;
          cursor: pointer;
          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(&, '&', '*')} .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 {
          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 {
        #{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' {
            background-color: $calendar-hover-color;
          }
          @if $skin-name == 'Material3' {
            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' {
            background-color: $calendar-yeardecade-selected-hover-bg;
          }
          @if $skin-name == 'Material3' {
            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 {
          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(&, '&', '*')} td.e-focused-date:hover span.e-day {
          @if $skin-name != 'Material3' {
            background-color: $calendar-hover-color;
          }
          @if $skin-name == 'Material3' {
            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;
          border-radius: $calendar-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' {
            background-color: $calendar-focus-bg-color;
          }
          @if $skin-name == 'Material3' {
            background: $calendar-focus-bg-color;
          }
          border: $calendar-focus-border-color;
          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' {
            background-color: $calendar-hover-color;
          }
          @if $skin-name == 'Material3' {
            background: $calendar-hover-color;
          }
          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' {
            background-color: $calendar-active-bg-color;
          }
          @if $skin-name == 'Material3' {
            background: $calendar-active-bg-color;
          }
          border: $calendar-active-bg-border-color;
          @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3') {
            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(&, '&', '*')} td.e-selected:hover span.e-day,
        #{if(&, '&', '*')} td.e-selected.e-focused-date span.e-day {
          @if $skin-name != 'Material3' {
            background-color: $calendar-active-hover-bg-color;
          }
          @if $skin-name == 'Material3' {
            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: 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' {
            background-color: $calendar-hover-color;
          }
          @if $skin-name == 'Material3' {
            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' {
            background-color: $calendar-hover-color;
          }
          @if $skin-name == 'Material3' {
            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' {
            background-color: $calendar-focus-bg-color;
            color: $calendar-text-color;
          }
          @if $skin-name == 'Material3' {
            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' {
            background-color: $calendar-active-bg-color;
          }
          @if $skin-name == 'Material3' {
            background: $calendar-active-bg-color;
          }
          border: $calendar-selected-border-color;
          border-radius: $calendar-border-radius;
          color: $calendar-active-font-color;
        }
        #{if(&, '&', '*')} td.e-selected:not(.e-focused-date) span.e-day {
          @if ($skin-name == 'FluentUI') {
            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') {
            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') {
            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') {
            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') {
            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') {
            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') {
            color: $calendar-today-focused-font-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') {
            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') {
            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') {
            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') {
            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') {
            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' {
          /* stylelint-disable property-no-vendor-prefix */
          -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-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;
        }
      }
    }
  }

  .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' {
      background-color: $today-button-bg;
      border: 0;
      border-color: $today-button-bg-border-color;
      color: $today-button-text-color;
    }
  }

  .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' {
      background-color: $today-button-hover-bg;
      border-color: $today-button-bg-border-hover-color;
      color: $today-button-text-hover-color;
    }
  }

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

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

  .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' {
      background-color: $calendar-today-disabled-background-style;
      border-color: $calendar-today-disabled-border-style;
    }
    @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
      color: $calendar-today-disabled-color;
    }
  }
}


@include export-module('calendar-bootstrap5-icons') {

  /*! component icons */
  .e-calendar .e-header {
    #{if(&, '&', '*')} .e-date-icon-prev::before {
      content: '\e776';
    }

    #{if(&, '&', '*')} .e-date-icon-next::before {
      content: '\e729';
    }
  }
}

//Layout Variables Start
$card-img-brdr-radious: 50% !default;
$card-brdr-radious: 4px !default;
$card-action-btn-txt-transform: none !default;

// Font
$card-header-font: $text-base !default;
$card-title-font: $text-lg !default;
$card-action-btn-icon-font: $text-sm !default;
$card-action-btn-font: $text-sm !default;
$card-content-font-size: $text-sm !default;
$card-content-bigger-font-size: $text-base !default;
$card-header-title-font: $text-base !default;
$card-header-sub-title-font: $text-sm !default;

// Mouse
$card-content-line-height: $leading-normal !default;
$card-nrml-lheight: 36px !default;
$card-nrml-mheight: 36px !default;
$card-header-padding: 12px !default;
$card-header-lheight: $leading-tight !default;
$card-title-nrml-padding: 12px !default;
$card-title-nrml-lheight: $leading-normal !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-nrml-padding-bottom: 0 !default;
$card-header-txt-nrml-padding: 0 0 0 12px !default;
$card-header-txt-title-lheight: $leading-normal !default;
$card-header-txt-title-nrml-padding: 4px 0 0 !default;
$card-header-txt-subtitle-lheight: $leading-normal !default;
$card-header-image-width: 52px !default;
$card-header-image-height: 50px !default;
$card-image-mheight: 112.5px !default;
$card-image-title-lheight: 30px !default;
$card-image-title-mheight: 30px !default;
$card-action-nrml-vertical-padding: 12px !default;
$card-action-nrml-btn-vertical-margin: 0 0 0 8px !default;
$card-action-btn-nrml-height: 30px !default;
$card-action-btn-nrml-margin: 0 0 0 8px !default;
$card-action-btn-nrml-padding: 0 6px !default;
$card-nrml-content-padding: 12px !default;
$card-header-txt-nrml-title-font: $text-base !default;
$card-header-txt-nrml-subtitle-font: $text-sm !default;
$card-image-title-font: $text-base !default;
$card-action-btn-icon-width: 24px !default;
$card-action-btn-icon-height: 24px !default;

// Touch
$card-bigger-lheight: 48px !default;
$card-bigger-mheight: 48px !default;
$card-header-bigger-padding: 16px !default;
$card-header-bigger-padding-bottom: 0 !default;
$card-header-bigger-lheight: $leading-normal !default;
$card-title-bigger-margin: 16px !default;
$card-title-bigger-lheight: $leading-normal !default;
$card-hor-image-bigger-margin: 2px !default;
$card-sep-bigger-margin: 16px 0 !default;
$card-header-bigger-minheight: 30px !default;
$card-header-txt-bigger-padding: 0 0 0 16px !default;
$card-header-txt-title-bigger-lheight: $leading-normal !default;
$card-header-txt-title-bigger-padding: 8px 0 0 !default;
$card-header-txt-subtitle-bigger-lheight: $leading-normal !default;
$card-header-image-bigger-width: 55px !default;
$card-header-image-bigger-height: 60px !default;
$card-image-bigger-mheight: 150px !default;
$card-image-title-bigger-lheight: $leading-tight !default;
$card-image-title-bigger-mheight: 40px !default;
$card-img-title-bigger-padding: 12px 16px !default;
$card-action-bigger-padding: 16px !default;
$card-action-bigger-vertical-padding: 16px 20px !default;
$card-action-bigger-btn-vertical-margin: 0 0 7px 0 !default;
$card-action-btn-bigger-height: 38px !default;
$card-action-btn-bigger-margin: 0 0 0 13px !default;
$card-action-btn-bigger-padding: 0 8px !default;
$card-bigger-content-padding: 16px !default;
$card-header-txt-bigger-title-font: $text-xl !default;
$card-header-txt-bigger-subtitle-font: $text-base !default;
$card-image-title-bigger-font: 18px !default;
$card-action-btn-bigger-icon-width: 24px !default;
$card-action-btn-bigger-icon-height: 24px !default;
$card-image-title-nrml-padding: 12px 16px !default;
$card-action-nrml-padding: 12px !default;

//Layout Variables End

//Theme Variables Start
$card-highlight-color: $primary !default;
$card-bg-color: $content-bg-color !default;
$card-focus-bg-color: $content-bg-color !default;
$card-hover-bg-color: $content-bg-color !default;
$card-active-bg-color: $content-bg-color !default;
$card-focus-brdr-color: $border-light !default;
$card-hover-brdr-color: $border-dark !default;
$card-active-brdr-color: $primary !default;
$card-brdr-size: 1px !default;
$card-brdr-type: solid !default;
$card-brdr-color: $border-light !default;
$card-sep-brdr-size: 1px !default;
$card-sep-brdr-type: solid !default;
$card-sep-brdr-color: $border-light !default;
$card-image-title-color: $white !default;
$card-image-title-bg: $overlay-bg-color !default;
$card-action-btn-bg-color: $transparent !default;
$card-action-btn-font-color: $primary !default;
$card-action-btn-border: 1px solid $primary !default;
$card-action-btn-hover-bg:  $primary !default;
$card-action-btn-hover-border: 1px solid $secondary-border-color-hover !default;
$card-action-btn-hover-font: $white !default;
$card-action-btn-focus-bg: $secondary-bg-color-focus !default;
$card-action-btn-focus-border: 1px solid !default;
$card-action-btn-focus-font:  $secondary-text-color-focus !default;
$card-action-btn-pressed-bg: $secondary-bg-color-pressed !default;
$card-action-btn-pressed-border: 1px solid $secondary-border-color-pressed !default;
$card-action-btn-pressed-font: $secondary-text-color-pressed !default;
$card-font-color: $content-text-color !default;
$card-header-txt-title-color: $content-text-color !default;
$card-header-txt-subtitle-color: $content-text-color-alt2 !default;
$card-content-font-color: $content-text-color-alt1 !default;
$card-box-shadow: none !default;
$card-action-btn-icon-color: $primary !default;
$card-hover-box-shadow: none !default;

//Theme Variables End

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

  /*! card layout */
  .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: 0;
        padding-top: 0;
      }
    }

    > .e-card-title {
      line-height: $card-title-bigger-lheight;
      padding: $card-title-bigger-margin;

      + :not(.e-card-title) {
        margin-top: 0;
        padding-top: 0;
      }
    }

    &.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 == 'bootstrap4' {
        padding-bottom: $card-header-bigger-padding-bottom;
      }

      .e-card-content {
        padding-left: 0;
        padding-right: 0;
      }

      .e-card-header-caption {
        padding: $card-header-txt-bigger-padding;

        &:first-child {
          padding: 0;
        }

        .e-card-header-title {
          font-size: $card-header-txt-bigger-title-font;
          line-height: $card-header-txt-title-bigger-lheight;
        }

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

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

      .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-height;
        margin: $card-action-btn-bigger-margin;
        min-height: $card-action-btn-bigger-height;
        padding: $card-action-btn-bigger-padding;

        &:first-child {
          margin-left: 0;
        }
      }
    }

    .e-card-content {
      padding: $card-bigger-content-padding;

      + :not(.e-card-content),
      + .e-card-actions.e-card-vertical {
        margin-top: 0;
        padding-top: 0;
      }

      @if $skin-name == 'FluentUI' {
        + .e-card-header {
          padding: $card-header-bigger-whole-padding;
        }
      }
    }
  }

  .e-card {
    border-radius: $card-brdr-radious;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-family: $font-family;
    font-size: 15px;
    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: 2px;
        padding: 1px;
      }
    }

    &:active {
      @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
        border-width: 2px;
        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: 0;
        padding-top: 0;
      }
    }

    > .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: 0;
        padding-top: 0;
      }
    }

    > .e-card-header-title,
    > .e-card-title  {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .e-card-header-caption {
      line-height: normal;

      .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: normal;
      padding: 2px;
    }

    &.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: 50%;
    }

    .e-card-header {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      justify-content: center;
      line-height: normal;
      min-height: $card-header-minheight;
      padding: $card-header-nrml-padding;
      width: inherit;

      @if $skin-name == 'bootstrap5' {
        padding-bottom: $card-header-nrml-padding-bottom;
      }

      .e-card-content {
        padding-left: 0;
        padding-right: 0;
      }

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

        .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;
          font-weight: normal;
          @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
            font-weight: 600;
          }
          line-height: $card-header-txt-title-lheight;
        }

        .e-card-sub-title {
          font-size: $card-header-txt-nrml-subtitle-font;
          font-weight: normal;
          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;

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

      &.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: 0;
          }
        }
      }

      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: 4px;
        }

        @else {
          border-radius: 2px;
        }
      }

      .e-card-btn,
      a {
        font-family: $font-family;
        font-size: $card-action-btn-font;
        line-height: $card-action-btn-nrml-height;
        margin: $card-action-btn-nrml-margin;
        min-height: $card-action-btn-nrml-height;
        padding: $card-action-btn-nrml-padding;
        text-decoration: none;
        text-transform: $card-action-btn-txt-transform;

        &:first-child {
          margin-left: 0;
        }
      }
    }

    .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 {
        margin-top: 0;
        padding-top: 0;
      }
      @if $skin-name == 'FluentUI' {
        + .e-card-header {
          padding: $card-header-whole-padding;
        }
      }
    }

    @if $skin-name == 'tailwind' {
      .e-card-header .e-card-actions {
        padding: 0;
      }
    }

    .e-card-content,
    .e-card-content p {
      line-height: $card-content-line-height;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}


@include export-module('card-theme') {

  /*! 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 {
        background-color: $card-action-btn-bg-color;
        border: $card-action-btn-border;
        color: $card-action-btn-font-color;
        outline: 0;

        &:hover {
          background-color: $card-action-btn-hover-bg;
          border: $card-action-btn-hover-border;
          color: $card-action-btn-hover-font;
        }

        &:focus {
          background-color: $card-action-btn-focus-bg;
          border: $card-action-btn-focus-border;
          color: $card-action-btn-focus-font;
        }

        &:active {
          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;
    }
  }
}

//layout variables
$cbox-bigger-check-fontsize: 10px !default;
$cbox-bigger-font-size: $text-base !default;
$cbox-bigger-height: 16px !default;
$cbox-bigger-indeterminate-fontsize: 10px !default;
$cbox-bigger-indeterminate-lineheight: 14px !default;
$cbox-bigger-lineheight: 14px !default;
$cbox-bigger-margin: 12px !default;
$cbox-bigger-small-check-fontsize: 10px !default;
$cbox-bigger-small-font-size: 15px !default;
$cbox-bigger-small-height: 16px !default;
$cbox-bigger-small-indeterminate-fontsize: 10px !default;
$cbox-bigger-small-indeterminate-lineheight: 15px !default;
$cbox-bigger-small-lineheight: 15px !default;
$cbox-bigger-small-width: 16px !default;
$cbox-bigger-width: 16px !default;
$cbox-border: 1px solid !default;
$cbox-font-size: $text-sm !default;
$cbox-height: 14px !default;
$cbox-border-radius: 4px !default;
$cbox-check-fontsize: 8px !default;
$cbox-indeterminate-fontsize: 8px !default;
$cbox-indeterminate-lineheight: 13px !default;
$cbox-lineheight: 12px !default;
$cbox-margin: 8px !default;
$cbox-padding: 0 !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: $text-xs !default;
$cbox-small-height: 14px !default;
$cbox-small-indeterminate-fontsize: 8px !default;
$cbox-small-indeterminate-lineheight: 13px !default;
$cbox-small-lineheight: 13px !default;
$cbox-small-width: 14px !default;
$cbox-width: 14px !default;
$cbox-focus-outline-offset: 0 !default;
$cbox-focus-outline:  rgba($primary, .25) !default;
$cbox-border-color: $border !default;
$cbox-bgcolor: $content-bg-color !default;
$cbox-checkmark-bgcolor: $primary !default;
$cbox-checkmark-border-color: $primary !default;
$cbox-checkmark-color: $primary-text-color !default;
$cbox-checked-ripple-bgcolo: transparent !default;
$cbox-checkmark-disabled-bgcolor: $primary-light !default;
$cbox-checkmark-disabled-border-color: $primary-light !default;
$cbox-checkmark-disabled-color: $primary-text-color !default;
$cbox-checkmark-hover-bgcolor: $primary !default;
$cbox-checkmark-hover-border-color: $primary !default;
$cbox-checkmark-hover-color: $primary-text-color !default;
$cbox-color: $content-text-color !default;
$cbox-disabled-bgcolor: $content-bg-color !default;
$cbox-disabled-border-color: $border-light !default;
$cbox-disabled-color: $content-text-color-disabled !default;
$cbox-focussed-box-shadow: $shadow-focus-ring2 !default;
$cbox-hover-bgcolor: $content-bg-color !default;
$cbox-hover-border-color: $border !default;
$cbox-hover-color: $content-text-color !default;
$cbox-indeterminate-bgcolor: $primary !default;
$cbox-indeterminate-border-color: $primary !default;
$cbox-indeterminate-color: $primary-text-color !default;
$cbox-indeterminate-content: '\e7d6' !default;
$cbox-indeterminate-disabled-bgcolor: $primary-light !default;
$cbox-indeterminate-disabled-border-color: $primary-light !default;
$cbox-indeterminate-disabled-color: $primary-text-color !default;
$cbox-indeterminate-hover-color: $primary-text-color !default;
$cbox-key-focussed-bgcolor: transparent !default;
$cbox-ripple-bgcolor: transparent !default;
$cbox-focussed-bgcolor: $cbox-hover-bgcolor !default;
$cbox-focussed-border-color: $primary-border-color-pressed !default;
$cbox-focussed-checkmark-bgcolor: $primary !default;
$cbox-focussed-checkmark-border-color: $primary-border-color-hover !default;
$cbox-focussed-checkmark-color: $primary-text-color !default;
$cbox-border-style: solid !default;

//enddefault

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

  /*! checkbox layout */
  .e-checkbox-wrapper,
  .e-css.e-checkbox-wrapper {
    cursor: pointer;
    display: inline-block;
    line-height: 1;
    outline: none;
    user-select: none;
    @if $skin-name == 'FluentUI' {
      border: 1px solid transparent;
      padding: 3px;
    }
    @at-root {

      & label {
        cursor: pointer;
        display: inline-block;
        line-height: 0;
        margin: 0;
        position: relative;
        white-space: nowrap;
      }

      &:focus,
      &.e-focus {
        & .e-frame {
          box-shadow: $cbox-focussed-box-shadow;
        }
        @if $skin-name == 'FluentUI' {
          border: 1px solid $cbox-border-color;
          padding: 3px;
        }
      }

      & .e-ripple-container {
        border-radius: 50%;
        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: 50%;
          }
        }
      }

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

      & .e-checkbox {
        height: 1px;
        opacity: 0;
        position: absolute;
        width: 1px;

        +.e-label {
          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;

        +.e-label {
          margin-left: $cbox-margin;
        }

        +.e-ripple-container {
          left: auto;
        }
      }

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

        & .e-frame {
          cursor: default;
        }

        & .e-label {
          cursor: default;
        }
      }

      &.e-rtl {

        .e-ripple-container {
          right: $cbox-ripple-size;
        }

        & .e-frame {
          margin: 0;

          &: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: auto;
          }
        }

        & .e-label {
          margin-left: 0;
          margin-right: $cbox-margin;

          +.e-frame {
            margin: 0;
          }
        }

        & .e-checkbox {
          +.e-label {
            margin-left: $cbox-margin;
            margin-right: 0;
          }
        }
      }

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

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

      &: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 {
      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;
    }
  }

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

      &: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-frame {
      height: $cbox-bigger-height;
      line-height: $cbox-bigger-lineheight;
      width: $cbox-bigger-width;

      &: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-bigger-check-fontsize;
          }
        }
      }

      +.e-label {
        font-size: $cbox-bigger-font-size;
        line-height: $cbox-bigger-height;
        margin-left: $cbox-bigger-margin;
      }

      +.e-ripple-container {
        left: auto;
      }
    }

    & .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 {
        margin: 0;

        &: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 {
          margin-left: 0;
          margin-right: $cbox-bigger-margin;
        }

        +.e-ripple-container {
          left: auto;
        }

        +.e-ripple-container {
          right: auto;
        }
      }
    }

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


@include export-module('checkbox-theme') {

  /*! 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 {
          +.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-focussed-checkmark-bgcolor;
              border-color: $cbox-focussed-checkmark-border-color;
              box-shadow: $cbox-focussed-box-shadow;
              color: $cbox-indeterminate-hover-color;
            }
          }
        }
      }

      & .e-checkbox {
        &: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-focussed-checkmark-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 == 'Material3' {
              background-color: $cbox-checkmark-hover-bgcolor;
              border-color: $cbox-checkmark-hover-border-color;
            }
            @else if $skin-name == 'FluentUI' {
              border-color: $cbox-checkmark-hover-border-color;
            }
            @else {
              color: $cbox-indeterminate-hover-color;
            }
          }
        }

        & .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: 14px;
            }
            @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: 14px;
            }
            @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 {
          outline: $cbox-focus-outline;
          outline-offset: $cbox-focus-outline-offset;

          &.e-check {
            outline: $cbox-focus-outline;
            outline-offset: $cbox-focus-outline-offset;
          }
        }
      }

      .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;
              }
            }
          }
        }
        
        &.e-checkbox-disabled {
          & .e-frame {
            &.e-check {
              @if $skin-name == 'Material3' {
                line-height: 18px;
              }
            }
  
            &.e-stop {
              @if $skin-name == 'Material3' {
                line-height: 18px;
              }
            }
          }
        }
      }

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

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


@include export-module('check-box-bootstrap5-icons') {
  .e-checkbox-wrapper,
  .e-css.e-checkbox-wrapper {
    @at-root {
      & .e-check {
        &::before {
          content: '\e727';
        }
      }

      & .e-stop {
        &::before {
          content: '\e87f';
        }
      }
    }
  }
}

// layout variables
$chip-list-padding: 0 !default;
$chip-height: 24px !default;
$chip-border-radius: 4px !default;
$chip-box-shadow: none !default;
$chip-avatar-wrapper-border-radius: 0 !default;
$chip-avatar-border-radius: 0 !default;
$chip-leading-icon-border-radius: 50% !default;
$chip-delete-icon-border-radius: 50% !default;
$chip-padding: 0 8px !default;
$chip-margin: 4px !default;
$chip-overflow: hidden !default;
$chip-border-size: 1px !default;
$chip-font-size: $text-sm !default;
$chip-line-height: $leading-none !default;
$chip-font-weight: $font-weight-normal !default;
$chip-avatar-size: 24px !default;
$chip-avatar-margin: 0 3px 0 -9px !default;
$chip-avatar-content-font-size: $text-xs !default;
$chip-leading-icon-font-size: $text-xs !default;
$chip-leading-icon-size: 16px !default;
$chip-leading-icon-margin: 0 8px 0 -4px !default;
$chip-multi-selection-icon-margin: 0 4px 0 -4px !default;
$chip-multi-selection-icon-margin-top: 0 !default;
$chip-delete-icon-font-size: $text-sm !default;
$chip-delete-icon-size: 16px !default;
$chip-delete-icon-margin: 0 -4px 0 4px !default;

//RTL
$chip-rtl-avatar-wrapper-border-radius: 0 !default;
$chip-rtl-avatar-margin: 0 -9px 0 3px !default;
$chip-rtl-leading-icon-margin: 0 -4px 0 8px !default;
$chip-rtl-delete-icon-margin: 0 4px 0 -4px !default;

//Touch
$chip-touch-border-radius: 4px !default;
$chip-touch-avatar-wrapper-border-radius: 0 !default;
$chip-touch-font-size: $text-base !default;
$chip-touch-height: 32px !default;
$chip-touch-text-line-height: $leading-none !default;
$chip-touch-text-height: 19px !default;
$chip-touch-padding: 4px 12px !default;
$chip-touch-avatar-size: 32px !default;
$chip-touch-avatar-margin: 0 4px 0 -13px !default;
$chip-touch-avatar-content-font-size: $text-base !default;
$chip-touch-leading-icon-font-size: $text-base !default;
$chip-touch-leading-icon-size: 20px !default;
$chip-touch-leading-icon-margin: 0 8px 0 -4px !default;
$chip-touch-multi-selection-icon-margin: 0 4px 0 -4px !default;
$chip-touch-delete-icon-font-size: $text-base !default;
$chip-touch-delete-icon-size: 24px !default;
$chip-touch-delete-icon-margin: 0 -4px 0 8px !default;

//Touch-RTL
$chip-touch-rtl-avatar-wrapper-border-radius: 0 !default;
$chip-touch-rtl-avatar-margin: 0 -13px 0 8px !default;
$chip-touch-rtl-leading-icon-margin: 0 -4px 0 8px !default;
$chip-touch-rtl-delete-icon-margin: 0 8px 0 -4px !default;

$chip-text-height: 17px !default;

//normal
$chip-bg-color: $secondary-border-color !default;
$chip-hover-bg-color: $secondary-border-color-hover !default;
$chip-focus-bg-color: $secondary-bg-color !default;
$chip-choice-active-bg-color: $primary !default;
$chip-active-bg-color: $secondary-border-color-pressed !default;
$chip-focus-active-bg-color: $secondary-border-color-pressed !default;
$chip-choice-focus-active-bg-color: $primary !default;
$chip-pressed-bg-color: $secondary-border-color-pressed !default;
$chip-disabled-bg-color: $secondary-border-color-disabled !default;
$chip-pressed-active-bg-color: $primary !default;
$chip-avatar-bg-color: $secondary-bg-color !default;
$chip-avatar-hover-bg-color: $secondary-bg-color !default;
$chip-avatar-focus-bg-color: $secondary-bg-color !default;
$chip-avatar-active-bg-color: $secondary-bg-color !default;
$chip-avatar-choice-active-bg-color: $primary !default;
$chip-avatar-focus-active-bg-color: $content-bg-color-alt4 !default;
$chip-avatar-choice-focus-active-bg-color: $chip-choice-focus-active-bg-color !default;
$chip-avatar-pressed-bg-color: $secondary-bg-color !default;
$chip-avatar-pressed-active-bg-color: $secondary-bg-color !default;
$chip-avatar-disabled-bg-color: $chip-disabled-bg-color !default;
$chip-font-color: $secondary-text-color !default;
$chip-hover-font-color: $secondary-text-color-hover !default;
$chip-focus-font-color: $secondary-text-color !default;
$chip-active-font-color: $secondary-text-color-pressed !default;
$chip-choice-active-font-color: $primary-text-color !default;
$chip-focus-active-font-color: $secondary-text-color-hover !default;
$chip-pressed-font-color: $secondary-text-color-pressed !default;
$chip-disabled-font-color: $secondary-text-color-disabled !default;
$chip-close-icon-font-color: $secondary-text-color !default;
$chip-close-icon-hover-font-color: $secondary-text-color-hover !default;
$chip-close-icon-pressed-font-color: $secondary-text-color-pressed !default;
$chip-icon-font-color: $secondary-text-color !default;
$chip-icon-hover-font-color: $secondary-text-color-hover !default;
$chip-icon-focus-font-color: $secondary-text-color-hover !default;
$chip-icon-active-font-color: $secondary-text-color-pressed !default;
$chip-icon-focus-active-font-color: $secondary-text-color-pressed !default;
$chip-choice-icon-focus-active-font-color: $primary-text-color !default;
$chip-icon-pressed-font-color: $secondary-text-color-pressed !default;
$chip-avatar-font-color: $secondary-text-color !default;
$chip-avatar-hover-font-color: $secondary-text-color !default;
$chip-avatar-focus-font-color: $secondary-text-color !default;
$chip-avatar-active-font-color: $secondary-text-color !default;
$chip-avatar-choice-active-font-color: $primary-text-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: $secondary-text-color !default;
$chip-avatar-pressed-active-font-color: $secondary-text-color !default;
$chip-avatar-disabled-font-color: $chip-disabled-font-color !default;
$chip-border-color: $secondary-border-color !default;
$chip-hover-border-color: $secondary-border-color-hover !default;
$chip-focus-border-color: $secondary-bg-color !default;
$chip-choice-active-border-color: $chip-choice-active-bg-color !default;
$chip-active-border-color: $chip-active-bg-color !default;
$chip-choice-focus-active-border-color: $primary !default;
$chip-choice-focus-active-font-color: $primary-text-color !default;
$chip-pressed-border-color: $secondary-border-color-pressed !default;
$chip-disabled-border-color: $secondary-border-color-disabled !default;
$chip-focus-box-shadow: $secondary-shadow-focus !default;
$chip-pressed-box-shadow: $secondary-shadow-focus !default;
$chip-focus-active-border-color: $secondary-border-color-pressed !default;

//outline
$chip-outline-bg-color: transparent !default;
$chip-outline-hover-bg-color: $secondary-border-color-hover !default;
$chip-outline-focus-bg-color: $secondary-bg-color !default;
$chip-outline-choice-active-bg-color: $primary !default;
$chip-outline-active-bg-color: $secondary-border-color-pressed !default;
$chip-outline-focus-active-bg-color: $chip-outline-active-bg-color !default;
$chip-outline-choice-focus-active-bg-color: $primary !default;
$chip-outline-pressed-bg-color: $secondary-border-color-pressed !default;
$chip-outline-pressed-active-bg-color: $secondary-border-color-pressed !default;
$chip-outline-disabled-bg-color: transparent !default;
$chip-outline-avatar-bg-color: $secondary-bg-color !default;
$chip-outline-avatar-hover-bg-color: $secondary-bg-color !default;
$chip-outline-avatar-focus-bg-color: $secondary-bg-color !default;
$chip-outline-avatar-active-bg-color: $secondary-bg-color !default;
$chip-outline-avatar-choice-active-bg-color: $primary !default;
$chip-outline-avatar-focus-active-bg-color: $secondary-bg-color !default;
$chip-outline-avatar-choice-focus-active-bg-color: $primary !default;
$chip-outline-avatar-pressed-bg-color: $secondary-bg-color !default;
$chip-outline-avatar-pressed-active-bg-color: $secondary-bg-color !default;
$chip-outline-avatar-disabled-bg-color: $chip-outline-disabled-bg-color !default;
$chip-outline-font-color: $secondary-bg-color !default;
$chip-outline-hover-font-color: $secondary-text-color-hover !default;
$chip-outline-focus-font-color: $secondary-text-color !default;
$chip-outline-active-font-color: $secondary-text-color-pressed !default;
$chip-outline-choice-active-font-color: $primary-text-color !default;
$chip-outline-focus-active-font-color: $chip-outline-active-font-color !default;
$chip-outline-choice-focus-active-font-color: $chip-outline-choice-active-font-color !default;
$chip-outline-pressed-font-color: $secondary-text-color-pressed !default;
$chip-outline-disabled-font-color:  $content-text-color-disabled !default;
$chip-outline-close-icon-font-color: $secondary-bg-color !default;
$chip-outline-close-icon-hover-font-color: $secondary-text-color-hover !default;
$chip-outline-close-icon-pressed-font-color: $secondary-text-color-pressed !default;
$chip-outline-icon-font-color: $icon-color !default;
$chip-outline-icon-hover-font-color: $secondary-text-color-hover !default;
$chip-outline-icon-focus-font-color: $secondary-text-color-pressed !default;
$chip-outline-icon-active-font-color: $secondary-text-color-pressed !default;
$chip-outline-icon-focus-active-font-color: $secondary-text-color-pressed !default;
$chip-outline-choice-icon-focus-active-font-color: $primary-text-color !default;
$chip-outline-icon-pressed-font-color: $secondary-text-color-pressed !default;
$chip-outline-avatar-font-color: $secondary-text-color !default;
$chip-outline-avatar-hover-font-color: $secondary-text-color !default;
$chip-outline-avatar-focus-font-color: $secondary-text-color !default;
$chip-outline-avatar-active-font-color: $secondary-text-color !default;
$chip-outline-avatar-choice-active-font-color: $chip-outline-choice-active-font-color !default;
$chip-outline-avatar-focus-active-font-color: $secondary-text-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: $secondary-text-color !default;
$chip-outline-avatar-pressed-active-font-color: $secondary-text-color !default;
$chip-outline-avatar-disabled-font-color: $content-text-color-disabled !default;
$chip-outline-border-color: $secondary-bg-color !default;
$chip-outline-hover-border-color: $secondary-border-color-hover !default;
$chip-outline-focus-border-color: $secondary-bg-color !default;
$chip-outline-choice-active-border-color: $primary !default;
$chip-outline-active-border-color: $secondary-border-color-pressed !default;
$chip-outline-focus-active-border-color: $secondary-border-color-pressed !default;
$chip-outline-choice-focus-active-border-color: $primary !default;
$chip-outline-pressed-border-color: $secondary-border-color-pressed !default;
$chip-outline-disabled-border-color: $content-bg-color-alt3 !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 3px 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 3px !default;

//theme
//primary
$chip-primary-bg-color: $primary !default;
$chip-primary-hover-bg-color: $primary-bg-color-hover !default;
$chip-primary-focus-bg-color: $primary-bg-color-hover !default;
$chip-primary-active-bg-color: $primary-bg-color-pressed !default;
$chip-primary-focus-active-bg-color: $chip-primary-active-bg-color !default;
$chip-primary-pressed-bg-color: $primary-bg-color-pressed !default;
$chip-primary-disabled-bg-color: $primary-bg-color-disabled !default;
$chip-primary-avatar-bg-color: $chip-primary-bg-color !default;
$chip-primary-avatar-hover-bg-color: $chip-primary-hover-bg-color !default;
$chip-primary-avatar-focus-bg-color: $chip-primary-focus-bg-color !default;
$chip-primary-avatar-active-bg-color: $chip-primary-active-bg-color !default;
$chip-primary-avatar-focus-active-bg-color: $chip-primary-focus-active-bg-color !default;
$chip-primary-avatar-pressed-bg-color: $chip-primary-pressed-bg-color !default;
$chip-primary-avatar-disabled-bg-color: $chip-primary-disabled-bg-color !default;
$chip-primary-font-color: $primary-text-color !default;
$chip-primary-hover-font-color: $primary-text-color !default;
$chip-primary-focus-font-color: $primary-text-color !default;
$chip-primary-active-font-color: $primary-text-color !default;
$chip-primary-focus-active-font-color: $primary-text-color !default;
$chip-primary-pressed-font-color: $primary-text-color !default;
$chip-primary-disabled-font-color: $primary-text-color !default;
$chip-primary-close-icon-font-color: $primary-text-color !default;
$chip-primary-close-icon-hover-font-color: $primary-text-color !default;
$chip-primary-close-icon-pressed-font-color: $primary-text-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: $primary !default;
$chip-primary-hover-border-color: $primary-bg-color-hover !default;
$chip-primary-focus-border-color: $primary-bg-color-hover !default;
$chip-primary-active-border-color: $primary-bg-color-pressed !default;
$chip-primary-focus-active-border-color: $primary-bg-color-pressed !default;
$chip-primary-pressed-border-color: $primary-bg-color-pressed !default;
$chip-primary-disabled-border-color: $primary-bg-color-disabled !default;

//success
$chip-success-bg-color: $success-bg-color !default;
$chip-success-hover-bg-color: $success-bg-color-hover !default;
$chip-success-focus-bg-color: $success-bg-color-hover !default;
$chip-success-active-bg-color: $success-bg-color-pressed !default;
$chip-success-focus-active-bg-color: $success-bg-color-pressed !default;
$chip-success-pressed-bg-color: $success-bg-color-pressed !default;
$chip-success-disabled-bg-color: $success-bg-color-disabled !default;
$chip-success-avatar-bg-color: $chip-success-bg-color !default;
$chip-success-avatar-hover-bg-color: $chip-success-hover-bg-color !default;
$chip-success-avatar-focus-bg-color: $chip-success-focus-bg-color !default;
$chip-success-avatar-active-bg-color: $chip-success-active-bg-color !default;
$chip-success-avatar-focus-active-bg-color: $chip-success-focus-active-bg-color !default;
$chip-success-avatar-pressed-bg-color: $chip-success-pressed-bg-color !default;
$chip-success-avatar-disabled-bg-color: $chip-success-disabled-bg-color !default;
$chip-success-font-color: $success-text !default;
$chip-success-hover-font-color: $success-text-hover !default;
$chip-success-focus-font-color: $success-text-hover !default;
$chip-success-active-font-color: $success-text-pressed !default;
$chip-success-focus-active-font-color: $success-text-pressed !default;
$chip-success-pressed-font-color: $success-text-pressed !default;
$chip-success-disabled-font-color: $success-text-disabled !default;
$chip-success-close-icon-font-color: $success-text !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: $success-bg-color !default;
$chip-success-hover-border-color: $success-bg-color-hover !default;
$chip-success-focus-border-color: $success-bg-color-pressed !default;
$chip-success-active-border-color: $success-bg-color-pressed !default;
$chip-success-focus-active-border-color: $success-bg-color-pressed !default;
$chip-success-pressed-border-color: $success-bg-color-pressed !default;
$chip-success-disabled-border-color: $success-bg-color-disabled !default;

//info
$chip-info-bg-color: $info-bg-color !default;
$chip-info-hover-bg-color: $info-bg-color-hover !default;
$chip-info-focus-bg-color: $info-bg-color-hover !default;
$chip-info-active-bg-color: $info-bg-color-pressed !default;
$chip-info-focus-active-bg-color: $info-bg-color-pressed !default;
$chip-info-pressed-bg-color: $info-bg-color-pressed !default;
$chip-info-disabled-bg-color: $info-bg-color-disabled !default;
$chip-info-avatar-bg-color: $chip-info-bg-color !default;
$chip-info-avatar-hover-bg-color: $chip-info-hover-bg-color !default;
$chip-info-avatar-focus-bg-color: $chip-info-focus-bg-color !default;
$chip-info-avatar-active-bg-color: $chip-info-active-bg-color !default;
$chip-info-avatar-focus-active-bg-color: $chip-info-focus-active-bg-color !default;
$chip-info-avatar-pressed-bg-color: $chip-info-pressed-bg-color !default;
$chip-info-avatar-disabled-bg-color: $chip-info-disabled-bg-color !default;
$chip-info-font-color: $info-text !default;
$chip-info-hover-font-color: $info-text !default;
$chip-info-focus-font-color: $info-text !default;
$chip-info-active-font-color: $info-text-pressed !default;
$chip-info-focus-active-font-color: $info-text-pressed !default;
$chip-info-pressed-font-color: $info-text-pressed !default;
$chip-info-disabled-font-color: $info-text-disabled !default;
$chip-info-close-icon-font-color: $info-text !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: $info-bg-color !default;
$chip-info-hover-border-color: $info-bg-color-hover !default;
$chip-info-focus-border-color: $info-bg-color-hover !default;
$chip-info-active-border-color: $info-bg-color-pressed !default;
$chip-info-focus-active-border-color: $info-bg-color-pressed !default;
$chip-info-pressed-border-color: $info-bg-color-pressed !default;
$chip-info-disabled-border-color: $info-bg-color-disabled !default;

//warning
$chip-warning-bg-color: $warning-bg-color !default;
$chip-warning-hover-bg-color: $warning-bg-color-hover !default;
$chip-warning-focus-bg-color: $warning-bg-color-hover !default;
$chip-warning-active-bg-color: $warning-bg-color-pressed !default;
$chip-warning-focus-active-bg-color: $warning-bg-color-pressed !default;
$chip-warning-pressed-bg-color: $warning-bg-color-pressed !default;
$chip-warning-disabled-bg-color: $warning-bg-color-disabled !default;
$chip-warning-avatar-bg-color: $chip-warning-bg-color !default;
$chip-warning-avatar-hover-bg-color: $chip-warning-hover-bg-color !default;
$chip-warning-avatar-focus-bg-color: $chip-warning-focus-bg-color !default;
$chip-warning-avatar-active-bg-color: $chip-warning-active-bg-color !default;
$chip-warning-avatar-focus-active-bg-color: $chip-warning-focus-active-bg-color !default;
$chip-warning-avatar-pressed-bg-color: $chip-warning-pressed-bg-color !default;
$chip-warning-avatar-disabled-bg-color: $chip-warning-disabled-bg-color !default;
$chip-warning-font-color: $warning-text !default;
$chip-warning-hover-font-color: $warning-text !default;
$chip-warning-focus-font-color: $warning-text !default;
$chip-warning-active-font-color: $warning-text-pressed !default;
$chip-warning-focus-active-font-color: $warning-text-pressed !default;
$chip-warning-pressed-font-color: $warning-text-pressed !default;
$chip-warning-disabled-font-color: $warning-text-disabled !default;
$chip-warning-close-icon-font-color: $warning-text !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: $warning-bg-color !default;
$chip-warning-hover-border-color: $warning-bg-color-hover !default;
$chip-warning-focus-border-color: $warning-bg-color-hover !default;
$chip-warning-active-border-color: $warning-bg-color-pressed !default;
$chip-warning-focus-active-border-color: $warning-bg-color-pressed !default;
$chip-warning-pressed-border-color: $warning-bg-color-pressed !default;
$chip-warning-disabled-border-color: $warning-bg-color-disabled !default;

//danger
$chip-danger-bg-color: $danger-bg-color !default;
$chip-danger-hover-bg-color: $danger-bg-color-hover !default;
$chip-danger-focus-bg-color: $danger-bg-color-hover !default;
$chip-danger-active-bg-color: $danger-bg-color-pressed !default;
$chip-danger-focus-active-bg-color: $danger-bg-color-pressed !default;
$chip-danger-pressed-bg-color: $danger-bg-color-pressed !default;
$chip-danger-disabled-bg-color: $danger-border-color-disabled !default;
$chip-danger-avatar-bg-color: $danger-bg-color !default;
$chip-danger-avatar-hover-bg-color: $chip-danger-hover-bg-color !default;
$chip-danger-avatar-focus-bg-color: $chip-danger-focus-bg-color !default;
$chip-danger-avatar-active-bg-color: $chip-danger-active-bg-color !default;
$chip-danger-avatar-focus-active-bg-color: $chip-danger-focus-active-bg-color !default;
$chip-danger-avatar-pressed-bg-color: $chip-danger-pressed-bg-color !default;
$chip-danger-avatar-disabled-bg-color: $chip-danger-disabled-bg-color !default;
$chip-danger-font-color: $success-text !default;
$chip-danger-hover-font-color: $success-text !default;
$chip-danger-focus-font-color: $success-text !default;
$chip-danger-active-font-color: $danger-text-pressed !default;
$chip-danger-focus-active-font-color: $danger-text-pressed !default;
$chip-danger-pressed-font-color: $danger-text-pressed !default;
$chip-danger-disabled-font-color: $success-text !default;
$chip-danger-close-icon-font-color: $success-text !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-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-border-color: $danger-bg-color !default;
$chip-danger-hover-border-color: $danger-bg-color-hover !default;
$chip-danger-focus-border-color: $danger-bg-color-hover !default;
$chip-danger-active-border-color: $danger-bg-color-pressed !default;
$chip-danger-focus-active-border-color: $danger-bg-color-pressed !default;
$chip-danger-pressed-border-color: $danger-bg-color-pressed !default;
$chip-danger-disabled-border-color: $danger-border-color-disabled !default;

//outline-theme
//primary
$chip-outline-primary-bg-color: transparent !default;
$chip-outline-primary-hover-bg-color: $primary-bg-color-hover !default;
$chip-outline-primary-focus-bg-color: $primary-bg-color-hover !default;
$chip-outline-primary-active-bg-color: $primary-bg-color-pressed !default;
$chip-outline-primary-focus-active-bg-color: $primary-bg-color-pressed !default;
$chip-outline-primary-pressed-bg-color: $primary-bg-color-pressed !default;
$chip-outline-primary-disabled-bg-color: transparent !default;
$chip-outline-primary-avatar-bg-color: $primary !default;
$chip-outline-primary-avatar-hover-bg-color: $chip-outline-primary-avatar-bg-color !default;
$chip-outline-primary-avatar-focus-bg-color: $chip-outline-primary-focus-bg-color !default;
$chip-outline-primary-avatar-active-bg-color: $chip-outline-primary-active-bg-color !default;
$chip-outline-primary-avatar-focus-active-bg-color: $chip-outline-primary-pressed-bg-color !default;
$chip-outline-primary-avatar-pressed-bg-color: $chip-outline-primary-pressed-bg-color !default;
$chip-outline-primary-avatar-disabled-bg-color: $chip-outline-primary-disabled-bg-color !default;
$chip-outline-primary-font-color: $primary !default;
$chip-outline-primary-hover-font-color: $primary-text-color !default;
$chip-outline-primary-focus-font-color: $primary-text-color !default;
$chip-outline-primary-active-font-color: $primary-text-color !default;
$chip-outline-primary-focus-active-font-color: $primary-text-color !default;
$chip-outline-primary-pressed-font-color: $primary-text-color !default;
$chip-outline-primary-disabled-font-color: $content-text-color-disabled !default;
$chip-outline-primary-close-icon-font-color: $primary !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: $primary-text-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: $primary !default;
$chip-outline-primary-hover-border-color: $primary-bg-color-hover !default;
$chip-outline-primary-focus-border-color: $primary-bg-color-hover !default;
$chip-outline-primary-focus-active-border-color: $primary-bg-color-pressed !default;
$chip-outline-primary-active-border-color: $primary-bg-color-pressed !default;
$chip-outline-primary-pressed-border-color: $primary-bg-color-pressed !default;
$chip-outline-primary-disabled-border-color: $content-bg-color-alt3 !default;

//success
$chip-outline-success-bg-color: transparent !default;
$chip-outline-success-hover-bg-color: $success-bg-color-hover !default;
$chip-outline-success-focus-bg-color: $success-bg-color-hover !default;
$chip-outline-success-active-bg-color:  $success-bg-color-pressed !default;
$chip-outline-success-focus-active-bg-color: $success-bg-color-pressed !default;
$chip-outline-success-pressed-bg-color: $success-bg-color-pressed !default;
$chip-outline-success-disabled-bg-color: transparent !default;
$chip-outline-success-avatar-bg-color: $success !default;
$chip-outline-success-avatar-hover-bg-color: $chip-outline-success-hover-bg-color !default;
$chip-outline-success-avatar-focus-bg-color: $chip-outline-success-focus-bg-color !default;
$chip-outline-success-avatar-active-bg-color: $chip-outline-success-active-bg-color !default;
$chip-outline-success-avatar-focus-active-bg-color: $chip-outline-success-focus-active-bg-color !default;
$chip-outline-success-avatar-pressed-bg-color: $chip-outline-success-pressed-bg-color !default;
$chip-outline-success-avatar-disabled-bg-color: $chip-outline-success-disabled-bg-color !default;
$chip-outline-success-font-color: $success !default;
$chip-outline-success-hover-font-color: $success-text-hover !default;
$chip-outline-success-focus-font-color: $success-text-hover !default;
$chip-outline-success-active-font-color: $success-text-pressed !default;
$chip-outline-success-focus-active-font-color: $success-text-pressed !default;
$chip-outline-success-pressed-font-color: $success-text-pressed !default;
$chip-outline-success-disabled-font-color: $content-text-color-disabled !default;
$chip-outline-success-close-icon-font-color: $success !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: $success-text !default;
$chip-outline-success-avatar-hover-font-color: $chip-outline-success-hover-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: $success !default;
$chip-outline-success-hover-border-color: $success-bg-color-hover !default;
$chip-outline-success-focus-border-color: $success-bg-color-hover !default;
$chip-outline-success-active-border-color: $success-bg-color-pressed !default;
$chip-outline-success-focus-active-border-color: $success-bg-color-pressed !default;
$chip-outline-success-pressed-border-color: $success-bg-color-pressed !default;
$chip-outline-success-disabled-border-color: $content-bg-color-alt3 !default;

//info
$chip-outline-info-bg-color: transparent !default;
$chip-outline-info-hover-bg-color: $info-bg-color-hover !default;
$chip-outline-info-focus-bg-color: $info-bg-color-hover !default;
$chip-outline-info-active-bg-color: $info-bg-color-pressed !default;
$chip-outline-info-focus-active-bg-color: $info-bg-color-pressed !default;
$chip-outline-info-pressed-bg-color: $info-bg-color-pressed !default;
$chip-outline-info-disabled-bg-color: transparent !default;
$chip-outline-info-avatar-bg-color: $info !default;
$chip-outline-info-avatar-hover-bg-color: $chip-outline-info-hover-bg-color !default;
$chip-outline-info-avatar-focus-bg-color: $chip-outline-info-focus-bg-color !default;
$chip-outline-info-avatar-active-bg-color: $chip-outline-info-active-bg-color !default;
$chip-outline-info-avatar-focus-active-bg-color: $chip-outline-info-focus-active-bg-color !default;
$chip-outline-info-avatar-pressed-bg-color: $chip-outline-info-pressed-bg-color !default;
$chip-outline-info-avatar-disabled-bg-color: $chip-outline-info-disabled-bg-color !default;
$chip-outline-info-font-color: $info-dark !default;
$chip-outline-info-hover-font-color: $info-text !default;
$chip-outline-info-focus-font-color: $info-text !default;
$chip-outline-info-active-font-color: $info-text-pressed !default;
$chip-outline-info-focus-active-font-color: $info-text-pressed !default;
$chip-outline-info-pressed-font-color: $info-text-pressed !default;
$chip-outline-info-disabled-font-color: $content-text-color-disabled !default;
$chip-outline-info-close-icon-font-color: $info-dark !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: $info-text !default;
$chip-outline-info-avatar-hover-font-color: $chip-outline-info-hover-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: $content-text-color-disabled !default;
$chip-outline-info-border-color: $info !default;
$chip-outline-info-hover-border-color: $info-bg-color-hover !default;
$chip-outline-info-focus-border-color: $info-bg-color-hover !default;
$chip-outline-info-active-border-color: $info-bg-color-pressed !default;
$chip-outline-info-focus-active-border-color: $info-bg-color-pressed !default;
$chip-outline-info-pressed-border-color: $info-bg-color-pressed !default;
$chip-outline-info-disabled-border-color: $content-bg-color-alt3 !default;

//warning
$chip-outline-warning-bg-color: transparent !default;
$chip-outline-warning-hover-bg-color: $warning-bg-color-hover !default;
$chip-outline-warning-focus-bg-color: $warning-bg-color-hover !default;
$chip-outline-warning-active-bg-color: $warning-bg-color-pressed !default;
$chip-outline-warning-focus-active-bg-color: $warning-bg-color-pressed !default;
$chip-outline-warning-pressed-bg-color: $warning-bg-color-pressed !default;
$chip-outline-warning-disabled-bg-color: transparent !default;
$chip-outline-warning-avatar-bg-color: $warning !default;
$chip-outline-warning-avatar-hover-bg-color: $chip-outline-warning-hover-bg-color !default;
$chip-outline-warning-avatar-focus-bg-color: $chip-outline-warning-focus-bg-color !default;
$chip-outline-warning-avatar-active-bg-color: $chip-outline-warning-active-bg-color !default;
$chip-outline-warning-avatar-focus-active-bg-color: $chip-outline-warning-focus-active-bg-color !default;
$chip-outline-warning-avatar-pressed-bg-color: $chip-outline-warning-pressed-bg-color !default;
$chip-outline-warning-avatar-disabled-bg-color: $chip-outline-warning-disabled-bg-color !default;
$chip-outline-warning-font-color: $warning-dark !default;
$chip-outline-warning-hover-font-color: $warning-text !default;
$chip-outline-warning-focus-font-color: $warning-text !default;
$chip-outline-warning-active-font-color: $warning-text-pressed !default;
$chip-outline-warning-focus-active-font-color: $warning-text-pressed !default;
$chip-outline-warning-pressed-font-color: $warning-text-pressed !default;
$chip-outline-warning-disabled-font-color: $content-text-color-disabled !default;
$chip-outline-warning-close-icon-font-color: $warning-dark !default; //not added
$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: $warning-text !default;
$chip-outline-warning-avatar-hover-font-color: $chip-outline-warning-hover-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; //not added
$chip-outline-warning-border-color: $warning !default;
$chip-outline-warning-hover-border-color: $warning-bg-color-hover !default;
$chip-outline-warning-focus-border-color: $warning-bg-color-hover !default;
$chip-outline-warning-active-border-color: $warning-bg-color-pressed !default;
$chip-outline-warning-focus-active-border-color: $warning-bg-color-pressed !default;
$chip-outline-warning-pressed-border-color: $warning-bg-color-pressed !default;
$chip-outline-warning-disabled-border-color: $content-bg-color-alt3 !default;

//danger
$chip-outline-danger-bg-color: transparent !default;
$chip-outline-danger-hover-bg-color: $danger-bg-color-hover !default;
$chip-outline-danger-focus-bg-color: $danger-bg-color-hover !default;
$chip-outline-danger-active-bg-color: $danger-bg-color-pressed !default;
$chip-outline-danger-focus-active-bg-color: $danger-bg-color-pressed !default;
$chip-outline-danger-pressed-bg-color: $danger-bg-color-pressed !default;
$chip-outline-danger-disabled-bg-color: transparent !default;
$chip-outline-danger-avatar-bg-color: $danger !default;
$chip-outline-danger-avatar-hover-bg-color: $chip-outline-danger-hover-bg-color !default;
$chip-outline-danger-avatar-focus-bg-color: $chip-outline-danger-focus-bg-color !default;
$chip-outline-danger-avatar-active-bg-color: $chip-outline-danger-active-bg-color !default;
$chip-outline-danger-avatar-focus-active-bg-color: $chip-outline-danger-focus-active-bg-color !default;
$chip-outline-danger-avatar-pressed-bg-color: $chip-outline-danger-pressed-bg-color !default;
$chip-outline-danger-avatar-disabled-bg-color: $chip-outline-danger-disabled-bg-color !default;
$chip-outline-danger-font-color: $danger !default;
$chip-outline-danger-hover-font-color: $success-text !default;
$chip-outline-danger-focus-font-color: $success-text !default;
$chip-outline-danger-active-font-color: $danger-text-pressed !default;
$chip-outline-danger-focus-active-font-color: $danger-text-pressed !default;
$chip-outline-danger-pressed-font-color: $danger-text-pressed !default;
$chip-outline-danger-disabled-font-color: $content-text-color-disabled !default;
$chip-outline-danger-close-icon-font-color: $danger !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: $danger-text !default;
$chip-outline-danger-avatar-hover-font-color: $chip-outline-danger-hover-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: $danger !default;
$chip-outline-danger-hover-border-color: $danger-bg-color-hover !default;
$chip-outline-danger-focus-border-color: $danger-bg-color-hover !default;
$chip-outline-danger-active-border-color: $danger-bg-color-pressed !default;
$chip-outline-danger-focus-active-border-color: $danger-bg-color-pressed !default;
$chip-outline-danger-pressed-border-color: $danger-bg-color-pressed !default;
$chip-outline-danger-disabled-border-color: $content-bg-color-alt3 !default;

// box shadows
// primary
$chip-primary-box-shadow: $shadow-focus-ring1 !default;

// success
$chip-success-box-shadow: $success-shadow-focus !default;

// danger
$chip-danger-box-shadow: $danger-shadow-focus !default;

// warning
$chip-warning-box-shadow: $warning-shadow-focus !default;

// info
$chip-info-box-shadow: $info-shadow-focus !default;

/* stylelint-disable property-no-vendor-prefix */
@include export-module('chip-layout') {
  .e-chip-list {
    display: flex;
    padding: $chip-list-padding;

    &.e-chip,
    .e-chip {
      -webkit-tap-highlight-color: transparent;
      align-items: center;
      border: $chip-border-size solid;
      border-radius: $chip-border-radius;
      box-shadow: $chip-box-shadow;
      box-sizing: border-box;
      cursor: pointer;
      display: inline-flex;
      font-size: $chip-font-size;
      font-weight: $chip-font-weight;
      height: $chip-height;
      justify-content: center;
      line-height: $chip-line-height;
      margin: $chip-margin;
      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 {
        align-items: center;
        background-size: cover;
        border-radius: $chip-avatar-border-radius;
        display: flex;
        font-size: $chip-avatar-content-font-size;
        height: $chip-avatar-size;
        justify-content: center;
        line-height: 1;
        margin: $chip-avatar-margin;
        overflow: hidden;
        width: $chip-avatar-size;
      }

      .e-chip-avatar-wrap,
      &.e-chip-avatar-wrap {
        border-radius: $chip-avatar-wrapper-border-radius;
      }

      .e-chip-icon {
        align-items: center;
        background-size: cover;
        border-radius: $chip-leading-icon-border-radius;
        display: flex;
        font-size: $chip-leading-icon-font-size;
        height: $chip-leading-icon-size;
        justify-content: center;
        line-height: 1;
        margin: $chip-leading-icon-margin;
        overflow: hidden;
        width: $chip-leading-icon-size;
      }

      .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 {
        align-items: center;
        background-size: cover;
        border-radius: $chip-delete-icon-border-radius;
        display: flex;
        font-size: $chip-delete-icon-font-size;
        height: $chip-delete-icon-size;
        justify-content: center;
        line-height: 1;
        margin: $chip-delete-icon-margin;
        overflow: hidden;
        width: $chip-delete-icon-size;
        @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 {
        align-items: center;
        background-size: cover;
        border-radius: $chip-leading-icon-border-radius;
        display: flex;
        font-size: $chip-leading-icon-font-size;
        height: $chip-leading-icon-size;
        justify-content: center;
        line-height: 1;
        margin: $chip-leading-icon-margin;
        overflow: hidden;
        width: $chip-leading-icon-size;
      }

      .trailing-icon-url {
        align-items: center;
        background-size: cover;
        border-radius: $chip-delete-icon-border-radius;
        display: flex;
        font-family: 'e-icons';
        font-size: $chip-delete-icon-font-size;
        height: $chip-delete-icon-size;
        justify-content: center;
        line-height: 1;
        margin: $chip-delete-icon-margin;
        overflow: hidden;
        width: $chip-delete-icon-size;
      }
    }

    .e-chip.e-outline {
      .e-chip-avatar {
        @if ($skin-name == 'FluentUI') {
          border-radius: $chip-avatar-wrapper-border-radius;
          height: $chip-outline-avatar-size;
          width: $chip-outline-avatar-size;
        }
      }
    }

    &:not(.e-chip) {
      flex-wrap: wrap;
    }

    &.e-multi-selection .e-chip {
      &::before {
        align-items: center;
        display: flex;
        font-family: 'e-icons';
        height: $chip-leading-icon-size;
        justify-content: center;
        line-height: 1;
        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);
        width: $chip-leading-icon-size;
      }

      &:not(.e-chip-icon-wrap):not(.e-chip-avatar-wrap) {
        &::before {
          width: 0;
        }
      }

      &.e-chip-icon-wrap,
      &.e-chip-avatar-wrap {
        &::before {
          display: none;
        }
      }

      &.e-chip-avatar-wrap {
        &::before {
          height: $chip-avatar-size;
          margin: $chip-avatar-margin;
          margin-top: $chip-multi-selection-icon-margin-top;
          width: $chip-avatar-size;
        }
      }

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

  .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' {
        line-height: $chip-touch-text-line-height;
      }
    }

    .e-chip-avatar {
      font-size: $chip-touch-avatar-content-font-size;
      height: $chip-touch-avatar-size;
      margin: $chip-touch-avatar-margin;
      width: $chip-touch-avatar-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;
      height: $chip-touch-leading-icon-size;
      margin: $chip-touch-leading-icon-margin;
      width: $chip-touch-leading-icon-size;
    }

    .e-chip-delete {
      font-size: $chip-touch-delete-icon-font-size;
      height: $chip-touch-delete-icon-size;
      @if $skin-name == 'Material3' {
        line-height: $chip-touch-delete-icon-height;
        height: $chip-touch-delete-icon-height;
      }
      margin: $chip-touch-delete-icon-margin;
      width: $chip-touch-delete-icon-size;

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

    .trailing-icon-url {
      font-size: $chip-touch-delete-icon-font-size;
      height: $chip-touch-delete-icon-size;
      margin: $chip-touch-delete-icon-margin;
      width: $chip-touch-delete-icon-size;
    }

    &.e-multi-selection .e-chip {
      &::before {
        height: $chip-touch-leading-icon-size;
        margin: $chip-touch-multi-selection-icon-margin;
        margin-top: $chip-multi-selection-icon-margin-top;
        width: $chip-touch-leading-icon-size;
      }

      &.e-chip-avatar-wrap {
        &::before {
          height: $chip-touch-avatar-size;
          margin: $chip-touch-avatar-margin;
          margin-top: $chip-multi-selection-icon-margin-top;
          width: $chip-touch-avatar-size;
        }
      }

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


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

@include export-module('chip-theme') {
  .e-chip-list {
    &.e-chip,
    & .e-chip {
      @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 == '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);
          box-shadow: $chip-focus-box-shadow;
        }
        @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);
          box-shadow: $chip-focus-box-shadow;
        }
        @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') {
          @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);
          box-shadow: none;
        }
        @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);
          box-shadow: none;
        }
        @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;
        }
      }

      &.e-focused.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);
          box-shadow: $chip-focus-box-shadow;
        }
        @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);
          box-shadow: $chip-focus-box-shadow;
        }
      }

      &: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') {
          opacity: .65;
          pointer-events: none;
        }
        @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-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-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);
        }

        &.e-focused.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;
          }
        }

        &: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') {
            opacity: .65;
            pointer-events: none;
          }
          @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-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') {
            opacity: .65;
            pointer-events: none;
          }
          @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-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);

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

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

      &: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 {
      &.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-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);
          }
        }

        &.e-focused.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);
          }
        }

        &: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') {
            opacity: .65;
            pointer-events: none;
          }
          @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-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 {
            @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);
          }

          &.e-focused.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);
            }
          }

          &: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') {
              opacity: .65;
              pointer-events: none;
            }
            @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-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-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);
          }
        }

        &.e-focused.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);
          }
        }

        &: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') {
            opacity: .65;
            pointer-events: none;
          }
          @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-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 {
            @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);
          }

          &.e-focused.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);
            }
          }

          &: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') {
              opacity: .65;
              pointer-events: none;
            }
            @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-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-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);
          }
        }

        &.e-focused.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);
          }
        }

        &: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') {
            opacity: .65;
            pointer-events: none;
          }
          @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-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 {
            @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);
          }

          &.e-focused.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);
            }
          }

          &: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') {
              opacity: .65;
              pointer-events: none;
            }
            @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-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-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);
          }
        }

        &.e-focused.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);
          }
        }

        &: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') {
            opacity: .65;
            pointer-events: none;
          }
          @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-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 {
            @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);
          }

          &.e-focused.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);
            }
          }

          &: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') {
              opacity: .65;
              pointer-events: none;
            }
            @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-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-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);
          }
        }

        &.e-focused.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);
          }
        }

        &: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') {
            opacity: .65;
            pointer-events: none;
          }
          @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-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-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);
          }

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

          &: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') {
              opacity: .65;
              pointer-events: none;
            }
            @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-chip-list {
  .e-chip-delete {
    &.e-dlt-btn::before {
      content: '\e7e7';
      font-size: 10px;
    }
  }

  &.e-multi-selection .e-chip {
    &::before {
      content: '\e774';
    }
  }
}

//layout variables
$drop-down-btn-arrow-content: '\e70d' !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: $text-base !default;
$drop-down-btn-bigger-li-height: 32px !default;
$drop-down-btn-bigger-max-width: 202px !default;
$drop-down-btn-bigger-min-width: 112px !default;
$drop-down-btn-icon-font-size: $text-sm !default;
$drop-down-btn-icon-margin-right: 11px !default;
$drop-down-btn-bigger-icon-margin-right: 12px !default;
$drop-down-btn-li-border-width: 1px !default;
$drop-down-btn-li-height: 30px !default;
$drop-down-btn-li-padding: 0 12px !default;
$drop-down-btn-bigger-li-padding: 0 16px !default;
$drop-down-btn-small-li-padding: 0 8px !default;
$drop-down-btn-max-width: 178px !default;
$drop-down-btn-menu-icon-bigger-font-size: 22px !default;
$drop-down-btn-menu-icon-font-size: $text-lg !default;
$drop-down-btn-min-width: 120px !default;
$drop-down-btn-seperator-padding: 3px 0 !default;
$drop-down-btn-sub-ul-box-shadow: none !default;
$drop-down-btn-ul-border-radius: 4px !default;
$drop-down-btn-ul-padding: 4px 0 !default;
$drop-down-btn-ul-bigger-padding: 8px 0 !default;
$drop-down-btn-ul-small-padding: 4px 0 !default;
$drop-down-btn-caret-icon-font-size: $text-xxs !default;
$drop-down-btn-icon-font-size-bigger: $text-base !default;
$drop-down-btn-caret-icon-font-size-bigger: $text-xs !default;
$drop-down-btn-box-shadow: $secondary-shadow-focus !default;
$drop-down-btn-popup-margin-top: 2px !default;
$drop-down-btn-bigger-popup-margin-top: 4px !default;
$drop-down-btn-ul-border: 1px solid $border-light !default;
$drop-down-btn-li-box-shadow: none !default;
$drop-down-btn-li-border-style: solid !default;
$drop-down-btn-color: $content-text-color !default;
$drop-down-btn-disable-text: $secondary-text-color-disabled !default;
$drop-down-btn-font-size: $text-sm !default;
$drop-down-btn-font-weight: $font-weight-normal !default;
$drop-down-btn-li-bgcolor: $content-bg-color-hover !default;
$drop-down-btn-ul-bgcolor: $flyout-bg-color !default;
$drop-down-btn-li-border-color: $border-light !default;
$drop-down-btn-selected-color: $content-text-color-selected !default;
$drop-down-btn-parent-ul-box-shadow: none !default;
$drop-down-btn-li-focus-bgcolor: $content-bg-color-hover !default;
$drop-down-btn-li-selection-bgcolor: $content-bg-color-selected !default;
$drop-down-btn-li-selection-font-color: $content-text-color !default;
$drop-down-btn-menu-icon-color: $icon-color !default;
$drop-down-btn-menu-icon-disabled-color: $secondary-text-color-disabled !default;
$drop-down-btn-li-hover-bgcolor: $flyout-bg-color-hover !default;

@include export-module('drop-down-button-layout') {

  /*! drop-down button layout */
  .e-dropdown-btn,
  .e-dropdown-btn.e-btn {
    @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' {
      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;
      padding: 7px 16px;
    }

    &:hover {
      @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'Material3' {
        box-shadow: none;
      }
    }

    &:focus {
      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' {
        box-shadow: $drop-down-btn-box-shadow;
      }
      @else {
        box-shadow: none;
      }
    }

    &:focus-visible { // only for keybord
      @if $skin-name == 'Material3' {
        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: 1;
      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: 1;
        padding: $drop-down-btn-vertical-btn-padding;
      }
    }
  }

  .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: 1;
      padding: $drop-down-btn-vertical-bigger-padding;
    }

    &.e-small {
      &.e-vertical {
        line-height: 1;
        padding: $drop-down-btn-vertical-bigger-padding;
      }
    }
  }

  .e-dropdown-popup {
    position: absolute;
    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' 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;
    }

    & 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: 0;
      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;

        &.e-url {
          padding: 0;
        }

        & .e-menu-url {
          display: block;
          padding: $drop-down-btn-li-padding;
          text-decoration: none;
          width: 100%;
        }

        & .e-menu-icon {
          float: left;
          font-size: $drop-down-btn-menu-icon-font-size;
          line-height: $drop-down-btn-li-height;
          margin-right: $drop-down-btn-icon-margin-right;
          vertical-align: middle;
          width: 1em;
        }

        &.e-disabled {
          cursor: auto;
          pointer-events: none;
          @if $skin-name == 'Material3' {
            box-shadow: $drop-down-btn-sub-ul-box-shadow;
          }
        }

        &.e-separator {
          border-bottom-style: $drop-down-btn-li-border-style;
          border-bottom-width: $drop-down-btn-li-border-width;
          cursor: auto;
          height: auto;
          line-height: normal;
          margin: $drop-down-btn-seperator-padding;
          pointer-events: none;
        }
      }
    }

    &.e-transparent {
      background: transparent;
      box-shadow: none;

      & .e-dropdown-menu {
        border: 0;
        height: 1px;
        min-width: 0;
        padding: 0;
        width: 1px;
      }
    }
  }

  .e-rtl.e-dropdown-popup .e-item {
    & .e-menu-icon {
      float: right;
      margin-left: $drop-down-btn-icon-margin-right;
      margin-right: 0;
    }
  }

  #{if(&, '&', '*')}.e-bigger .e-dropdown-popup {
    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' 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;
    max-width: $drop-down-btn-bigger-max-width;
    min-width: $drop-down-btn-bigger-min-width;
    padding: $drop-down-btn-ul-bigger-padding;
    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
      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;
      line-height: $drop-down-btn-bigger-li-height;
      padding: $drop-down-btn-bigger-li-padding;

      &.e-url {
        padding: 0;
      }

      & .e-menu-icon {
        font-size: $drop-down-btn-menu-icon-bigger-font-size;
        line-height: $drop-down-btn-bigger-li-height;
      }

      &.e-separator {
        height: auto;
        line-height: normal;
      }
    }
  }
}


@include export-module('drop-down-button-theme') {

  /*! drop-down button theme */
  .e-dropdown-popup {
    @if $skin-name == 'Material3' {
      background: $drop-down-btn-ul-bgcolor;
    }
    @else {
      background-color: $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 {
          background-color: $drop-down-btn-li-focus-bgcolor;
          box-shadow: $drop-down-btn-li-box-shadow;
        }

        &:hover {
          @if $skin-name == 'bootstrap5' {
            background-color: $drop-down-btn-li-hover-bgcolor;
          }
          @else {
            background-color: $drop-down-btn-li-bgcolor;
          }
          color: $drop-down-btn-li-selection-font-color;
        }

        &:active,
        &.e-selected {
          background-color: $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;
            }
          }
        }
      }

      & .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-color: rgba(transparent, .056);
        border-color: transparent;
        box-shadow: none;
        color: inherit;
      }
    }
  }
}


@include export-module('drop-down-button-bootstrap5-icons') {
  .e-dropdown-btn,
  .e-dropdown-btn.e-btn {
    .e-caret {
      &::before {
        content: '\e70d';
      }
    }
  }
}

//layout variables
$split-btn-zindex: 2 !default;
$split-btn-border-radius: 4px !default;
$split-btn-focus-outline-offset: 0 !default;
$split-btn-vertical-secondary-icon-line-height: .334em !default;
$split-btn-seperator-border: 1px solid !default;
$split-btn-sec-btn-margin-left: -1px !default;
$split-btn-icon-btn-padding: 10px !default;
$split-btn-icon-btn-padding-bigger: 12px !default;
$split-btn-focus-border-color: $secondary-border-color !default;
$split-btn-focus-vertical-border-color: $secondary-border-color !default;
$split-btn-seperator-border-color: $secondary-border-color !default;
$split-btn-seperator-default-border-color: $secondary-border-color !default;
$split-btn-seperator-vertical-border-color: $secondary-border-color !default;
$split-btn-hover-border-color: $secondary-border-color !default;
$split-btn-hover-vertical-border-color: $secondary-border-color !default;
$split-btn-active-border-color: $secondary-bg-color-pressed !default;
$split-btn-active-vertical-border-color: $secondary-bg-color-pressed !default;
$split-btn-disabled-vertical-border-color: $secondary-border-color !default;
$split-btn-active-box-shadow: $secondary-shadow-focus !default;
$split-btn-disabled-left-border-color: $secondary-border-color !default;
$split-btn-hover-left-border-color: $secondary-border-color !default;
$split-btn-focus-left-border-color: $secondary-border-color !default;
$split-btn-active-left-border-color: $secondary-border-color !default;

@include export-module('split-button-layout') {

  /*! splitbutton layout */
  .e-split-btn-wrapper {
    display: inline-flex;
    white-space: nowrap;
    width: min-content;
    @if $skin-name == 'Material3' {
      border-radius: 4px;
      box-shadow: $btn-box-shadow;
    }

    .e-split-btn {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
      text-transform: none;
      z-index: 1;
      @if $skin-name == 'bootstrap4' {
        padding-left: $split-btn-icon-btn-padding;
        padding-right: $split-btn-icon-btn-padding;
      }
      @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
        padding-left: 12px;
        padding-right: 12px;
      }
      @else if $skin-name == 'FluentUI' {
        padding: 3px 7px;
      }
      @if $skin-name == 'Material3' {
        box-shadow: none;
      }
      @else {
        padding-left: 10px;
        padding-right: 10px;
      }

      &:focus {
        outline-offset: $split-btn-focus-outline-offset;
      }

      &:hover {
        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' {
          box-shadow: none;
        }
      }

      &:focus {
        @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
          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;
        z-index: $split-btn-zindex;
      }

      &.e-top-icon-btn {
        padding-bottom: 10px;
        padding-top: 10px;
      }

      .e-btn-icon {
        font-size: $drop-down-btn-icon-font-size;
        margin-left: 0;
        @if $skin-name == 'FluentUI' {
          padding-right: 4px;
        }
        @else {
          padding-right: 8px;
        }
        width: auto;
        @if $skin-name == 'Material3' {
          border-radius: $btn-border-radius;
        }
      }

      .e-icon-top {
        padding-bottom: 4px;
        padding-right: 0;
      }

      &.e-icon-btn {
        padding-left: $split-btn-icon-btn-padding;
        padding-right: $split-btn-icon-btn-padding;

        .e-btn-icon {
          padding-right: 0;
        }
      }
    }

    .e-dropdown-btn {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
      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: 4px;
        padding-right: 4px;
      }
      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
        z-index: 1;
      }

      &:focus,
      &:hover {
        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' 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 {
      @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' and $theme-name != 'Material3' {
        box-shadow: none;
      }

      &:hover {
        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' {
          box-shadow: none;
        }
      }

      &:focus {
        @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
          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' {
          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: 0;
        border-bottom-right-radius: $split-btn-border-radius;
        border-top-left-radius: 0;
        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 if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          padding-left: 12px;
          padding-right: 12px;
        }
        @if $skin-name == 'Material3' {
          border-radius: 4px;
        }
        @else {
          padding-left: 4px;
          padding-right: 10px;
        }

        .e-btn-icon {
          margin-right: 0;
          @if $skin-name == 'FluentUI' {
            padding-left: 4px;
          }
          @else {
            padding-left: 8px;
          }
          padding-right: 0;
          @if $skin-name == 'Material3' {
            border-radius: $btn-border-radius;
          }
        }

        .e-icon-top {
          padding-left: 0;
        }

        &.e-icon-btn {
          padding-left: $split-btn-icon-btn-padding;
          padding-right: $split-btn-icon-btn-padding;

          .e-btn-icon {
            padding-left: 0;
          }
        }
      }

      .e-dropdown-btn {
        border-bottom-left-radius: $split-btn-border-radius;
        border-bottom-right-radius: 0;
        border-top-left-radius: $split-btn-border-radius;
        border-top-right-radius: 0;
        margin-left: 0;
        @if $skin-name == 'Material3' {
          border-radius: 4px;
          box-shadow: none;
        }
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          z-index: 1;
        }
      }
    }

    &.e-vertical {
      display: inline-block;

      .e-split-btn,
      .e-dropdown-btn {
        display: block;
        width: 100%;
      }

      .e-split-btn {
        border-bottom-left-radius: 0;
        border-top-right-radius: $split-btn-border-radius;
        line-height: 1;
        @if $skin-name == 'bootstrap4'or $skin-name == 'tailwind' {
          padding-bottom: $split-btn-icon-btn-padding;
          padding-right: $split-btn-icon-btn-padding;
        }
        @if $skin-name == 'Material3' {
          border-radius: 4px;
          box-shadow: none;
        }
        @else {
          padding-bottom: 4px;
          padding-right: 10px;
        }

        .e-icon-top {
          padding-bottom: 4px;
        }
      }

      .e-dropdown-btn {
        border-bottom-left-radius: $split-btn-border-radius;
        border-top-right-radius: 0;
        line-height: $split-btn-vertical-secondary-icon-line-height;
        margin-left: 0;
        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;
        }
        @if $skin-name == 'Material3' {
          border-radius: 4px;
          box-shadow: none;
        }
        @else {
          padding-bottom: 4px;
          padding-top: 4px;
        }

        .e-icon-bottom {
          padding-top: 0;
        }
      }

      &.e-rtl {
        .e-split-btn {
          border-bottom-right-radius: 0;
          border-top-left-radius: $split-btn-border-radius;
          margin-left: 0;
        }

        .e-dropdown-btn {
          border-bottom-right-radius: $split-btn-border-radius;
          border-top-left-radius: 0;
        }
      }
    }
  }

  .e-bigger .e-split-btn-wrapper,
  .e-bigger.e-split-btn-wrapper {
    @if $skin-name == 'Material3' {
      border-radius: 4px;
      box-shadow: $btn-box-shadow;
    }
    .e-split-btn {
      @if $skin-name == 'Material3' {
        border-radius: 4px;
        box-shadow: none;
      }
      @if $skin-name == 'bootstrap4'or $skin-name == 'FluentUI' {
        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: 16px;
        padding-right: 16px;
      }
      @else {
        padding-left: 12px;
        padding-right: 6px;
      }

      &.e-top-icon-btn {
        padding-bottom: 12px;
        padding-top: 12px;
      }

      .e-btn-icon {
        font-size: $drop-down-btn-icon-font-size-bigger;
        margin-left: 0;
        @if $skin-name == 'FluentUI' {
          padding-right: 8px;
        }
        @else {
          padding-right: 10px;
        }
        width: auto;
        @if $skin-name == 'Material3' {
          border-radius: 4px;
        }
      }

      .e-icon-top {
        padding-bottom: 6px;
        padding-right: 0;
      }

      &.e-icon-btn {
        padding-left: $split-btn-icon-btn-padding-bigger;
        padding-right: $split-btn-icon-btn-padding-bigger;

        .e-btn-icon {
          padding-right: 0;
        }
      }
    }

    .e-dropdown-btn {
      @if $skin-name == 'bootstrap4' {
        padding-left: 10px;
        padding-right: 10px;
      }
      @else {
        padding-left: 4px;
        padding-right: 4px;
      }
      @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 if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          padding-left: 12px;
          padding-right: 12px;
        }
        @else {
          padding-left: 6px;
          padding-right: 12px;
        }

        .e-btn-icon {
          @if $skin-name == 'FluentUI' {
            padding-left: 8px;
          }
          @else {
            padding-left: 10px;
          }
          padding-right: 0;
          @if $skin-name == 'Material3' {
            border-radius: 4px;
          }
        }

        .e-icon-top {
          padding-left: 0;
        }

        &.e-icon-btn {
          padding-left: $split-btn-icon-btn-padding-bigger;
          padding-right: $split-btn-icon-btn-padding-bigger;

          .e-btn-icon {
            padding-left: 0;
          }
        }
      }
    }

    &.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: 6px;
          padding-right: 12px;
        }
      }

      .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: 4px;
          padding-top: 4px;
        }
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          z-index: 1;
        }

        .e-icon-bottom {
          padding-top: 0;
        }
      }
    }
  }
}


@include export-module('split-button-theme') {

  /*! splitbutton theme */
  .e-split-btn-wrapper {
    .e-split-btn {
      @if $skin-name == 'Material3' {
        border-image: $split-btn-seperator-border-color;
        border-width: 0 1px 0 0;
      }
      @else {
        border-right-color: $split-btn-seperator-border-color;
      }

      &: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;
      }

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

$numeric-skin-name: $skin-name !default;
$numeric-input-icon-size: 14px !default;
$numeric-input-bigger-icon-size: 16px !default;

.e-numeric-container {
  width: 100%;
}

.e-content-placeholder.e-numeric.e-placeholder-numeric {
  background-size: 300px 33px;
  min-height: 33px;
}

.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: 40px;
}

// 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: 0;
  margin: 0;
  padding: 0;
  text-indent: 0;
  visibility: hidden;
  width: 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-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 {
    #{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;
      }
    }
  }

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


@include export-module('numerictextbox-tailwind-icons') {
  .e-input-group-icon.e-spin-up::before {
    content: '\e776';
    font-family: 'e-icons';
  }

  .e-input-group-icon.e-spin-down::before {
    content: '\e729';
    font-family: 'e-icons';
  }
}

//layout variables
$tooltip-drop-shadow: $shadow-sm !default;
$tooltip-close-icon-border: 1px solid $secondary-bg-color !default;
$tooltip-icon-box-shadow: $shadow-sm !default;
$tooltip-font-size: $text-xs !default;
$tooltip-border-radius: 4px !default;
$border-size: 1px !default;
$border-type: solid !default;
$tooltip-opacity: .9 !default;
$tooltip-arrow-outer-border: 8px !default;
$tooltip-arrow-inner-border: 7px !default;
$tooltip-horizontal-padding: 4px !default;
$tooltip-vertical-padding: 8px !default;
$tooltip-line-height: 18px !default;
$tooltip-arrow-icon-font-size: $text-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-mobile-font-size: $text-sm !default;
$tooltip-mobile-horizontal-padding: 4px !default;
$tooltip-mobile-vertical-padding: 8px !default;

//color variables
$tooltip-content-bg-color: $tooltip-bg-color !default;
$tooltip-content-border-color: $tooltip-border !default;
$tooltip-content-font-color: $toooltip-text-color !default;
$tooltip-default-icon-color: $secondary-text-color !default;
$tooltip-icon-bg-normal: $secondary-bg-color !default;
$tooltip-hover-icon-color:  $secondary-text-color !default;
$tooltip-icon-bg-hover: $secondary-bg-color-hover !default;
$tooltip-icon-border-color: $secondary-bg-color !default;
$tooltip-close-icon-border-hover: $secondary-border-color-hover !default;

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

  /*! tooltip popup container layout */
  .e-tooltip-popup-container {
    position: relative;
  }

  /*! tooltip layout */
  .e-tooltip-wrap {
    max-width: 350px;
    min-width: 30px;
    padding: 0;
    position: absolute;
    visibility: visible;

    /*! tooltip arrow */
    .e-arrow-tip {
      overflow: hidden;
      position: absolute;

      &.e-tip-bottom {
        height: $tooltip-tip-bottom-height;
        left: $tooltip-tip-bottom-left;
        top: $tooltip-tip-bottom-top;
        width: $tooltip-tip-bottom-width;
      }

      &.e-tip-top {
        height: $tooltip-tip-top-height;
        left: $tooltip-tip-top-left;
        top: $tooltip-tip-top-top;
        width: $tooltip-tip-top-width;
      }

      &.e-tip-left {
        height: $tooltip-tip-left-height;
        left: $tooltip-tip-left-left;
        top: $tooltip-tip-left-top;
        width: $tooltip-tip-left-width;
      }

      &.e-tip-right {
        height: $tooltip-tip-right-height;
        left: $tooltip-tip-right-left;
        top: $tooltip-tip-right-top;
        width: $tooltip-tip-right-width;
      }
    }

    /*! tooltip sticky mode close icon */
    .e-tooltip-close {
      cursor: pointer;
      float: right;
      position: absolute;
      right: -9px;
      top: -9px;
      z-index: inherit;
      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
        border-radius: 9px;
        border-width: 1px;
        box-shadow: $shadow-sm;
        box-sizing: border-box;
        height: 16px;
        width: 16px;
      }
    }

    /*! tooltip content area */
    .e-tip-content {
      background-color: inherit;
      height: 100%;
      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: 100%;
      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' {
          font-size: 9px;
          margin-right: 2px;
        }
        @if $skin-name == 'tailwind' {
          font-size: 8px;
          margin-right: 3px;
        }
      }
    }
  }

  /*! Bigger Style */
  .e-bigger .e-tooltip-wrap .e-tip-content,
  .e-tooltip-wrap.e-bigger .e-tip-content {
    @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
      line-height: 22px;
    }
    @else if ($skin-name == 'Material3') {
      line-height: 24px;
    }
    @else {
      line-height: 20px;
    }
    padding: $tooltip-mobile-horizontal-padding $tooltip-mobile-vertical-padding;
    @if $skin-name == 'bootstrap4' {
      line-height: 1.5;
    }
  }

  .e-bigger .e-tooltip-wrap,
  .e-tooltip-wrap.e-bigger {

    .e-tooltip-close {
      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
        border-radius: 10px;
        border-width: 1px;
        height: 20px;
        width: 20px;
      }
    }

    .e-tooltip-close::before {
      @if ($skin-name == 'tailwind') {
        font-size: 10px;
        vertical-align: middle;
      }

      @if ($skin-name == 'bootstrap5') {
        font-size: 11px;
        left: calc(50% - 6px);
      }
    }

    &.e-rtl {
      .e-tooltip-close::before {
        @if ($skin-name == 'tailwind') {
          font-size: 10px;
          margin-right: 4px;
        }
      }
    }
  }
}


@include export-module('tooltip-theme') {

  /*! Tooltip theme */
  .e-tooltip-wrap {
    border-radius: $tooltip-border-radius;

    @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' 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') {
        box-shadow: $tooltip-drop-shadow;
        filter: $tooltip-drop-shadow-filter;
      }
    }

    /*! tooltip arrow */
    .e-arrow-tip-outer {
      height: 0;
      left: 0;
      position: absolute;
      top: 0;
      width: 0;

      &.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: 0;
      position: absolute;
      width: 0;
      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;
      }
    }

    /*! tooltip sticky mode close icon */
    .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 == 'FluentUI') {
        border-radius: 9px;
      }
      @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;
      }
    }

    .e-tooltip-close: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;
      }
    }

    /*! tooltip content area */
    .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;
      }
    }
  }

  /*! bigger style */
  .e-bigger .e-tooltip-wrap .e-tip-content,
  .e-tooltip-wrap.e-bigger .e-tip-content {
    font-size: $tooltip-mobile-font-size;
  }
}


.e-tooltip-wrap {

  /*! Tooltip icons */
  .e-tooltip-close::before {
    content: '\e7e7';
    font-size: 10px;
    left: calc(50% - 5px);
    position: absolute;
    top: calc(50% - 5px);
  }

  .e-arrow-tip-inner.e-tip-right::before {
    content: '\e87e';
  }

  .e-arrow-tip-inner.e-tip-top::before {
    content: '\e87a';
  }

  .e-arrow-tip-inner.e-tip-bottom::before {
    content: '\e70d';
  }

  .e-arrow-tip-inner.e-tip-left::before {
    content: '\e87d';
  }
}

// layout variables
$slider-height: 4px !default;
$slider-handle-height: 12px !default;
$slider-handle-width: 12px !default;
$slider-handle-border-radius: 50% !default;
$slider-handle-top: -7px !default;
$slider-h-handle-margin: 0 !default;
$rtl-slider-h-handle-margin: 0 -6px 0 0 !default;
$slider-v-handle-margin: -6px !default;
$rtl-slider-v-handle-margin: 0 !default;
$slider-container-height: 6px !default;
$slider-handle-box-shadow: $shadow !default;
$slider-tooltip-padding: 2px 4px !default;
$tick-after-height: 6px !default;
$tick-after-top: -10px !default;
$largetick-before-top: -10px !default;
$largetick-before-height: 10px !default;
$largetick-after-height: 10px !default;
$largetick-after-top: 5px !default;
$tick-before-height: 6px !default;
$tick-before-top: 1px !default;
$slider-vertical-width: 4px !default;
$slider-border-radius-handle: 10px !default;
$slider-scale-font-family: $font-family !default;
$slider-scale-font-size: $text-xs !default;
$slider-scale-tick-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAQSURBVHgBAQUA+v8AztTa/whsA3yqMpmsAAAAAElFTkSuQmCC');
$slider-scale-tick-image-dark: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAQSURBVHgBAQUA+v8AbHV9/wUNAl7Qm4m+AAAAAElFTkSuQmCC');
$slider-disabled-handle-show: none !default;
$slider-button-shadow: $shadow-sm !default;
$slider-button-horizon-padding: 0 28px !default;
$slider-button-vertical-padding: 28px 0 !default;
$tick-after-left: 5px !default;
$largetick-before-left: 1px !default;
$tick-before-left: 17px !default;
$largetick-after-left: 17px !default;
$slider-wrap-height: 26px !default;
$slider-center-align: -5px !default;
$slider-btn-center-align: -10px !default;
$slider-range-height: $slider-container-height !default;
$slider-range-width: $slider-vertical-width !default;
$slider-range-border-radius: 4px !default;
$slider-cursor: pointer !default;
$slider-handle-hover-cursor: pointer !default;
$slider-scale-top: 16px !default;
$slider-tab-border: 1px solid $content-bg-color !default;
$slider-tab-active-box-shadow: $shadow-focus-ring2 !default;
$slider-limit-bar-horizontal-height: 6px !default;
$slider-limit-bar-top: calc(50% - 3px) !default;
$slider-limit-bar-vertical-width: 6px !default;
$slider-limit-bar-left: calc(50% - 3px) !default;

$slider-handle-mobile-height: 16px !default;
$slider-handle-mobile-width: 16px !default;
$slider-handle-mobile-margin-left: -8px !default;
$slider-handle-mobile-handle-top: calc(50% - 8px) !default;
$slider-handle-mobile-top: -7px !default;
$slider-h-handle-mobile-margin: 0 !default;
$rtl-slider-h-handle-mobile-margin: 0 !default;
$slider-v-handle-mobile-margin: 0 !default;
$rtl-slider-v-handle-mobile-margin: 0 !default;
$slider-mobile-scale-font-size: $text-sm !default;
$tick-after-mobile-height: 8px !default;
$tick-after-mobile-left: 18px !default;
$tick-before-mobile-left: 2px !default;
$largetick-before-mobile-height: 12px !default;
$largetick-before-mobile-left: -2px !default;
$tick-before-mobile-top: -12px !default;
$largetick-after-mobile-top: 8px !default;
$tick-after-mobile-top: 4px !default;

//color variables
$slider-button-icon-color: $secondary-text-color !default;
$slider-range-bar-color: $primary !default;
$slider-range-bar-hover-color: $primary-bg-color-hover !default;
$slider-track-color: $content-bg-color-alt2 !default;
$slider-button-bg-color: $secondary-bg-color !default;
$slider-button-icon-bg-color: $secondary-text-color !default;
$slider-normal-handle-border-color: $primary !default;
$slider-handle-bg-color: $primary !default;
$slider-hover-color: $content-bg-color-alt2 !default;
$slider-handle-hover-border-color: $slider-normal-handle-border-color !default;
$slider-handle-start-border-color: $content-bg-color-alt2 !default;
$slider-button-border-color: $secondary-border-color !default;
$slider-tab-background: $primary-bg-color-hover !default;
$slider-tab-range-color: $primary !default;
$slider-tab-track-color: $content-bg-color-alt2 !default;
$slider-limit-bar-color: $overlay-bg-color !default;
$slider-tick-font-color: $content-text-color-alt1 !default;
$slider-hover-handle-color: $primary-bg-color-hover !default;
$slider-hover-handle-border-color: $primary-border-color-hover !default;

@include export-module('slider-layout') {
  /* stylelint-disable property-no-vendor-prefix */
  // sass-lint:disable no-important

  .e-control-wrapper.e-slider-container.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 {
      &::after {
        @if ($skin-name == 'material' or $skin-name == 'material-dark') {
          background-color: transparent;
        }
      }
    }

    &.e-handle-start.e-tab-handle {
      &::after {
        @if ($skin-name == 'material' or $skin-name == 'material-dark') {
          background-color: transparent;
        }
      }
    }
  }

  .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: 0;
      border-radius: 8px;
      /* stylelint-disable */
      cursor: -webkit-grab;
      cursor: grab;
      /* stylelint-enable */
      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-arrow-tip-outer.e-tip-top {
          border-bottom-color: $slider-handle-border-color;
        }

        .e-arrow-tip-outer.e-tip-right {
          border-left-color: $slider-handle-border-color;
        }

        .e-arrow-tip-outer.e-tip-left {
          border-right-color: $slider-handle-border-color;
        }
      }

      &.e-tooltip-active {
        /* stylelint-disable */
        cursor: -webkit-grabbing;
        cursor: grabbing;
        /* stylelint-enable */
      }

      .e-arrow-tip {
        visibility: visible;
      }

      .e-tip-content {
        background-color: transparent;
        height: 16px;
        overflow: hidden;
        padding: 0 8px;
        @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: calc(50% - 8px);
          position: relative;
          line-height: 16px;
        }
        @else {
          top: calc(50% - 10px);
          left: calc(50% - 36px);
        }
        width: 100%;

        &.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-arrow-tip-outer.e-tip-top {
        border-bottom-color: $slider-handle-bg-color;
      }

      .e-arrow-tip-outer.e-tip-right {
        border-left-color: $slider-handle-bg-color;
      }

      .e-arrow-tip-outer.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: 0;
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 0%;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        /* stylelint-disable */
        cursor: -webkit-grab;
        cursor: grab;
        /* stylelint-enable */
        opacity: 1;

        &.e-material-tooltip-start {
          background-color: $slider-handle-border-color;
        }

        &.e-tooltip-active {
          /* stylelint-disable */
          cursor: -webkit-grabbing;
          cursor: grabbing;
          /* stylelint-enable */
        }

        .e-arrow-tip {
          visibility: hidden;
        }

        &.e-slider-horizontal-before {
          .e-tip-content {
            transform: rotate(-45deg);
          }
        }

        &.e-slider-horizontal-after {
          .e-tip-content {
            transform: rotate(-225deg);
          }
        }

        &.e-slider-vertical-before {
          .e-tip-content {
            transform: rotate(45deg);
          }
        }

        &.e-slider-vertical-after {
          .e-tip-content {
            transform: rotate(225deg);
          }
        }

        .e-tip-content {
          background-color: transparent;
          height: 16px;
          overflow: hidden;
          padding: 0;
          text-align: center;
          @if $skin-name == 'material' or $skin-name == 'material-dark' {
            top: calc(50% - 8px);
          }
          @else {
            top: calc(50% - 10px);
            left: calc(50% - 16px);
          }
          width: 100%;

          &.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 {
    height: 100%;
    position: absolute;
    top: 0;
  }

  .e-slider-vertical-color {
    left: -1px;
    position: absolute;
    width: 100%;
  }

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

      &.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: 11px;
          line-height: 16px;
        }
      }

      .e-slider-tooltip.e-tooltip-wrap.e-popup {
        .e-tip-content {
          font-size: 11px;
          line-height: 16px;
        }
      }
    }
  }

  .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 {
          height: $slider-handle-mobile-height;
          width: $slider-handle-mobile-width;
        }
      }

      @if ($skin-name == 'FluentUI') {
        .e-slider-button {
          height: 20px;
          width: 20px;
        }

        &.e-horizontal {
          .e-first-button,
          .e-second-button {
            margin-top: $slider-touch-btn-center-align;

            .e-button-icon::before {
              font-size: 17px;
            }
          }
        }

        &.e-vertical {
          .e-first-button,
          .e-second-button {
            margin-right: $slider-touch-btn-center-align;

            .e-button-icon::before {
              font-size: 17px;
            }
          }
        }
      }

      @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
        .e-slider-button {
          height: 18px;
          width: 18px;
        }

        &.e-vertical {
          &.e-slider-btn {
            @if ($skin-name == 'bootstrap5') {
              padding: 36px 0;
            }
            @else {
              padding: 34px 0;
            }
          }

          .e-first-button,
          .e-second-button {
            @if ($skin-name == 'bootstrap5' or $skin-name == 'Material3') {
              margin-right: -12px;
            }
            @else {
              margin-right: -9px;
            }
          }

          .e-slider {
            .e-slider-track {
              left: calc(50% - 4px);
              width: 8px;
            }

            .e-range {
              left: calc(50% - 4px);
              width: 8px;
            }
          }
        }

        &.e-horizontal .e-slider {
          .e-limits {
            height: 8px;
            top: calc(50% - 4px);
            @if ($skin-name == 'bootstrap5' and $skin-name == 'FluentUI') {
              border-radius: $slider-range-border-radius;
            }
          }
        }

        &.e-vertical .e-slider {
          .e-limits {
            left: calc(50% - 4px);
            width: 8px;
            @if ($skin-name == 'bootstrap5' and $skin-name == 'FluentUI') {
              border-radius: $slider-range-border-radius;
            }
          }
        }
      }

      @if ($skin-name == 'bootstrap5' or $skin-name == 'Material3') {

        &.e-horizontal,
        &.e-vertical {
          .e-slider-button.e-first-button,
          .e-slider-button.e-second-button {
            border-radius: 12px;
            height: 24px;
            width: 24px;
            @if $skin-name == 'Material3' {
              padding: 0;
            }

            .e-button-icon::before {
              font-size: 22px;
            }
          }
        }

        &.e-horizontal {

          .e-slider-button.e-first-button,
          .e-slider-button.e-second-button {
            margin-top: -12px;
          }

          .e-tick-both {
            &.e-scale {
              &.e-h-scale {
                .e-tick {
                  height: 24px;
                  top: -14px;
                }

                .e-large {
                  height: 32px;
                  top: -10px;
                }
              }
            }
          }

          .e-tick-before {
            &.e-scale {
              &.e-h-scale {
                .e-tick {
                  height: $tick-after-mobile-height;
                  top: $tick-before-mobile-top;
                }

                .e-large {
                  height: $largetick-before-mobile-height;
                  top: $tick-before-mobile-top;
                }
              }
            }
          }

          .e-tick-after {
            &.e-scale {
              &.e-h-scale {
                .e-tick {
                  height: $tick-after-mobile-height;
                  top: $tick-after-mobile-top;
                }

                .e-large {
                  height: $largetick-before-mobile-height;
                  top: $largetick-after-mobile-top;
                }
              }
            }
          }
        }

        &.e-vertical {

          .e-tick-both {
            &.e-scale {
              .e-tick {
                left: 2px;
                width: 24px;
              }

              .e-large {
                left: -2px;
                width: 32px;
              }
            }
          }

          .e-tick-before {

            &.e-scale {
              &.e-v-scale {
                .e-tick {
                  left: $tick-before-mobile-left;
                  width: $tick-after-mobile-height;
                }

                .e-large {
                  left: $largetick-before-mobile-left;
                  width: $largetick-before-mobile-height;
                }
              }
            }
          }

          .e-tick-after {

            &.e-scale {
              &.e-v-scale {
                .e-tick {
                  left: $tick-after-mobile-left;
                  width: $tick-after-mobile-height;
                }

                .e-large {
                  left: $tick-after-mobile-left;
                  width: $largetick-before-mobile-height;
                }
              }
            }
          }
        }
      }

      @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: 12px;
            height: 24px;
            width: 24px;

            .e-button-icon::before {
              font-size: 22px;
            }
          }
        }

        &.e-horizontal {

          &.e-scale-both {
            .e-range {
              height: 6px;
            }
          }

          .e-slider-track {
            border-radius: 6px;
          }

          .e-limits {
            height: 6px;
          }

          .e-first-button,
          .e-second-button {
            margin-top: -14px;
          }

          .e-tick-both {
            &.e-scale {
              &.e-h-scale {
                .e-tick {
                  height: 22px;
                  top: -19px;
                }

                .e-large {
                  height: 30px;
                  top: -16px;
                }
              }
            }
          }

          .e-tick-before {
            &.e-scale {
              &.e-h-scale {
                .e-tick {
                  height: $tick-after-mobile-height;
                }

                .e-large {
                  height: $largetick-before-mobile-height;
                }
              }
            }
          }

          .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 {
              width: 6px;
            }
          }

          .e-range {
            width: 6px;
          }

          .e-slider-track {
            border-radius: 6px;
          }

          &.e-slider-btn {
            padding: $slider-button-vertical-mobile-padding;
          }

          .e-slider-button {
            margin-right: -15px;
          }

          .e-tick-both {
            &.e-scale {
              &.e-v-scale {
                .e-tick {
                  left: 4px;
                  width: 22px;
                }

                .e-large {
                  left: 0;
                  width: 30px;
                }
              }
            }
          }

          .e-tick-before {

            &.e-scale {
              &.e-v-scale {
                .e-tick {
                  width: $tick-after-mobile-height;
                }

                .e-large {
                  width: $largetick-before-mobile-height;
                }
              }
            }
          }

          .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') {
          &.e-slider-btn {
            padding: 0 36px;
          }
        }
        @if ($skin-name == 'bootstrap4') {
          &.e-slider-btn {
            padding: 0 34px;
          }

          .e-slider-button {
            height: $slider-handle-mobile-buttons-height;
            margin-top: -9px;
            width: $slider-handle-mobile-buttons-width;
          }
        }

        @if ($skin-name == 'tailwind') {
          .e-slider-track {
            height: 6px;
          }

          .e-range {
            height: 6px;
          }
        }

        .e-slider {
          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
            .e-slider-track {
              height: 8px;
              top: calc(50% - 4px);
            }

            .e-range {
              height: 8px;
              top: calc(50% - 4px);
            }
          }

          .e-handle {
            @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
              margin-left: $slider-handle-mobile-margin-left;
              top: $slider-handle-mobile-handle-top;
            }
            @else {
              margin-left: -9px;
              top: calc(50% - 9px);
            }
          }
        }

        &.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 {
            @if ($skin-name == 'tailwind') {
              left: calc(50% - 5px);
            }
            @else if $skin-name == 'Material3' {
              left: calc(50% - 14px);
            }
            @else {
              left: calc(50% - 9px);
            }
            margin-bottom: -9px;
            @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
              left: calc(50% - 8px);
              margin-bottom: -8px;
            }
          }

          @if ($skin-name == 'tailwind') {
            .e-range {
              width: 6px;
            }
          }
        }

        &.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') {
          .e-slider-track {
            width: 6px;
          }

          .e-range {
            width: 6px;
          }
        }
      }

      &.e-rtl {
        &.e-horizontal {
          .e-slider {
            .e-handle {
              @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
                margin: 0 -8px 0 0;
              }
            }
          }
        }
      }
    }

    .e-scale .e-tick .e-tick-value {
      font-size: $slider-mobile-scale-font-size;
    }
  }

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

    &::after {
      content: $skin-name;
      display: none;
    }

    .e-slider {
      .e-handle {
        &.e-large-thumb-size {
          transform: scale(1.5);
        }
      }
    }

    &.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') {
              top: calc(50% - 8px);
            }
            @if ($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);
            }
            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
              top: calc(50% - 6px);
            }
          }
        }

        .e-scale {
          &.e-h-scale {
            .e-tick.e-first-tick {
              @if ($skin-name == 'material' or $skin-name == 'material-dark') {
                background-position-x: right;
              }

              @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
                background-position: right center;
                left: 0;
              }

              @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
                background-position: right center;
                left: 0;
              }
            }

            .e-tick.e-last-tick {
              @if ($skin-name == 'material' or $skin-name == 'material-dark') {
                background-position-x: left;
              }
              @if ($skin-name != 'material' and $skin-name != 'material-dark') {
                background-position: left center;
              }
            }
          }
        }

        .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;
          }
          @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4') {
            margin-top: -7px;
          }
          @if ($skin-name == 'tailwind'  or $skin-name == 'bootstrap5') {
            margin-top: -13px;

            .e-button-icon::before {
              font-size: 18px;
            }
          }
        }
      }

      &.e-vertical {
        direction: ltr;
      }
    }

    &.e-disabled {
      @if ($skin-name == 'tailwind') {
        filter: alpha(Opacity=100);
        opacity: 1;
      }
      @if ($skin-name == 'bootstrap5') {
        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 {
              -ms-transform: scale(0);
              -webkit-transform: scale(0);
              background: transparent;
              border: 7px solid $slider-material-tooltip-content-color;
              border-radius: 50%;
              box-sizing: border-box;
              content: '';
              height: 26px;
              left: calc(50% - 13px);
              opacity: 1;
              position: absolute;
              top: calc(50% - 13px);
              transform: scale(1);
              transition: none;
              width: 26px;
              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 {
            background-color: $slider-disabled-handle-color;
            border-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 {
          background-color: $slider-disabled-bg-color;
          border-color: $white;
        }
      }
    }

    @if ($skin-name == 'bootstrap4') {
      &:not(.e-disabled) {
        .e-slider-button {
          &:hover {
            background-color: darken($gray-600, 7.5%);
            border-color: darken($gray-600, 10%);
          }

          &:active {
            background-color: darken($gray-600, 10%);
            border-color: darken($gray-600, 12%);
          }
        }
      }
    }

    &.e-horizontal {
      height: 48px;
      width: 100%;
      @if ($skin-name == 'material' or $skin-name == 'material-dark') {
        .e-first-button {
          left: 0;
          margin-top: $slider-btn-center-align;
          top: 50%;

          .e-button-icon {
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAkFBMVEUAAAD////////////////////////+/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///8G+5iqAAAAL3RSTlMABAgMEBQYHCAkKDA0ODxETFRYYGRsdHyAh4uTm6Onr7O/w8fL09ff4+fr7/P3+/6nVicAAADJSURBVHgBldJHdoNgAANhQUjvPTHuxbgAuv/t/J5O8I82Wn27UfGaVmjvBwvsdmEDUH33JuBxYwNQ/48m4LWzAbie2QR8nkzA/coGoPodTMDzzgagae1ykHAASDgAJBwAEk4xSDgAJBwAEg4ACacYJBwAEg4ACYeAjyMEaqYQSC97CFT/DQxID2sIpK8zBLqZQyC9dRDoajIyID1tIVD10zMg3S0ZSF4IJC8GkhcDyQuB5MVA8kIgeTGQvBhIXggkLwaSFwLJK3cBRvanB71ijlkAAAAASUVORK5CYII=');
            background-repeat: no-repeat;
            background-size: cover;
            display: inline-block;
            height: 7px;
            left: calc(50% - 4.6px);
            position: absolute;
            top: calc(50% - 3.6px);
            width: 7px;
          }
        }

        .e-second-button {
          margin-top: $slider-btn-center-align;
          right: 0;
          top: 50%;

          .e-button-icon {
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAkFBMVEUAAAD////////////////////////+/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///9VYKa9AAAAL3RSTlMABAgMEBQYHCAoLDQ4PEBMUFhcZGx0eICDi5Obn6ers7vDx8vP19vf4+fr7/P3++LF0fAAAADNSURBVHgBldNHbsNAGEPhkZSi9F4S915k6d3/dga8Jgjw7bkYzPeXS5ObkkX3EQ5gcRcO6H/qbACbp3AAo6twwOEtHMCsDQecvqpsAKuHcMDw12QD2L2EA/C8EFleiCwvRJYXIssLmeGFzPBCZnghM7yQGV7IDC9Eglc26D6zwfS2JIP9a/To4b8pyWD9GH1c/11FNOZthO/4nvEeX5dksH2OTnT4rUsyWN4Xk4cj8nBEHo7IwxF5OCIPR+ThiDwckYcj8nBEHo5Iw5GdAVm8p9sPUXNKAAAAAElFTkSuQmCC');
            background-repeat: no-repeat;
            background-size: cover;
            display: inline-block;
            height: 7px;
            left: calc(50% - 2.6px);
            position: absolute;
            top: calc(50% - 3.6px);
            width: 7px;
          }
        }
      }
      @else if ($skin-name != 'highcontrast' and $skin-name != 'highcontrast-light') {
        .e-first-button {
          left: 0;
          margin-top: $slider-btn-center-align;
          top: 50%;

          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $skin-name != 'Material3') {
            .e-button-icon {
              background-image: $slider-button-hleft-bg-image;
              background-repeat: no-repeat;
              background-size: cover;
              height: 8px;
              left: calc(50% - 5px);
              position: absolute;
              top: calc(50% - 4px);
              width: 8px;
            }
          }
          @else if($skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
            .e-button-icon {
              font-family: 'e-icons';
            }

            .e-button-icon::before {
              color: $slider-button-icon-bg-color;
              content: '\e738';
              @if ($skin-name == 'FluentUI') {
                font-size: 14px;
              }
              @else if ($skin-name == 'Material3') {
                font-size: 16px;
              }
              @else {
                font-size: 17px;
              }
            }
          }
          @else {
            .e-button-icon::before {
              font-size: 17px;
              @if ($skin-name == 'tailwind') {
                color: $slider-button-icon-bg-color;
                content: '\e765';
              }
              @else {
                content: '\e761';
              }
            }
          }
        }

        .e-second-button {
          margin-top: $slider-btn-center-align;
          right: 0;
          top: 50%;

          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5'  and $skin-name != 'FluentUI' and $skin-name != 'Material3') {
            .e-button-icon {
              background-image: $slider-button-hright-bg-image;
              background-repeat: no-repeat;
              background-size: cover;
              height: 8px;
              left: calc(50% - 3px);
              position: absolute;
              top: calc(50% - 4px);
              width: 8px;
            }
          }
          @else if($skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
            .e-button-icon {
              font-family: 'e-icons';
            }

            .e-button-icon::before {
              color: $slider-button-icon-bg-color;
              content: '\e75c';
              @if ($skin-name == 'FluentUI') {
                font-size: 14px;
              }
              @else if ($skin-name == 'Material3') {
                font-size: 16px;
              }
              @else {
                font-size: 17px;
                margin-left: 1px;
              }
            }
          }
          @else {
            .e-button-icon::before {
              font-size: 18px;
              @if ($skin-name == 'tailwind') {
                color: $slider-button-icon-bg-color;
                content: '\e748';
              }
              @else {
                content: '\e707';
              }
            }
          }
        }
      }
      @else {
        .e-first-button {
          left: 0;
          margin-top: $slider-btn-center-align;
          top: 50%;

          .e-button-icon {
            font-family: 'e-icons';
          }

          .e-button-icon::before {
            color: $slider-button-icon-color;
            content: '\e829';
            font-size: 8px;
            font-weight: 600;
            left: calc(50% - 5px);
            position: absolute;
            top: calc(50% - 4px);
          }
        }

        .e-second-button {
          margin-top: $slider-btn-center-align;
          right: 0;
          top: 50%;

          .e-button-icon {
            font-family: 'e-icons';
          }

          .e-button-icon::before {
            color: $slider-button-icon-color;
            content: '\e830';
            font-size: 8px;
            font-weight: 600;
            left: calc(50% - 3px);
            position: absolute;
            top: calc(50% - 4px);
          }
        }
      }

      &.e-slider-btn {
        padding: $slider-button-horizon-padding;
      }

      .e-slider {
        height: 32px;
        position: relative;
        top: calc(50% - 16px);
        width: 100%;
      }

      .e-slider-track {
        height: $slider-container-height;
        left: 0;
        position: absolute;
        width: 100%;
        @if ($skin-name == 'material' or $skin-name == 'material-dark') {
          background: $slider-handle-start-border-color;
          overflow: hidden;
          top: calc(50% - 1px);
        }
        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
          background: $slider-track-color;
          overflow: hidden;
          top: calc(50% - 2px);
          @if $skin-name == 'FluentUI' {
            border-radius: 2px;
          }
        }
        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' or $skin-name == 'Material3-dark') {
          background: $slider-track-color;
          border-radius: 4px;
          overflow: hidden;
          top: calc(50% - 4px);
        }
        @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
          top: calc(50% - 3px);
        }
        @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
          background: $slider-handle-start-border-color;
          border: 1px solid $slider-track-border-color;
          border-radius: 4px;
          overflow: hidden;
          top: calc(50% - 5px);
        }
        @if $skin-name == 'bootstrap4' {
          background: $slider-handle-start-border-color;
          border-radius: 6px;
          overflow: hidden;
        }
      }

      .e-handle {
        @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'bootstrap5') {
          margin-left: -6px;
          top: calc(50% - 6px);
        }
        @else if ($skin-name == 'bootstrap4') {
          margin-left: -7px;
          top: calc(50% - 7px);
        }
        @else if($skin-name == 'Material3') {
          margin-left: -10px;
          top: calc(50% - 12px);
        }
        @else {
          @if ($skin-name == 'tailwind') {
            margin-left: -6px;
          }
          @else {
            margin-left: -8px;
          }
          top: calc(50% - 8px);
        }
      }

      &.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') {
          top: calc(50% - 2px);
        }
        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
          top: calc(50% - 3px);
        }
        @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'tailwind' or $skin-name == 'Material3') {
          top: calc(50% - 4px);
        }
      }

      .e-limits {
        background-color: $slider-limit-bar-color;
        height: $slider-limit-bar-horizontal-height;
        position: absolute;
        top: $slider-limit-bar-top;
        @if ($skin-name == 'bootstrap5') {
          border-radius: 4px;
        }
        @if ($skin-name == 'FluentUI') {
          border-radius: 2px;
        }
      }
    }

    &.e-vertical {
      height: inherit;
      @if ($skin-name == 'tailwind') {
        padding: 28px 0;
      }
      @else if ($skin-name == 'FluentUI') {
        padding: 32px 0;
      }
      @else {
        padding: 38px 0;
      }
      width: 48px;
      @if ($skin-name == 'bootstrap4') {
        padding: 30px 0;
      }

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

      .e-slider {
        height: 100%;
        @if ($skin-name == 'FluentUI') {
          left: calc(50% - 15px);
        }
        @else {
          left: calc(50% - 16px);
        }
        position: relative;
        width: 32px;
      }

      .e-slider-track {
        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
          background: $slider-track-color;
        }
        @if ($skin-name != 'highcontrast' and $skin-name != 'highcontrast-light' and $skin-name != 'FluentUI' and $skin-name != 'Material3') {
          background: $slider-handle-start-border-color;
        }
        bottom: 0;
        height: 100%;
        position: absolute;
        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
          @if ($skin-name == 'tailwind') {
            left: calc(50%);
          }
          @else {
            left: calc(50% - 2px);
          }
          overflow: hidden;
          width: 4px;
        }
        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
          left: calc(50% - 4px);
          overflow: hidden;
          width: 8px;
        }
        @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
          border: 1px solid $slider-track-border-color;
          border-radius: 3px;
          left: calc(50% - 5px);
          overflow: hidden;
          width: 10px;
        }
        @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
          left: calc(50% - 3px);
          overflow: hidden;
          width: 6px;
        }
        @if ($skin-name == 'bootstrap4') {
          border-radius: 6px;
        }
        @if ($skin-name == 'material' or $skin-name == 'material-dark') {
          left: calc(50% - 1px);
          overflow: hidden;
          width: 2px;
        }
        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
          border-radius: 4px;
        }
        @if ($skin-name == 'FluentUI') {
          border-radius: 2px;
        }
      }

      &.e-small-size {
        &.e-slider-btn {
          height: 100%;
          padding: $slider-button-vertical-padding;

          .e-slider {
            height: 100%;
            width: $slider-height;
          }
        }
      }

      @if ($skin-name == 'material' or $skin-name == 'material-dark') {
        .e-first-button {
          bottom: 0;
          margin-right: $slider-btn-center-align;
          right: 50%;

          .e-button-icon {
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAjVBMVEUAAAD////////////////////////+/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////1kjJ6AAAALnRSTlMABAgMEBQYHCAkKDA4QERITFRcYGRodHyDj5OXn6Ons7e7v8vP09ff5+vv8/f7zZvJMAAAAItJREFUeAHdyVcagjAQBsAfUVTAXsTeSTRm7388i/kUQjYHYF4H9bAUXjuEV/KQEdC98f9I8dLXxJngY879CsbG/ccARuPsetHCT1tWXyUoSDXZRiiZ2p/Bsi7/HrbgVPw8REUk/n+P4ZAoMvQATmMyFmBk39+CExzefwnBauZEsgOPWOkevIYz1NEToo45F58KJy0AAAAASUVORK5CYII=');
            background-repeat: no-repeat;
            background-size: cover;
            display: inline-block;
            height: 8px;
            left: calc(50% - 3.8px);
            position: absolute;
            top: calc(50% - 2.7px);
            width: 8px;
          }
        }

        .e-second-button {
          margin-right: $slider-btn-center-align;
          right: 50%;
          top: 0;

          .e-button-icon {
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAjVBMVEUAAAD////////////////////////////////+/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////wrNfvAAAALnRSTlMABAgMEBQYICgsMDQ4QERITFBcYGhseHyDi5Obn6Ort7u/x8/X29/j5+vv8/f77y3LJgAAAI1JREFUeAHdyVeagjAUBtCbYQTsXewFENGYf//LsyB8kORmAZzXQ600mLrfz2XX9X8xcO0Qb4+3s2B/ia8N9yOFwtz+wR0/z77tvQSVm0+mI2piYXyEhp3+E2gWzQ8lNGpY//8UhjygijjBIvGotIbVofwZGFHxPQmGGn/ez8B6hETiAofUo1XmtKVWeAEhzjgqqZr/lwAAAABJRU5ErkJggg==');
            background-repeat: no-repeat;
            background-size: cover;
            display: inline-block;
            height: 8px;
            left: calc(50% - 3.8px);
            position: absolute;
            top: calc(50% - 4.7px);
            width: 8px;
          }
        }
      }
      @else if ($skin-name != 'highcontrast' and $skin-name != 'highcontrast-light') {
        .e-first-button {
          bottom: 0;
          margin-right: $slider-btn-center-align;
          right: 50%;

          @if $skin-name == 'Material3' {
            margin-right: $slider-btn-vertical-center-align;
          }

          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $skin-name != 'Material3') {
            .e-button-icon {
              background-image: $slider-button-vdown-bg-image;
              background-repeat: no-repeat;
              background-size: cover;
              display: inline-block;
              height: 8px;
              left: calc(50% - 4px);
              position: absolute;
              top: calc(50% - 3.6px);
              width: 8px;
            }
          }
          @else if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
            .e-button-icon {
              font-family: 'e-icons';
            }

            .e-button-icon::before {
              color: $slider-button-icon-bg-color;
              @if ($skin-name == 'bootstrap5') {
                content: '\e734';
                font-size: 18px;
              }
              @else if ($skin-name == 'Material3') {
                content: '\e734';
                font-size: 16px;
              }
              @else {
                content: '\e734';
                font-size: 14px;
              }
            }
          }
          @else {
            .e-button-icon::before {
              font-size: 18px;
              @if ($skin-name == 'tailwind') {
                color: $slider-button-icon-bg-color;
                content: '\e729';
              }
              @else {
                content: '\e729';
              }
            }
          }
        }

        .e-second-button {
          margin-right: $slider-btn-center-align;
          right: 50%;
          top: 0;

          @if $skin-name == 'Material3' {
            margin-right: $slider-btn-vertical-center-align;
          }

          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $skin-name != 'Material3') {
            .e-button-icon {
              background-image: $slider-button-vup-bg-image;
              background-repeat: no-repeat;
              background-size: cover;
              display: inline-block;
              height: 8px;
              left: calc(50% - 4px);
              position: absolute;
              top: calc(50% - 4.5px);
              width: 8px;
            }
          }
          @else if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
            .e-button-icon {
              font-family: 'e-icons';
            }

            .e-button-icon::before {
              color: $slider-button-icon-bg-color;
              @if ($skin-name == 'bootstrap5') {
                content: '\e7dd';
                font-size: 18px;
              }
              @else if ($skin-name == 'Material3') {
                content: '\e7dd';
                font-size: 16px;
              }
              @else {
                content: '\e7dd';
                font-size: 14px;
              }
            }
          }
          @else {
            .e-button-icon::before {
              font-size: 18px;
              @if ($skin-name == 'tailwind') {
                color: $slider-button-icon-bg-color;
                content: '\e776';
              }
              @else {
                content: '\e7a0';
              }
            }
          }
        }
      }
      @else {
        .e-first-button {
          bottom: 0;
          margin-right: $slider-btn-center-align;
          right: 50%;

          .e-button-icon {
            font-family: 'e-icons';
          }

          .e-button-icon::before {
            color: $slider-button-icon-color;
            content: '\e829';
            font-size: 9px;
            font-weight: 600;
            left: calc(50% - 4.15px);
            position: absolute;
            top: calc(50% - 4px);
            transform: rotate(-90deg);
          }
        }

        .e-second-button {
          margin-right: $slider-btn-center-align;
          right: 50%;
          top: 0;

          .e-button-icon {
            font-family: 'e-icons';
          }

          .e-button-icon::before {
            color: $slider-button-icon-color;
            content: '\e829';
            font-size: 9px;
            font-weight: 600;
            left: calc(50% - 5.5px);
            position: absolute;
            top: calc(50% - 5.8px);
            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;
          @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'bootstrap5') {
            left: calc(50% - 6px);
          }
          @else if($skin-name == 'bootstrap4') {
            left: calc(50% - 7px);
          }
          @else if($skin-name == 'tailwind') {
            left: calc(50% - 4px);
          }
          @else if($skin-name == 'Material3') {
            left: calc(50% - 10px);
          }
          @else {
            left: calc(50% - 8px);
          }
        }

        .e-range {
          @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
            left: calc(50% - 4px);
            width: 8px;
          }
          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
            left: calc(50% - 3px);
            width: 6px;
          }
          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
            @if ($skin-name == 'tailwind') {
              left: calc(50%);
            }
            @else {
              left: calc(50% - 2px);
            }
            @if ($skin-name == 'bootstrap5') {
              width: 6px;
            }
            @else {
              width: 4px;
            }
          }
          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
            left: calc(50% - 3px);
            width: 6px;
          }
          @if ($skin-name == 'material' or $skin-name == 'material-dark') {
            left: calc(50% - 1px);
            width: 2px;
          }
        }

        .e-limits {
          background-color: $slider-limit-bar-color;
          left: $slider-limit-bar-left;
          position: absolute;
          width: $slider-limit-bar-vertical-width;
          @if ($skin-name == 'bootstrap5') {
            border-radius: 4px;
          }
          @if ($skin-name == 'FluentUI') {
            border-radius: 2px;
          }
        }
      }
    }

    .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 {
        cursor: pointer;
      }

      &.e-drag-vertical {
        cursor: pointer;
      }
    }

    .e-slider {
      box-sizing: border-box;
      cursor: $slider-cursor;
      display: block;
      outline: 0 none;
      padding: 0;
      position: relative;

      .e-handle {
        border-radius: $slider-border-radius-handle;
        @if ($skin-name == 'tailwind') {
          box-shadow: $slider-handle-box-shadow;
        }
        box-sizing: border-box;
        cursor: $slider-handle-hover-cursor;
        height: $slider-handle-height;
        outline: none;
        position: absolute;
        touch-action: none;
        transition: left 300ms ease-out, right 300ms ease-out, bottom 300ms ease-out, transform 300ms ease-out;
        width: $slider-handle-width;
        z-index: 10;

        &.e-handle-active {
          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
            background-color: $slider-active-handle-bg-color;
            border-color: $slider-hover-handle-color;
          }
        }

        @if ($skin-name == 'material' or $skin-name == 'material-dark') {
          /* stylelint-disable */
          cursor: -webkit-grab;
          cursor: grab;
          /* stylelint-enable */

          &.e-handle-active {
            /* stylelint-disable */
            cursor: -webkit-grabbing;
            cursor: grabbing;
            /* stylelint-enable */
          }

          &.e-handle-start {
            background-color: $slider-handle-start-background;
            border: $slider-start-handle-border-size;
          }

          &::after {
            -moz-box-sizing: content-box;
            -ms-transform: scale(0);
            -webkit-box-sizing: content-box;
            -webkit-transform: scale(0);
            border: 0 solid;
            border-radius: 50%;
            box-sizing: content-box;
            content: '';
            filter: alpha(opacity=26);
            height: 32px;
            left: calc(50% - 16px);
            opacity: .26;
            position: $slider-handle-after-position;
            top: calc(50% - 16px);
            transform: scale(0);
            transition: transform .4s cubic-bezier(.25, .8, .25, 1);
            width: 32px;
            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 {
              -ms-transform: scale(1);
              -webkit-transform: scale(1);
              background-color: $slider-color;
              transform: scale(1);
            }
          }

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

          /* stylelint-disable */
          @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
            background-color: $slider-tab-background;
            border-color: $slider-tab-border-color;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
          }
          @if ($skin-name == 'bootstrap4') {
            background-color: $slider-tab-background;
            border-color: $slider-tab-border-color;
            box-shadow: $slider-tab-active-box-shadow;
          }
          @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
            @if $skin-name == 'Material3' {
              background: $slider-tab-background;
            }
            @else {
              background-color: $slider-tab-background;
              border: $slider-tab-border;
            }
            box-shadow: $slider-tab-active-box-shadow;
          }
          /* stylelint-enable */
        }
      }

      .e-tab-track {
        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
          background-color: $slider-tab-track-color;
        }
      }
    }

    .e-tick-before {
      &.e-scale {
        &.e-h-scale {
          .e-tick {
            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
              height: $tick-after-height;
              top: $tick-after-top;
            }
            @else {
              background-position: bottom;
              height: 50%;
              top: 1px;
            }
          }

          .e-large {
            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
              height: $largetick-before-height;
              top: $largetick-before-top;
            }
          }
        }

        &.e-v-scale {
          .e-tick {
            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
              left: $tick-after-left;
              width: $tick-after-height;
            }
            @else {
              background-position: right;
              left: 1px;
              width: 50%;
            }
          }

          .e-large {
            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
              left: $largetick-before-left;
              width: $largetick-before-height;
            }
          }
        }
      }
    }

    .e-tick-after {
      &.e-scale {
        &.e-h-scale {
          .e-tick {
            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
              height: $tick-before-height;
              top: $tick-before-top;
            }
            @else {
              background-position-x: center;
              height: 50%;
              top: calc(50% - 1px);
            }
          }

          .e-large {
            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
              height: $largetick-after-height;
              top: $largetick-after-top;
            }
          }
        }

        &.e-v-scale {
          .e-tick {
            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
              left: $tick-before-left;
              width: $tick-before-height;
            }
            @else {
              background-position: left;
              left: calc(50% - 1px);
              width: 50%;
            }
          }

          .e-large {
            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
              left: $largetick-after-left;
              width: $largetick-after-height;
            }
          }
        }
      }
    }

    &.e-scale-before {
      .e-scale {
        &.e-v-scale {
          @if ($skin-name != 'material' and $skin-name != 'material-dark') {
            right: 9px;
          }
        }
      }
    }

    &.e-scale-after {
      .e-scale {
        &.e-v-scale {
          @if ($skin-name != 'material' and $skin-name != 'material-dark') {
            right: 9px;
          }
        }
      }
    }

    .e-tick-both {
      &.e-scale {
        &.e-h-scale {
          .e-tick {
            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
              height: calc(100% - 6px);
              top: -11px;
            }
            @if ($skin-name == 'bootstrap4') {
              height: 16px;
              top: -8px;
            }
            @if ($skin-name == 'bootstrap5') {
              height: 18px;
              top: -11px;
            }
            @if ($skin-name == 'Material3') {
              height: 18px;
              top: -13px;
            }
            @if ($skin-name == 'tailwind') {
              height: 16px;
              top: -16px;
            }

            @if ($skin-name == 'FluentUI') {
              height: 30px;
              top: -17px;
            }
            @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
              height: calc(100% - 3px);
              top: -12.5px;
            }
            @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
              height: calc(100% - 6px);
              top: -12px;
            }
            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
              background-position: center;
              height: 99%;
            }
          }

          .e-large {
            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
              height: 100%;
              top: -8px;
            }
            @if ($skin-name == 'bootstrap4') {
              height: 22px;
              top: -5px;
            }
            @if ($skin-name == 'bootstrap5') {
              height: 26px;
              top: -7px;
            }
            @if ($skin-name == 'tailwind') {
              height: 24px;
              top: -12px;
            }
            @if ($skin-name == 'FluentUI') {
              height: 38px;
              top: -13px;
            }
            @if ($skin-name == 'Material3') {
              height: 26px;
              top: -10px;
            }
            @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
              height: calc(100% + 3px);
              top: -9px;
            }
            @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
              height: calc(100% + 2px);
              top: -8px;
            }
          }
        }

        &.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;
              left: 6px;
              width: calc(100% - 12px);
            }
            @if ($skin-name == 'bootstrap5' or $skin-name == 'Material3') {
              background-position: center;
              left: 5px;
              width: 18px;
            }
            @if ($skin-name == 'tailwind') {
              left: 6px;
              width: 16px;
            }
            @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') {
              left: 0;
              width: calc(100% - 2px);
            }
            @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
              left: 2px;
              width: calc(100% - 6px);
            }
          }

          .e-large {
            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
              width: 100%;
            }
            @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
              left: 3px;
              width: calc(100% - 6px);
            }
            @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
              left: 1px;
              width: 26px;
            }
            @if ($skin-name == 'tailwind') {
              left: 3px;
              width: 24px;
            }
            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
              width: 100%;
            }
            @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
              left: -2px;
              width: calc(100% + 3px);
            }
          }
        }
      }
    }

    .e-scale {
      box-sizing: content-box;
      font-family: $slider-scale-font-family;
      height: 28px;
      line-height: normal;
      list-style: none outside none;
      margin: 0;
      outline: 0 none;
      padding: 0;
      position: absolute;
      top: $slider-scale-top;
      width: 100%;
      z-index: 1;
      @if ($skin-name != 'material' and $skin-name != 'material-dark') {
        font-size: $slider-scale-font-size;
        margin-top: $slider-center-align;
      }

      @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
        z-index: -1;
      }

      @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
        &.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 == 'FluentUI' or $skin-name == 'Material3') {
          &.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 == 'Material3') {
            line-height: 1.5;
          }
          @if ($skin-name == 'tailwind') {
            line-height: 18px;
          }
        }
      }

      &.e-v-scale {
        height: 100%;
        @if ($skin-name == 'tailwind') {
          left: calc(50% - 12px);
        }
        @else {
          left: calc(50% - 14px);
        }
        top: 0;
        width: 28px;
        @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
          margin-top: -2px;
        }

        .e-tick {
          @if ($skin-name == 'material' or $skin-name == 'material-dark') {
            background-repeat: no-repeat;
          }

          @if ($skin-name != 'material' and $skin-name != 'material-dark') {
            background-repeat: repeat-x;
          }

          &.e-first-tick {
            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
              background-position-y: center;
            }
            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
              background-position-y: top;
            }
          }

          &.e-last-tick {
            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
              background-position-y: bottom;
              margin-top: 2px;
              @if ($skin-name == 'tailwind') {
                margin-top: 3px;
              }
            }
            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
              background-position-y: bottom;
            }
          }
        }
      }

      &.e-h-scale {
        &.e-tick-after {
          @if ($skin-name == 'tailwind') {
            top: 3px;
          }
        }

        &.e-tick-before {
          @if ($skin-name == 'tailwind') {
            top: 15px;
          }
        }

        .e-tick {
          display: inline-block;
          @if ($skin-name == 'material' or $skin-name == 'material-dark') {
            background-repeat: no-repeat;
          }

          @if ($skin-name != 'material' and $skin-name != 'material-dark') {
            background-repeat: repeat-y;
            height: 100%;
            top: 0;
          }

          .e-tick-value {
            &.e-tick-before {
              top: -18px;
            }

            &.e-tick-after {
              bottom: -20px;
            }

            &.e-tick-both {
              bottom: -20px;

              &:first-child {
                top: -18px;
              }
            }
          }

          &.e-first-tick {
            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
              background-position: left center;
            }
            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
              background-position-x: left;
            }
          }

          &.e-last-tick {
            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
              background-position: right center;
            }
            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
              background-position-x: right;
            }
          }
        }
      }
    }

    &.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') {
            top: 15px;
          }
        }

        .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;
            height: 14px;
            margin-top: -4px;
            top: calc(50% - 3px);
          }
          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
            border-color: $slider-tack-ticks-border-color;
            border-radius: 4px;
            border-style: solid;
            border-width: 4px;
            height: 14px;
            top: calc(50% - 6px);
          }
        }
      }
    }

    &.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') {
            border-color: $slider-track-border-color;
            border-radius: 1px;
            border-style: solid;
            border-width: 0 5px;
            left: calc(50% - 1px);
            margin-left: -7px;
            width: 14px;
          }
          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
            border-color: $slider-tack-ticks-border-color;
            border-radius: 1px;
            border-style: solid;
            border-width: 0 5px;
            left: calc(50% - 1px);
            margin-left: -7px;
            width: 14px;
          }
        }

        .e-range {
          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
            margin-left: -1px;
          }
        }
      }
    }

    &.e-scale-both {
      &.e-vertical {
        .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-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-control-wrapper.e-slider-container {
    &.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 {
      &.e-tick-after {
        @if ($skin-name == 'tailwind') {
          left: calc(50% - 17px);
        }
      }

      &.e-tick-before {
        @if ($skin-name == 'tailwind') {
          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: 17px;
            }

            &.e-tick-after {
              left: 19px;
            }

            &.e-tick-both {
              @if $skin-name == 'bootstrap4' {
                right: 30px;
              }
              @else {
                right: 44px;
              }

              &:first-child {
                @if $skin-name == 'bootstrap4' {
                  left: 30px;
                }
                @else {
                  left: 42px;
                }
              }
            }
          }
        }
      }
    }
  }

  .e-control-wrapper.e-slider-container {
    .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-control-wrapper.e-slider-container:hover {
    .e-scale .e-tick {
      @if ($skin-name == 'material' or $skin-name == 'material-dark') {
        visibility: visible;
      }
    }
  }

  .e-control-wrapper.e-slider-container:active {
    .e-scale .e-tick {
      @if ($skin-name == 'material' or $skin-name == 'material-dark') {
        visibility: visible;
      }
    }
  }

  .e-slider-hover .e-scale .e-tick {
    @if ($skin-name == 'material' or $skin-name == 'material-dark') {
      visibility: visible;
    }
  }

  .e-control-wrapper.e-slider-container .e-slider {
    .e-handle.e-handle-active {
      @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4') {
        background-color: $slider-handle-active-bg-color;
        border-color: $slider-handle-active-border-color;
      }
      @if ($skin-name == 'bootstrap4') {
        box-shadow: $slider-handle-active-box-shadow;
      }
    }
  }
}


@include export-module('slider-theme') {

  /*! component 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 {
        background: transparent;
        border-color: transparent;
        @if $skin-name == 'Material3' or $skin-name == 'Material3-dark' {
          box-shadow: none;
        }
      }

      &.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;
      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
        border-radius: 10px;
        box-shadow: $slider-button-shadow;
        height: 20px;
        width: 20px;
      }
      @else {
        border-radius: 50%;
        @if ($skin-name == 'FluentUI') {
          height: 16px;
          width: 16px;
        }
        @else if ($skin-name == 'Material3') {
          height: 24px;
          width: 24px;
          padding: 4px;
          border: none;
        }
        @else {
          height: 18px;
          width: 18px;
        }
      }
      box-sizing: border-box;
      cursor: pointer;
      outline: none;
      @if ($skin-name != 'Material3') {
        padding: 0;
      }
      position: absolute;
      @if ($skin-name == 'bootstrap4') {
        border: 0;
        height: 16px;
        width: 16px;
      }
    }

    .e-slider-button:hover {
      @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
        background-color: $slider-range-bar-color;
        border-color: $slider-range-bar-color;
      }

      .e-button-icon::before {
        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
          color: $slider-button-icon-font-color;
        }
      }
    }

    .e-slider-button:active {
      @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
        background-color: $slider-range-bar-color;
      }

      .e-button-icon::before {
        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
          color: $slider-button-icon-font-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 == 'highcontrast' or $skin-name == 'highcontrast-light') {
          border-radius: 4px;
        }
      }

      .e-range.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') {
          border: 2px solid $slider-normal-handle-border-color;
        }
        @if ($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 {
          background-color: transparent;
          border-color: transparent;
        }

        &.e-handle-first {
          &:hover {
            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
              background-color: $slider-handle-active-bg-color;
              border-color: $slider-handle-active-border-color;
            }
          }

          &:active {
            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
              background-color: $slider-handle-active-bg-color;
              border-color: $slider-handle-active-border-color;
            }
          }
        }

        &.e-handle-second {
          &:hover {
            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
              background-color: $slider-handle-active-bg-color;
              border-color: $slider-handle-active-border-color;
            }
          }

          &:active {
            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
              background-color: $slider-handle-active-bg-color;
              border-color: $slider-handle-active-border-color;
            }
          }
        }
      }
    }

    .e-slider {
      .e-handle:hover {
        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
          background-color: $slider-hover-handle-color;
        }
        @if ($skin-name == 'bootstrap5') {
          background-color: $slider-hover-handle-color;
          border-color: $slider-hover-handle-border-color;
        }
      }

      .e-handle:active {
        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
          background-color: $slider-active-handle-bg-color;
        }
        @if ($skin-name == 'bootstrap5') {
          background-color: $slider-hover-handle-color;
          border-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') {
          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') {
        .e-slider {
          .e-range {
            background: $slider-disabled-bg-color;
          }

          .e-handle {
            background: $slider-disabled-bg-color;
            border-color: $slider-disabled-bg-color;
          }
        }
      }
    }
  }
}

.e-control-wrapper.e-slider-container {
  &: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;
      }
    }
  }
}

//layout variables
$cpicker-split-btn-padding: 5px 8px !default;
$cpicker-bigger-split-btn-padding: 7px 12px !default;
$cpicker-split-line-height: 14px !default;
$cpicker-bigger-split-line-height: 18px !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: 24px !default;
$cpicker-bigger-split-btn-icon-width: 24px !default;
$cpicker-border: 0 !default;
$cpicker-radius: 0 !default;
$cpicker-shadow: $shadow-lg !default;
$cpicker-tiles-height: 27px !default;
$cpicker-tiles-width: 27px !default;
$cpicker-bigger-tile-size: 29px !default;
$cpicker-transparent-bg-pattern: transparent url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+') !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-container-height: 232px !default;
$cpicker-bigger-container-height: 301px !default;
$cpicker-container-width: 341px !default;
$cpicker-bigger-tile-size: 29px !default;
$cpicker-bigger-container-width: 462px !default;
$cpicker-handler-radius: 6px !default;
$cpicker-handler-height: 8px !default;
$cpicker-handler-width: 8px !default;
$cpicker-handler-margin: -4px !default;
$cpicker-slider-top: calc(50% - 9px) !default;
$cpicker-slider-track-top: calc(50% - 4px) !default;
$cpicker-slider-wrapper-padding: 12px 8px 12px 9px !default;
$cpicker-bigger-slider-wrapper-padding: 16px 16px !default;
$cpicker-slider-container-height: 18px !default;
$cpicker-slider-container-width: 82.34% !default;
$cpicker-bigger-slider-container-width: 82.944% !default;
$cpicker-bigger-slider-container-height: 21px !default;
$cpicker-bigger-slider-handle-radius: 10px !default;
$cpicker-slider-element-height: 8px !default;
$cpicker-slider-height: 8px !default;
$cpicker-slider-handler-box-shadow: 0 1px 2px rgba($black, .3) !default;
$cpicker-slider-handle-size: 14px !default;
$cpicker-slider-handle-top: calc(68% - 10px) !default;
$cpicker-bigger-slider-height: 12px;
$cpicker-bigger-slider-handle-size: 16px !default;
$cpicker-bigger-slider-handle-top: calc(76% - 13px) !default;
$cpicker-input-picker-padding: 12px 8px 12px 9px !default;
$cpicker-input-palette-padding: 16px 16px !default;
$cpicker-input-container: 89.8% !default;
$cpicker-bigger-input-container: 90.7% !default;
$cpicker-numeric-input-height: 30px !default;
$cpicker-bigger-numeric-input-height: 38px !default;
$cpicker-input-height: 30px !default;
$cpicker-bigger-input-height: 38px !default;
$cpicker-label-width: 14% !default;
$cpicker-hex-label-width: 28% !default;
$cpicker-bigger-hex-label-width: 33.5% !default;
$cpicker-value-hidden-label-width: 13% !default;
$cpicker-value-hidden-hex-label-width: $cpicker-hex-label-width !default;
$cpicker-hex-hidden-width: 21.25% !default;
$cpicker-value-hex-hidden-width: 22.18% !default;
$cpicker-bigger-hex-hidden-width: 21.58% !default;
$cpicker-bigger-value-hex-hidden-width: 22.42% !default;
$cpicker-bigger-label-width: 12.34% !default;
$cpicker-bigger-value-hidden-label-width: 13.2% !default;
$cpicker-label-margin: 2.75% !default;
$cpicker-bigger-label-margin: 3.425% !default;
$cpicker-switch-btn-padding: 2px 3px !default;
$cpicker-value-switch-btn-margin: 6px !default;
$cpicker-bigger-switch-btn-padding: $cpicker-switch-btn-padding !default;
$cpicker-focus-shadow: 0 0 2px 3px rgba($black, .2) !default;
$cpicker-switcher-outline: none !default;
$cpicker-preview-height: 18px !default;
$cpicker-preview-size: 13.45% !default;
$cpicker-preview-margin-left: 4.205% !default;
$cpicker-bigger-preview-margin-left: 4.657% !default;
$cpicker-bigger-preview-size: 12.405% !default;
$cpicker-preview-border: 1px solid $border-light !default;
$cpicker-preview-container-border: $cpicker-preview-border !default;
$cpicker-preview-container-top: 0 !default;
$cpicker-previous-height: 18px !default;
$cpicker-right-icon-content: '\e7b7' !default;
$cpicker-type-switch-btn-margin: 0 !default;
$cpicker-bigger-type-switch-btn-margin: 0 !default;
$cpicker-switch-btn-width: 10.09% !default;
$cpicker-switch-btn-height: 30px;
$cpicker-palette-switch-btn-width: 12.28%;
$cpicker-bigger-switch-btn-width: 9.306% !default;
$cpicker-ctrl-btn-padding: 8px !default;
$cpicker-palette-ctrl-btn-padding: 23px 8px 8px !default;
$cpicker-bigger-palette-ctrl-btn-padding: 25px 12px 12px !default;
$cpicker-ctrl-btn-width: 50% !default;
$cpicker-cancel-btn-margin: 3.62% !default;
$cpicker-tooltip-preview-size: 24px !default;
$cpicker-bigger-tooltip-preview-size: 30px !default;
$cpicker-opacity-hidden-hex-width: 36% !default;
$cpicker-opacity-hidden-numeric-width: 16.3% !default;
$cpicker-opacity-slider-border: 0 !default;
$cpicker-bigger-opacity-hidden-numeric-width: 16.76% !default;
$cpicker-hex-opacity-hidden-width: 29.59% !default;
$cpicker-hex-opacity-hidden-width: 29.9% !default;
$cpicker-value-opacity-hex-hidden-width: 30.82% !default;
$cpicker-bigger-value-opacity-hex-hidden-width: 31% !default;
$cpicker-value-opacity-hide-hex-label-width: 36% !default;
$cpicker-value-opacity-hide-label-width: 17.58% !default;
$cpicker-bigger-value-opacity-hide-label-width: 17.9% !default;
$cpicker-type-switch-margin: 0 !default;
$cpicker-blazor-input-margin: -1px !default;
$cpicker-blazor-bigger-input-margin: calc(3.425% - 2.68px) !default;
$cpicker-slider-handler-focus-color: $white !default;
$cpicker-slider-handler-color: $white !default;
$cpicker-slider-tab-handler-color: $cpicker-slider-handler-color !default;
$cpicker-slider-tab-shadow: $cpicker-slider-handler-box-shadow !default;
$cpicker-tile-active-border-color: $white !default;
$cpicker-color: $flyout-bg-color !default;
$cpicker-tile-outline: $black .5px solid !default;
$cpicker-tiles-hover-shadow: 2px 2px 7px 2px rgba($border-light, .3) !default;
$cpicker-tile-border: .5px solid transparent !default;
$cpicker-to-bottom-gradient-start: rgba(0, 0, 0, 0) !default;
$cpicker-to-bottom-gradient-end: $black !default;
$cpicker-to-right-gradient-start: $white !default;
$cpicker-to-right-gradient-end: rgba(255, 255, 255, 0) !default;
$cpicker-gradient-0: $colorpicker-gradient-1 !default;
$cpicker-gradient-16: $colorpicker-gradient-2 !default;
$cpicker-gradient-33: $ccolorpicker-gradient-3 !default;
$cpicker-gradient-50: $colorpicker-gradient-4 !default;
$cpicker-gradient-67: $colorpicker-gradient-5 !default;
$cpicker-gradient-84: $colorpicker-gradient-6 !default;
$cpicker-gradient-100: $colorpicker-gradient-7 !default;
$cpicker-overlay: rgba(0, 0, 0, .6) !default;
$cpciker-handler-border: 1px solid $white !default;
$cpicker-handler-shadow: 0 0 3px rgba($black, .7), inset 0 0 2px rgba($black, .7) !default;
$cpicker-handler-tooltip-color: $white !default;
$cpicker-split-btn-icon-color: $icon-color !default;
$cpicker-split-btn-border: 1px solid $border !default;

@include export-module('color-picker-layout') {
  .e-colorpicker-wrapper,
  .e-colorpicker-container {
    display: inline-block;
    line-height: 0;
    outline: none;
    user-select: none;

    & .e-colorpicker {
      height: 1px;
      opacity: 0;
      position: absolute;
      width: 1px;
    }

    & .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: 0;
          border-top-left-radius: 0;
        }
        box-shadow: none;
      }
    }

    & .e-btn.e-icon-btn {
      @if $skin-name == 'bootstrap4' {
        padding: $cpicker-split-btn-padding;
      }
      @else if $skin-name == 'bootstrap5' {
        background-color: $cpicker-tile-active-border-color;
        border: $cpicker-split-btn-border;
        color: $cpicker-split-btn-icon-color;
      }
    }

    & .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;
        padding: $cpicker-split-btn-padding;
        @if $skin-name == 'bootstrap4' {
          box-shadow: none;
        }
        @else if $skin-name == 'Material3' {
          background: $cpicker-split-btn-background-color;
          border-radius: $cpicker-split-btn-border-radius;
          border-bottom-right-radius: 0;
          border-top-right-radius: 0;
          border-right-color: transparent;
          box-shadow: none;
        }
        @else if $skin-name == 'bootstrap5' {
          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: 0;
          position: relative;
          width: $cpicker-split-btn-icon-height;

          & .e-split-preview {
            border-radius: $btn-border-radius;
          }
        }

        & .e-btn.e-icon-btn {
          @if $skin-name == 'bootstrap4' {
            padding: $cpicker-split-btn-padding;
          }
          @else if $skin-name == 'bootstrap5' {
            background-color: $cpicker-tile-active-border-color;
            border: $cpicker-split-btn-border;
            color: $cpicker-split-btn-icon-color;
          }
        }
      }

      &.e-rtl {
        & .e-split-colorpicker.e-split-btn {
          padding: $cpicker-split-btn-padding;
          @if $skin-name == 'Material3' {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
          }
        }

        & .e-dropdown-btn.e-icon-btn {
          @if $skin-name == 'Material3' {
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
          }
        }

        & .e-btn.e-icon-btn {
          @if $skin-name == 'bootstrap4' {
            padding: $cpicker-split-btn-padding;
          }
          @else if $skin-name == 'Material3' {
            background: $cpicker-split-btn-background-color;
            border-radius: $cpicker-split-btn-border-radius;
            border-left-color: transparent;
          }
          @else if $skin-name == 'bootstrap5' {
            background-color: $cpicker-tile-active-border-color;
            border: $cpicker-split-btn-border;
            color: $cpicker-split-btn-icon-color;
          }
        }
      }
    }

    * {
      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: 0;
  }

  /* stylelint-disable property-no-vendor-prefix */
  .e-colorpicker {
    &.e-modal,
    &.e-hsv-model {
      -webkit-overflow-scrolling: touch;
      height: 100%;
      left: 0;
      position: fixed;
      top: 0;
      width: 100%;
    }

    &.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: 270px;
    }
  }

  .e-dropdown-popup.e-transparent .e-container {
    display: none;
  }

  body {
    &.e-colorpicker-overflow {
      overflow: visible;
    }
  }

  .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;
        padding: $cpicker-bigger-split-btn-padding;
        @if $skin-name == 'bootstrap5' {
          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 {
          padding: $cpicker-bigger-split-btn-padding;
        }
      }
    }

    .e-colorpicker-popup:not(.e-split-btn-wrapper):not(.e-dropdown-btn) {
      line-height: 0;
    }
  }

  .e-container {
    border: $cpicker-border;
    border-radius: $cpicker-radius;
    display: inline-block;
    line-height: 0;
    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;
      }

      & .e-mode-switch-btn {
        background: $cpicker-mode-palette-icon;
        @if $theme-name == 'Matrial3' {
          border-radius: 2px;
        }
      }
    }

    &.e-color-palette {
      @if $skin-name == 'bootstrap4' {
        background-color: $content-bg;
        border: 1px solid $cpicker-shadow;
      }
      width: auto;

      & .e-mode-switch-btn {
        background: $cpicker-mode-picker-icon;
      }
    }

    & .e-custom-palette {
      width: auto;

      & .e-palette {
        padding: 10px;
      }

      &.e-palette-group {
        height: $cpicker-container-width;
        overflow-y: scroll;
      }
    }

    & .e-palette {
      border-bottom: $cpicker-border;
      display: table;
      line-height: 0;
      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 {
          box-shadow: $cpicker-tiles-hover-shadow;
          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: 100%;
      @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;
            top: $cpicker-slider-track-top;

            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
              border-radius: 6px;
            }
            @else if $skin-name == 'bootstrap5' {
              border-radius: 4px;
            }
            @else if $skin-name == 'Material3' {
              border-radius: $cpicker-handler-height;
            }
            @else {
              border-radius: 0;
            }
          }

          & .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: 100%;
            z-index: 1;

            @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
              border-radius: 6px;
            }
          }
        }

        & .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;
        @if $skin-name == 'FluentUI' {
          height: 50px;
        }
        @else if $skin-name == 'Material3' {
          height: 42px;
        }
        @else {
          height: 32px;
        }
        margin-left: $cpicker-preview-margin-left;
        position: relative;
        top: $cpicker-preview-container-top;
        width: $cpicker-preview-size;
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          height: 36px;
        }

        & .e-preview {
          display: block;
          height: $cpicker-preview-height;
          position: absolute;
          width: 100%;

          &.e-current {
            border-bottom: $cpicker-preview-border;
            top: 0;
          }

          &.e-previous {
            height: $cpicker-previous-height;
            @if $skin-name == 'FluentUI' {
              top: 25px;
            }
            @if $skin-name == 'Material3' {
              top: 20px;
            }
            @else {
              top: $cpicker-preview-height;
            }
          }
        }
      }
    }

    & .e-selected-value {
      align-items: center;
      display: flex;
      padding: $cpicker-input-picker-padding;
      user-select: none;
      width: 100%;

      & .e-input-container {
        & .e-float-input {
          & input {
            padding-left: 0;
            @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;
        }
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          font-size: 22px;
          line-height: 22px;
        }
        @else {
          font-size: 16px;
          line-height: 16px;
        }

        &::before {
          @if $skin-name == 'Material3' {
            margin-left: 2px;
          }
        }
      }
    }

    & .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' {
          margin-top: 8px;
        }

        &: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 {
          text-align: center;
          @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' or $skin-name == 'Material3' {
            text-align: left;
          }
        }
      }
    }

    & .e-switch-ctrl-btn {
      display: inline-block;
      padding: $cpicker-ctrl-btn-padding;
      white-space: nowrap;
      width: 100%;

      & .e-ctrl-btn {
        float: right;
        text-align: right;
        white-space: nowrap;
        @if $skin-name == 'bootstrap4' or $skin-name == 'Material3' {
          width: 86.913%;
        }
        @else {
          width: 89.913%;
        }

        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          width: 86.913%;
        }

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

          &.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: 2px;
        }

        &: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: 0;
      }
      @else {
        height: $cpicker-switch-btn-height;
      }
    }

    &.e-color-picker {
      & .e-value-switch-btn {
        &:focus,
        &:hover,
        &:active {
          border-color: transparent;
          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: 32px;
              }
              width: $cpicker-palette-switch-btn-width;
            }
          }
        }
      }
    }
  }

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

    & .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: 100%;
      }

      & .e-float-input {
        &:first-child {
          width: $cpicker-value-hidden-hex-label-width;
        }

        &.e-numeric {
          width: $cpicker-value-hidden-label-width;
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }

    &.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: 0;
          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: 0;

          & input {
            padding-right: 0;
          }
        }

        & .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: 0;
            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: 0;
          }
        }
      }
    }
  }

  .e-bigger {
    & .e-container {
      @if $skin-name == 'Material3' {
        border-radius: $cpicker-bigger-popup-border-radius;
        box-shadow: $cpicker-bigger-box-shadow;
      }
      &.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;
          }
        }

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

      & .e-palette {
        & .e-tile {
          @if $skin-name == 'Material3' {
            height: $cpicker-tiles-height;
          }
          @else {
            height: $cpicker-bigger-tile-size;
          }
          width: $cpicker-bigger-tile-size;
        }
      }

      & .e-hsv-container {
        & .e-handler {
          @if $skin-name == 'bootstrap4' {
            height: 12px;
            width: 12px;
          }
        }

        & .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 == 'tailwind' or $skin-name == 'tailwind-dark' {
            top: 5px;
          }
          @else if $skin-name == 'FluentUI' {
            top: $cpicker-preview-container-top;
          }
          @else {
            top: 0;
          }
        }

        & .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' {
                border-radius: 6px;
              }
            }

            & .e-opacity-slider {
              & .e-opacity-empty-track {
                @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
                  height: 12px;
                }
              }
            }

            & .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;
            padding: 16px;
            white-space: nowrap;
            width: 100%;
          }

          & .e-ctrl-btn {
            width: 90.6%;
          }

          & .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-input-container {
        width: $cpicker-bigger-input-container;

        & .e-float-input {
          margin-right: $cpicker-bigger-label-margin;

          &: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;
            }
          }
        }
      }

      & .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' {
          height: $cpicker-bigger-switch-btn-width;
        }
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          font-size: 22px;
          line-height: 22px;
        }
        @else {
          font-size: 18px;
          line-height: 18px;
        }
      }

      & .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: 100%;
        }

        & .e-float-input {
          &:last-child {
            margin-right: 0;
          }

          &.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: 0;
          margin-right: $cpicker-bigger-preview-margin-left;
        }
      }

      & .e-selected-value {
        & .e-float-input {
          margin-left: $cpicker-bigger-label-margin;
          margin-right: 0;
        }
      }

      &.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: 0;
          }
        }
      }
    }
  }

  .e-hide-switchable-value,
  .e-bigger.e-hide-switchable-value,
  .e-bigger .e-hide-switchable-value {
    & .e-container {
      & .e-input-container {
        & .e-float-input:first-child {
          width: 100%;
        }
      }
    }
  }

  .e-popup.e-tooltip-wrap {
    &.e-color-picker-tooltip {
      border-bottom-left-radius: 50%;
      border-bottom-right-radius: 0%;
      border-top-left-radius: 50%;
      border-top-right-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: 50%;
        height: $cpicker-tooltip-preview-size;
        position: relative;
        transform: rotate(45deg);
        width: $cpicker-tooltip-preview-size;
      }
    }
  }

  .e-split-preview,
  .e-tip-transparent {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .e-bigger .e-popup.e-tooltip-wrap,
  .e-bigger.e-popup.e-tooltip-wrap {
    &.e-color-picker-tooltip {
      min-width: 32px;

      & .e-tip-content {
        height: $cpicker-bigger-tooltip-preview-size;
        width: $cpicker-bigger-tooltip-preview-size;
      }
    }
  }
}


@include export-module('color-picker-theme') {
  .e-container {
    @if $skin-name == 'Material3' {
      background: $cpicker-color;
    }
    @else {
      background-color: $cpicker-color;
    }

    & .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;
        border-color: $cpicker-slider-handler-color;
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          border: 1px solid $white;
        }

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

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

  .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' {
        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' {
          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(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
          box-shadow: 0 0 0 .2rem $color-rgba;
          color: $gray-700;
        }
        @else if $skin-name == 'bootstrap5' {
          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(mix(lighten($cpicker-handler-tooltip-color, 50%), $gray-700, 15%), .5);
          box-shadow: 0 0 0 .2rem $color-rgba;
          color: $cpicker-handler-tooltip-color;
        }
        @else if $skin-name == 'bootstrap5' {
          background-color: $btn-active-bgcolor;
          box-shadow: $btn-active-box-shadow;
          color: $btn-active-color;
        }
      }

      &:disabled,
      &.e-disabled {
        background-color: transparent;
        box-shadow: none;
        @if $skin-name != 'tailwind' and $skin-name != 'FluentUI' {
          color: $btn-disabled-bgcolor;
        }
        @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-bootstrap5-icons') {
  .e-container {
    & .e-value-switch-btn {
      &::before {
        content: '\e748';
      }
    }
  }
}

$rating-li-font-size: $font-icon-22 !default;
$rating-li-padding: 4px !default;
$rating-li-min-width-height: 30px !default;
$rating-focus-border-radius: 4px !default;
$rating-label-bottom-margin: 4px !default;
$rating-label-right-margin: 8px !default;
$rating-label-top-margin: 8px !default;
$rating-label-left-margin: 11px !default;
$rating-label-font-size: $text-xs !default;
$rating-label-line-height: 18px !default;
$rating-reset-font-size : $font-icon-18 !default;
$rating-tooltip-tip-bottom-height: 8px !default;

$rating-small-li-font-size: $font-icon-16 !default;
$rating-small-li-min-width-height: 24px !default;
$rating-small-label-font-size: $text-xxs !default;
$rating-small-label-line-height: 16px !default;
$rating-small-reset-font-size : $font-icon-12 !default;

$rating-bigger-li-font-size: $font-icon-32 !default;
$rating-bigger-li-min-width-height: 40px !default;
$rating-bigger-label-font-size: $text-sm !default;
$rating-bigger-label-line-height: 22px !default;
$rating-bigger-reset-font-size : $font-icon-28 !default;

$rating-bigger-small-li-font-size: $font-icon-26 !default;
$rating-bigger-small-li-min-width-height: 34px !default;
$rating-bigger-small-label-font-size: $text-xs !default;
$rating-bigger-small-label-line-height: 18px !default;
$rating-bigger-small-reset-font-size : $font-icon-22 !default;

$rating-border-width: 1px !default;

$rating-selected-bg-color: $rating-selected-color !default;
$rating-unrated-bg-color: $rating-unrated-color !default;
$rating-hover-bg-color: $rating-selected-hover-color !default;
$rating-pressed-bg-color: $rating-pressed-color !default;
$rating-selected-disabled-bg-color: $rating-selected-disabled-color !default;
$rating-unrated-disabled-bg-color: $rating-unrated-disabled-color !default;
$rating-li-focus: $rating-selected-color !default;
$rating-reset-icon-color: $rating-unrated-bg-color !default;
$rating-reset-hover-icon-color: $rating-selected-hover-color !default;
$rating-reset-disabled-icon-color: $rating-selected-disabled-color !default;

@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: 0;
      margin: 4px;

      &:focus-visible:not(:hover) .e-rating-focus {
        outline: 1px solid;
      }

      &:focus-visible {
        outline: none;
      }
    }

    &.e-rating-readonly {
      cursor: default;
      pointer-events: none;
    }

    .e-rating-item-container {
      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:not(.e-disabled) {
      .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;
      margin: auto 2px 6px;
      font-size: $rating-reset-font-size;
      padding: 2px;

      &.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: 50px;
      }

      &.e-label-bottom,
      &.e-label-top {
        flex-basis: 100%;
        width: 0;
        text-align: center;
      }

      &.e-label-right {
        text-align: left;
        margin: auto $rating-label-right-margin;
      }

      &.e-label-left {
        text-align: right;
        margin: auto $rating-label-left-margin;
      }

      &.e-label-top {
        margin: $rating-label-top-margin 0;
      }

      &.e-label-bottom {
        margin: $rating-label-bottom-margin 0;
      }
    }

    &.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: 50%;
      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: 50%;
        top: 100%;
        transform: translate(-50%, 0);
      }

      .e-arrow-tip-inner.e-tip-bottom {
        top: -6px;
      }
    }
  }

  .e-rating-tooltip .e-tip-content {
    text-align: center;
  }

  .e-small.e-rating-container,
  .e-small .e-rating-container {
    .e-rating-item-container {
      font-size: $rating-small-li-font-size;
    }

    .e-rating-label {
      font-size: $rating-small-label-font-size;
      line-height: $rating-small-label-line-height;
    }

    .e-reset {
      font-size: $rating-small-reset-font-size;
    }
  }

  .e-bigger.e-rating-container,
  .e-bigger .e-rating-container {
    .e-rating-item-container {
      font-size: $rating-bigger-li-font-size;
    }

    .e-rating-label {
      font-size: $rating-bigger-label-font-size;
      line-height: $rating-bigger-label-line-height;
    }

    .e-reset {
      font-size: $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 {
    .e-rating-item-container {
      font-size: $rating-bigger-small-li-font-size;
    }

    .e-rating-label {
      font-size: $rating-bigger-small-label-font-size;
      line-height: $rating-bigger-small-label-line-height;
    }

    .e-reset {
      font-size: $rating-bigger-small-reset-font-size;
    }
  }
}


@include export-module('rating-theme') {
  .e-rating-container {
    .e-rating-item-list {
      &:focus-visible:not(:hover) .e-rating-focus {
        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;
        }
        @if ($skin-name == 'Material3' or $skin-name =='tailwind') {
          background: $rating-unrated-bg-color;
          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 */
          }
        }
      }
    }
  }
}

//default
//enddefault
//layout variables
$cmenu-back-icon: '\e977' !default;
$cmenu-back-icon-margin: 8px !default;
$cmenu-bigger-caret-font-size: $text-base !default;
$cmenu-bigger-font-size: $text-base !default;
$cmenu-bigger-li-height: 36px !default;
$cmenu-bigger-li-padding: 0 16px !default;
$cmenu-bigger-max-width: 280px !default;
$cmenu-bigger-min-width: 112px !default;
$cmenu-caret-blank-icon: 14px !default;
$cmenu-caret-font-size: $text-base !default;
$cmenu-caret-icon: '\e956' !default;
$cmenu-caret-icon-rtl: '\e937' !default;
$cmenu-caret-li-padding: 36px !default;
$cmenu-caret-right: 7px !default;
$cmenu-icon-margin-right: 8px !default;
$cmenu-li-height: 30px !default;
$cmenu-li-padding: 0 12px !default;
$cmenu-li-right-padding: 12px !default;
$cmenu-li-border-width: 1px !default;
$cmenu-max-width: 240px !default;
$cmenu-icon-font-size: $text-lg !default;
$cmenu-icon-bigger-font-size: 22px !default;
$cmenu-min-width: 120px !default;
$cmenu-parent-ul-box-shadow: $shadow-lg !default;
$cmenu-seperator-bigger-padding: 4px 0 !default;
$cmenu-seperator-padding: 4px 0 !default;
$cmenu-ul-border: 1px solid $border-light !default;
$cmenu-ul-border-radius: 4px !default;
$cmenu-ul-padding: 0 !default;
$cmenu-ul-bigger-padding: 4px 0 !default;
$cmenu-caret-color: $icon-color !default;
$cmenu-color: $content-text-color !default;
$cmenu-disable-text: rgba($content-text-color, .65) !default;
$cmenu-font-size: $text-sm !default;
$cmenu-font-weight: $font-weight-normal !default;
$cmenu-li-bgcolor: $flyout-bg-color-hover !default;
$cmenu-li-border-color: $border-light !default;
$cmenu-li-border-style: solid !default;
$cmenu-li-selection-bgcolor: $flyout-bg-color-pressed !default;
$cmenu-li-selection-font-color: $content-text-color-focus !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-icon-color: $icon-color !default;
$cmenu-icon-disabled-color: rgba($icon-color, .65) !default;
$cmenu-selected-color: $flyout-text-color-pressed !default;
$cmenu-sub-ul-box-shadow: $shadow-lg !default;
$cmenu-ul-bgcolor: $flyout-bg-color !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;

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

  &.e-separator {
    cursor: auto;
    line-height: normal;
    pointer-events: none;
  }
}

@mixin li-size {
  height: $cmenu-li-height;
  line-height: $cmenu-li-height;
  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;
  }

  &.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 separator-bigger-size {
  height: auto;
  line-height: normal;
}

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

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

@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-height;

  & .e-menu-icon {
    font-size: $cmenu-icon-bigger-font-size;
    line-height: $cmenu-bigger-li-height;
    @if $skin-name == 'tailwind' {
      margin-right: $cmenu-icon-bigger-margin-right;
    }
  }

  & .e-caret {
    line-height: $cmenu-bigger-li-height;
  }

  &.e-separator {
    @include separator-bigger-size;
  }
}

@mixin bigger-rtl-blank-icon {
  padding-left: $cmenu-caret-blank-icon;

  &.e-menu-caret-icon {
    padding-left: $cmenu-caret-li-padding;
  }
}



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

  /*! 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 == 'tailwind' or $skin-name == 'Material3' {
            padding: 4px 0;
          }
        }

        &.e-ul {
          font-family: $font-family;
        }

        & .e-menu-item  {
          @include li-layout;
          @include li-size;

          & .e-caret {
            font-size: $cmenu-caret-font-size;
          }

          & .e-previous {
            margin-right: $cmenu-back-icon-margin;
          }

          &.e-disabled {
            cursor: auto;
            pointer-events: none;
          }
        }

        .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: 0;
          box-shadow: none;
          height: 1px;
          left: 0;
          min-width: 0;
          padding: 0;
          top: 0;
          width: 0;
        }

        &.e-transparent .e-menu-item {
          height: 0;
          padding: 0;
        }

        &.e-transparent .e-menu-item.e-separator {
          border: 0;
          margin: 0;
        }
      }
    }

    &:not(.e-menu-container) {

      & .e-menu-vscroll.e-vscroll {
        box-shadow: $cmenu-parent-ul-box-shadow;

        & .e-vscroll-bar {
          height: 100%;
          width: inherit;
        }

        & .e-scroll-nav {
          height: 16px;
        }

        &:not(.e-scroll-device) {
          padding: 16px 0;
        }

        & ul {
          box-shadow: none;
          margin-top: -12px;
          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-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 == 'Material3' {
      padding: 8px 0;
    }

    & .e-menu-item  {
      @include bigger-li-size;

      & .e-caret {
        font-size: $cmenu-bigger-caret-font-size;
      }
    }
  }

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


@mixin focused-icon-color {
  @if $skin-name != 'bootstrap5' {
    & .e-caret {
      color: $cmenu-caret-color;
    }
  
    & .e-menu-icon {
      color: $cmenu-icon-color;
    }
  }
}

@mixin selected-icon-color {
  @if $skin-name != 'bootstrap5' {
    & .e-caret {
      color: $cmenu-caret-hover-color;
    }
  
    & .e-menu-icon {
      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;
}

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

@mixin disabled-color {
  & .e-disabled {
    color: $cmenu-disable-text;
    opacity: 1;

    & .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') {

  /*! 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;

          & .e-menu-url {
            color: $cmenu-color;
          }

          &.e-focused {
            @include focused-color;
            @include focused-icon-color;
          }

          &.e-selected {
            @include selected-color;
            @include selected-icon-color;
          }
        }

        @include disabled-color;

        & .e-separator {
          border-bottom-color: $cmenu-li-border-color;
        }
      }
    }

    &:not(.e-menu-container) {

      & .e-menu-vscroll.e-vscroll {
        background-color: inherit;
        border: $cmenu-ul-border;

        & .e-scroll-nav {
          border-color: $cmenu-li-border-color;
        }
      }
    }
  }
}


@include export-module('context-menu-bootstrap5-icons') {

  /*! contextmenu layout */
  .e-contextmenu-wrapper,
  .e-contextmenu-container {
    @at-root {
      & ul {
        & .e-menu-item  {
          & .e-previous {
            &::before {
              content: '\e773';
            }
          }

          & .e-caret {
            &::before {
              content: '\e748';
            }
          }
        }
      }
    }
  }

  .e-rtl.e-contextmenu-wrapper .e-menu-item,
  .e-rtl.e-contextmenu-container .e-menu-item {
    & .e-caret {
      &::before {
        content: '\e765';
      }
    }
  }
}

/*! component's theme wise override tailwind-definitions and variables */

// Generic
$icon-zero: 0 !default;
$icon-border-radius: 50% !default;
$grid-layout-position: relative !default;
$panel-position: absolute !default;
$panel-box-sizing: border-box !default;

// Header styles

// Mouse
$panel-header-height: 38px !default;
$panel-header-padding: 8px 18px !default;
$panel-header-line-height: 22px !default;
$panel-header-border-radius: 4px !default;
$panel-header-color: $content-text-color !default;
$panel-header-font-size: $text-sm !default;
$panel-header-bg-color: $content-bg-color-alt1 !default;
$panel-header-font-weight: $font-weight-medium !default;
$panel-header-border-bottom: 1px solid $border-light !default;
$panel-header-font-family: $font-family !default;
$panel-header-white-space: nowrap !default;
$panel-header-overflow: hidden !default;
$panel-header-text-overflow: ellipsis !default;

// Touch
$panel-bigger-header-height: 40px !default;
$panel-bigger-header-padding: 8px 18px !default;
$panel-bigger-header-line-height: 24px !default;
$panel-bigger-header-color: $content-text-color !default;
$panel-bigger-header-font-size: $text-base !default;
$panel-bigger-header-font-weight: $font-weight-medium !default;

// Panel styles
$panel-border: 1px solid $border-light !default;
$panel-border-radius: 4px !default;
$panel-full-height: 100% !default;
$panel-full-width: 100% !default;
$panel-hover-border: 1px solid $border-dark !default;
$panel-active-border: 1px solid $primary-border-color !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: none !default;
$panel-resize-one-dimensional-icon-border: none !default;
$panel-resize-one-dimensional-icon-shadow: none !default;

$panel-resize-two-dimensional-icon-height: 8px !default;
$panel-resize-two-dimensional-icon-width: 8px !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: none !default;
$panel-resize-two-dimensional-icon-color: $icon-color-disabled !default;
$panel-resize-two-dimensional-icon-border: none !default;
$panel-resize-two-dimensional-icon-shadow: none !default;

// south-east-icon-styles
$panel-south-east-icon-right: 2px !default;
$panel-south-east-icon-bottom: 2px !default;

// south-west-icon-style
$panel-south-west-icon-left: 2px !default;
$panel-south-west-icon-bottom: 2px !default;

// north-east-icon-styles
$panel-north-east-icon-right: 2px !default;
$panel-north-east-icon-top: 2px !default;

// north-west-icon-styles
$panel-north-west-icon-left: 2px !default;
$panel-north-west-icon-top: 2px !default;

// droppable area border
$panel-drop-border-radius: 4px !default;

// dragging element style
$panel-dragging-cursor: move !default;
$panel-drag-prevent: none !default;

// Blazor ContentTemplate styles
$panel-content-template-height: inherit !default;
$panel-content-template-width: inherit !default;

/* stylelint-disable */
$panel-dragging-zindex: 1111 !important !default;
$panel-drag-prevent: none !default;

$element-width-complete: 100% !important !default;

// colors

// Panel styles
$panel-active-background: $flyout-bg-color !default;
$panel-hover-box-shadow: $shadow !default;
$panel-active-drag-box-shadow: $shadow !default;
$panel-background: $flyout-bg-color !default;
$panel-box-shadow: $shadow-sm;

// droppable area border
$panel-drop-background: $primary-lighter !default;
$panel-drop-border: 1px $primary-border-color dashed !default;

//gridlines
$gridline-background: $content-bg-color-alt1 !default;
$gridline-border: $border-dark !default;
$gridline-border-radius: 6px !default;

@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') {
    line-height: $panel-bigger-header-line-height;
  }
}

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

    .e-dashboard-gridline-table tbody tr td.e-dashboard-gridline {
      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
        border: 1px dashed $gridline-border;
      }
      @else {
        border: 1px dotted $gridline-border;
      }

      @if ($skin-name == 'bootstrap5') {
        border-radius: $gridline-border-radius;
      }
      position: absolute;
    }

    &.e-responsive {
      width: $element-width-complete;
    }

    &.e-prevent {
      user-select: $panel-drag-prevent;
    }

    & .e-panel {

      & .e-resize.e-dl-icon {
        @if ($skin-name == 'tailwind') {
          line-height: 9px;
        }
      }

      &:hover {
        @if ($skin-name != 'tailwind') {
          border: $panel-hover-border;
        }

        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
          box-shadow: $panel-hover-box-shadow;
        }

        & .e-panel-container {
          & .e-resize.e-dl-icon {
            display: block;
          }
        }
      }

      &:active {
        @if ($skin-name != 'tailwind') {
          border: $panel-active-border;
        }
      }

      & .e-panel-container {
        & .e-resize.e-dl-icon {
          display: none;
        }
      }

      @if $skin-name != 'highcontrast' {
        border-radius: $panel-border-radius;
      }

      &.e-panel-transition {
        transition: top .5s, left .5s;
      }

      & .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') {
          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-panel-container {
        height: $panel-full-height;
        width: $panel-full-width;

        & .e-panel-content .e-blazor-template {
          height: $panel-content-template-height;
          width: $panel-content-template-width;
        }
      }

      & .e-panel-content {
        @if $skin-name == 'tailwind' {
          padding: $panel-content-padding;
        }
      }
    }

    & .e-panel {
      border: $panel-border;
      height: $panel-full-height;
      user-select: none;
      width: $panel-full-width;

      & .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-drag:hover {
      cursor: $panel-dragging-cursor;
    }

    & .e-drag-restrict {
      &.e-drag:hover,
      .e-drag:hover {
        cursor: default;
      }
    }

    & .e-panel.e-dragging,
    & .e-panel.e-item-moving {
      cursor: $panel-dragging-cursor;
      z-index: $panel-dragging-zindex;
    }

    & .e-panel.e-rtl {

      & .e-panel-header {

        & .e-header-template {
          float: left;
        }
      }
    }

    .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-panel.e-bigger {
      & .e-panel-header {
        @include bigger-header-style;
      }
    }
  }

  .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-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-panel.e-dragging {
      &:active {
        @if ($skin-name == 'tailwind') {
          background: $content-bg-color;
          box-shadow: $panel-active-drag-box-shadow;
        }
      }
    }

    & .e-panel {
      background: $panel-background;
      box-shadow: $panel-box-shadow;
      box-sizing: $panel-box-sizing;
      position: $panel-position;

      &:active {
        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
          background: $panel-active-background;
        }
      }

      & .e-panel-container {
        & .e-panel-header {
          color: $panel-header-color;
        }

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

    .e-panel.e-bigger {
      & .e-panel-header {
        color: $panel-bigger-header-color;
      }
    }
  }
}


@include export-module('dashboardlayout-bootstrap5-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: 4px;
          content: '\e761';
          font-size: 12px;
          position: absolute;
          right: 4px;
        }

        &.e-south-west::before {
          bottom: 4px;
          content: '\e761';
          font-size: 12px;
          left: 4px;
          position: absolute;
          transform: rotateY(180deg);
        }
      }
    }
  }
}

//default
$datepicker-icon: '\e901' !default;
$datepicker-icon-font-size: $font-icon-16 !default;
$datepicker-icon-container-min-height: 18px !default;
$datepicker-icon-container-min-width: 30px !default;
$datepicker-bigger-icon-container-min-height: 18px !default;
$datepicker-bigger-icon-container-min-width: 36px !default;
$datepicker-bigger-icon-font-size: $font-icon-18 !default;
$datepicker-icon-normal-margin: 0 !default;
$datepicker-icon-bigger-margin: 0 !default;
$datepicker-icon-border-radius: 50% !default;
$datepicker-popup-border-radius: 6px !default;
$datepicker-box-sizing: border-box !default;
$datepicker-modal-header-display: block !default;
$datepicker-calendar-tbody-landscape-height: 130px !default;
$datepicker-popup-bigger-margin-top: 8px !default;

// mouse small icon
$datepicker-small-icon-font-size: $font-icon-16 !default;

// Touch small icon
$datepicker-bigger-small-icon-font-size: $font-icon-20 !default;

// color variables
$datepicker-popup-border: 1px solid $border-light !default;
$datepicker-input-border-style: none !default;
$datepicker-calendar-border-style: none !default;
$datepicker-icon-color: $secondary-text-color !default;
$datepicker-active-icon-color: $datepicker-icon-color !default;
$datepicker-icon-active-bg-color: $secondary-bg-color-pressed !default;
$datepicker-active-border-color: $border !default;
$datepicker-popup-box-shadow: $shadow-lg !default;
$datepicker-overlay: rgba($black, .5) !default;
$datepicker-icon-hover-color: $secondary-text-color-hover !default;
$datepicker-popup-bg-color: $flyout-bg-color !default;
$datepicker-othermonth-row: none !default;
$datepicker-modal-header-bg: $icon-color !default;
$datepicker-modal-header-color: $content-bg-color-alt2 !default;
$modal-year-font-size: $text-sm !default;
$modal-year-font-weight: $font-weight-medium !default;
$modal-year-line-height: 32px !default;
$modal-month-font-size: $text-xl !default;
$modal-month-font-weight: $font-weight-medium !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-portrait-month-header-vertical-align: middle !default;
$modal-month-header-line-height: 6vh !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: $border-light !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: 75vw !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;
$modal-header-day-line-height: 6vw !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;
$modal-portrait-icon-float: 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;

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

//enddefault

@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.e-bigger,
  .e-bigger #{&}.e-datepicker {
    #{if(&, '&', '*')}.e-popup-wrapper {
      @if $skin-name == 'tailwind' {
        margin-top: $datepicker-popup-bigger-margin-top;
      }
    }
  }

  #{&}.e-datepicker {
    #{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: 100%;
      left: 0;
      opacity: .5;
      pointer-events: auto;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 999;
    }

    #{if(&, '&', '*')} .e-model-header {
      @if $skin-name != 'Material3' {
        background-color: $datepicker-modal-header-bg;
      }
      @if $skin-name == 'Material3' {
        background: $datepicker-modal-header-bg;
      }
      color: $datepicker-modal-header-color;
      cursor: default;
      display: $datepicker-modal-header-display;
      padding: 10px 10px 10px 15px;

      #{if(&, '&', '*')} .e-model-year {
        font-size: $modal-year-font-size;
        font-weight: $modal-year-font-weight;
        line-height: $modal-year-line-height;
        margin: 0;
      }
    }

    #{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: 0;
    }
  }
}

/* stylelint-disable */
.e-date-overflow {
  overflow: hidden !important;
}

.e-datepick-mob-popup-wrap {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  left: 0;
  max-height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1002;

  .e-datepicker.e-popup-wrapper.e-lib.e-popup.e-control.e-popup-open {
    position: relative;
    top:0 !important;
    left: 0 !important;
  }

  .e-datepicker.e-popup-wrapper.e-popup-expand.e-lib.e-popup.e-control.e-popup-open {
    min-width: 100%;
    min-height:100%;
  }

}

.e-content-placeholder.e-datepicker.e-placeholder-datepicker {
  background-size: 250px 33px;
  min-height: 33px;
}

.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: 40px;
}

@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: 0;

    #{if(&, '&', '*')} .e-model-header.e-blazor-device {
      height: 15vh;
      .e-popup-close {
        float: right;
      }
    }

    #{if(&, '&', '*')} .e-model-header.e-blazor-device {
      height: 15vh;
      .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: 400;
        padding: 0;
      }

      #{if(&, '&', '*')} .e-today.e-flat.e-primary {
        color: $modal-today-text-color;
        float: $modal-portrait-today-float-style;
        @if $skin-name == 'bootstrap5' {
          background-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 {
          margin-left: $modal-portrait-header-title-margin;
          position: $modal-portrait-header-title-position;
          text-align: $modal-portrait-header-title-text;
          vertical-align: $modal-portrait-month-header-vertical-align;
          width: $modal-portrait-header-title-width;
          line-height: $modal-month-header-title-line-height;
          @media (min-device-width: 768px) {
            font-size: $modal-tablet-font-size;
          }
        }

        #{if(&, '&', '*')} .e-prev {
          margin-right: $modal-portrait-prev-icon-margin;
          vertical-align: inherit;
          height: 35px;
          width: 35px;
          @media (min-device-width: 768px) {
            height: 55px;
            width: 55px;
          }

          #{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: 35px;
          width:35px;
          @media (min-device-width: 768px) {
            height: 55px;
            width: 55px;
          }

          #{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(&, '&', '*')} 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: 25vh;
        .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: 50vh;
          }
  
          @media (min-height: 600px) {
            height: 60vh;
          }
          overflow-y: auto;
  
          #{if(&, '&', '*')} table {
            @media (min-height: 600px) {
              height: 60vh;
            }
          }
        }
        #{if(&, '&', '*')} .e-footer-container {
          @media (min-height: 600px) {
            padding: 10px 0;
            height: 10%;
            font-size: 24px;
          }
        }
      }

      #{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 {
          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: 70%;
        width: 100%;
      }

      .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-bigger.e-small #{&}.e-datepicker,
  .e-bigger #{&}.e-datepicker,
  .e-small #{&}.e-datepicker,
  .e-bigger.e-small#{&}.e-datepicker,
  .e-bigger#{&}.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 != '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' {
          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-bootstrap5-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;
    min-height: $datepicker-icon-container-min-height;
    min-width: $datepicker-icon-container-min-width;
    outline: none;

    #{if(&, '&', '*')}::before {
      content: '\e75e';
      font-family: 'e-icons';
    }

    #{if(&, '&', '*')}:focus {
      background: $datepicker-icon-hover-color;
      border-radius: $datepicker-icon-border-radius;
    }
  }

  .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 {
    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(&, '&', '*')}::before {
      content: '\e75e';
      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;
  }

  // Touch small icon
  .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;
  }
  .e-datepick-mob-popup-wrap {
    
    #{if(&, '&', '*')} .e-datepicker.e-popup-expand {
  
      #{if(&, '&', '*')} .e-model-header {
  
        #{if(&, '&', '*')} .e-popup-close::before {
          content: '\e7e7';
          font-family: 'e-icons';
        }
      }

      #{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-next::before {
        content: '\e748';
      }
      #{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-prev::before {
        content: '\e765';
      }
    }
  }
}

//layout variables
$radio-btn-border: 1px solid !default;
$radio-btn-bigger-font-size: $text-base !default;
$radio-btn-bigger-height: 16px !default;
$radio-btn-bigger-line-height: 1 !default;
$radio-btn-bigger-padding: 28px !default;
$radio-btn-bigger-small-height: 16px !default;
$radio-btn-bigger-small-line-height: 1 !default;
$radio-btn-bigger-small-padding: 28px !default;
$radio-btn-bigger-small-width: 16px !default;
$radio-btn-bigger-width: 16px !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-height: 14px !default;
$radio-btn-width: 14px !default;
$radio-btn-small-height: 14px !default;
$radio-btn-small-width: 14px !default;
$radio-btn-icon-left: 4px !default;
$radio-btn-icon-top: 4px !default;
$radio-btn-icon-right: 4px !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: 4px !default;
$radio-btn-bigger-icon-top: 4px !default;
$radio-btn-bigger-icon-right: 4px !default;
$radio-btn-bigger-small-icon-left: 4px !default;
$radio-btn-bigger-small-icon-top: 4px !default;
$radio-btn-bigger-small-icon-right: 4px !default;
$radio-btn-icon-height: 6px !default;
$radio-btn-icon-width: 6px !default;
$radio-btn-small-icon-height: 6px !default;
$radio-btn-small-icon-width: 6px !default;
$radio-btn-bigger-icon-height: 8px !default;
$radio-btn-bigger-icon-width: 8px !default;
$radio-btn-bigger-small-icon-height: 8px !default;
$radio-btn-bigger-small-icon-width: 8px !default;
$radio-btn-line-height: 1 !default;
$radio-btn-padding-left: 22px !default;
$radio-btn-small-line-height: 1 !default;
$radio-btn-small-padding: 22px !default;
$radio-btn-focus-outline-offset: 0 !default;
$radio-btn-font-size: $text-sm !default;
$radio-btn-background-color: $content-bg-color !default;
$radio-btn-border-color: $border !default;
$radio-btn-checked-border-color: $primary !default;
$radio-btn-checked-color: $primary-text-color !default;
$radio-btn-checked-background-color: $primary !default;
$radio-btn-checked-ripple-bgcolor: transparent !default;
$radio-btn-check-transition: none !default;
$radio-btn-disabled-border-color: $border-light !default;
$radio-btn-disabled-checked-border-color: transparent !default;
$radio-btn-disabled-background-color: $primary-light !default;
$radio-btn-disabled-color: $content-text-color-disabled !default;
$radio-btn-disabled-checked-color: $primary-text-color !default;
$radio-btn-font-color: $content-text-color !default;
$radio-btn-focus-ripple-bgcolor: $black !default;
$radio-btn-focussed-box-shadow: $shadow-focus-ring2 !default;
$radio-btn-hover-bgcolor: $content-bg-color !default;
$radio-btn-hover-border-color: $border !default;
$radio-btn-hover-check-bg-color: $primary-text-color !default;
$radio-btn-hover-check-border-color: $primary !default;
$radio-btn-ripple-bgcolor: transparent !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;

//enddefault

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

  /*! radiobutton layout */

  .e-radio-wrapper {
    display: inline-block;
    line-height: 1;
    position: relative;
  }

  /* stylelint-disable property-no-vendor-prefix */
  .e-radio {
    -webkit-appearance: none;
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;

    &: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: auto;
        }
      }
    }

    +label {
      -webkit-tap-highlight-color: transparent;
      cursor: pointer;
      display: inline-block;
      margin: 0;
      position: relative;
      user-select: none;
      vertical-align: middle;
      white-space: nowrap;
      @if $skin-name == 'FluentUI' {
        border: 1px solid transparent;
        height: 24px;
      }

      & .e-label {
        display: inline-block;
        font-family: $font-family;
        font-size: $radio-btn-font-size;
        font-weight: normal;
        line-height: $radio-btn-line-height;
        padding-left: $radio-btn-padding-left;
        vertical-align: text-top;
        white-space: normal;
      }

      &:focus,
      &.e-focus {
        @if $skin-name == 'FluentUI' {
          border: 1px solid transparent;
        }
      }

      &::before {
        border: $radio-btn-border;
        border-radius: 50%;
        box-sizing: border-box;
        content: '';
        height: $radio-btn-height;
        @if $skin-name == 'FluentUI' {
          left: 1px;
        }
        @else {
          left: 0;
        }
        position: absolute;
        @if $skin-name == 'FluentUI' {
          top: 1px;
        }
        @else {
          left: 0;
        }
        width: $radio-btn-width;
      }

      &:focus {
        &::before {
          box-shadow: $radio-btn-focussed-box-shadow;
        }
      }

      &::after {
        border: 1px solid;
        border-radius: 50%;
        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: 50%;
        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: 50%;
          }
        }
      }

      &.e-right,
      &.e-rtl {
        & .e-label {
          padding-left: 0;
          padding-right: $radio-btn-padding-left;
        }

        &::before {
          left: auto;
          right: 0;
        }

        &::after {
          left: auto;
          right: $radio-btn-icon-right;
        }

        & .e-ripple-container {
          left: auto;
          right: $radio-btn-ripple-position;
        }
      }

      &.e-right {
        &.e-rtl {
          & .e-label {
            padding-left: $radio-btn-padding-left;
            padding-right: 0;
          }

          &::before {
            left: 0;
            right: auto;
          }

          &::after {
            left: $radio-btn-icon-right;
            right: auto;
          }

          & .e-ripple-container {
            left: -8px;
            right: auto;
          }
        }
      }

      &.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: 0;
            padding-right: $radio-btn-small-padding;
          }

          &::after {
            left: auto;
            right: $radio-btn-small-icon-right;
          }

          & .e-ripple-container {
            left: auto;
            right: $radio-btn-small-ripple-position;
          }
        }

        &.e-right {
          &.e-rtl {
            & .e-label {
              padding-left: $radio-btn-small-padding;
              padding-right: 0;
            }

            &::after {
              left: $radio-btn-small-icon-right;
              right: auto;
            }

            & .e-ripple-container {
              left: -10px;
              right: auto;
            }
          }
        }
      }
    }

    &:focus,
    .e-focus {
      +label,
      & .e-label {
        @if $skin-name == 'FluentUI' {
          border: 1px solid $radio-btn-border-color;
        }
      }
    }

    &:focus:not(:focus-visible) {
      +label,
      & .e-label {
        @if $skin-name == 'FluentUI' {
          border: 1px solid transparent;
        }
      }
    }

    &:focus-visible {
      +label,
      & .e-label {
        @if $skin-name == 'FluentUI' {
          border: 1px solid $radio-btn-border-color;
        }
      }
    }

    &:checked {
      +label {
        &::after {
          transform: scale(1);
          transition: $radio-btn-check-transition;
        }
      }
    }
  }

  .e-small .e-radio + label,
  .e-radio + label.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: 0;
        padding-right: $radio-btn-small-padding;
      }

      &::after {
        left: auto;
        right: $radio-btn-small-icon-right;
      }

      & .e-ripple-container {
        left: auto;
        right: $radio-btn-small-ripple-position;
      }
    }

    &.e-right {
      &.e-rtl {
        & .e-label {
          padding-left: $radio-btn-small-padding;
          padding-right: 0;
        }

        &::after {
          left: $radio-btn-small-icon-right;
          right: auto;
        }

        & .e-ripple-container {
          left: -10px;
          right: auto;
        }
      }
    }
  }

  .e-bigger.e-small .e-radio + label,
  .e-radio + label.e-bigger.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: 0;
        padding-right: $radio-btn-bigger-small-padding;
      }

      &::after {
        left: auto;
        right: $radio-btn-bigger-small-icon-right;
      }

      & .e-ripple-container {
        left: auto;
        right: $radio-btn-small-ripple-position;
      }
    }

    &.e-right {
      &.e-rtl {
        & .e-label {
          padding-left: $radio-btn-bigger-small-padding;
          padding-right: 0;
        }

        &::after {
          left: $radio-btn-bigger-small-icon-right;
          right: auto;
        }

        & .e-ripple-container {
          left: -10px;
          right: auto;
        }
      }
    }
  }

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

    &:focus,
    .e-focus {
      +label,
      & .e-label {
        @if $skin-name == 'FluentUI' {
          border: 1px solid transparent;
        }
      }
    }

    &:focus:not(:focus-visible) {
      +label,
      & .e-label {
        @if $skin-name == 'FluentUI' {
          border: 1px solid transparent;
        }
      }
    }

    &:focus-visible {
      +label,
      & .e-label {
        @if $skin-name == 'FluentUI' {
          border: 1px solid $radio-btn-border-color;
        }
      }
    }
  }

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

    & .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: 0;
        padding-right: $radio-btn-bigger-padding;
      }

      &::after {
        left: auto;
        right: $radio-btn-bigger-icon-right;
      }

      & .e-ripple-container {
        left: auto;
        right: $radio-btn-bigger-ripple-position;
      }
    }

    &.e-right {
      &.e-rtl {
        & .e-label {
          padding-left: $radio-btn-bigger-padding;
          padding-right: 0;
        }

        &::after {
          left: $radio-btn-bigger-icon-right;
          right: auto;
        }

        & .e-ripple-container {
          left: -12px;
          right: auto;
        }
      }
    }

    &.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: 0;
          padding-right: $radio-btn-bigger-small-padding;
        }

        &::after {
          left: auto;
          right: $radio-btn-bigger-small-icon-right;
        }

        & .e-ripple-container {
          left: auto;
          right: $radio-btn-small-ripple-position;
        }
      }

      &.e-right {
        &.e-rtl {
          & .e-label {
            padding-left: $radio-btn-bigger-small-padding;
            padding-right: 0;
          }

          &::after {
            left: $radio-btn-bigger-small-icon-right;
            right: auto;
          }

          & .e-ripple-container {
            left: -10px;
            right: auto;
          }
        }
      }
    }
  }
}


@include export-module('radiobutton-theme') {

  /*! 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;
        }
      }
    }

    &: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;
          }
        }
      }

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

    &:disabled {
      +label {
        cursor: default;
        pointer-events: none;

        &::before {
          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 {
            background-color: transparent;

            &::after {
              background-color: transparent;
            }
          }
        }
      }
    }
  }
}

//layout variables
$switch-wrapper-width: 50px !default;
$switch-wrapper-height: 20px !default;
$switch-inner-width: 100% !default;
$switch-inner-height: 100% !default;
$switch-handle-top: 2px !default;
$switch-handle-left: 2px !default;
$switch-handle-margin: auto 0 !default;
$switch-inner-top: 0 !default;
$switch-inner-left: 0 !default;
$switch-off-text-indent: 18px !default;
$switch-on-text-indent: -16px !default;
$switch-handle-active: 100% !default;
$switch-handle-margin-left: -18px !default;
$switch-active-on-opacity: 1 !default;
$switch-off-opacity: 1 !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-active-on-position-left: 0 !default;
$switch-off-active-left: 100% !default;
$switch-on-position-left: -100% !default;
$switch-on-position-left-rtl: 0 !default;
$switch-off-position-left: 0 !default;
$switch-off-position-left-rtl: -100% !default;
$switch-on-rtl: 100% !default;
$switch-off-rtl: 0 !default;
$switch-handle-radius: 50% !default;
$switch-handle-bottom: 2px !default;
$switch-border-radius: 20px !default;
$switch-small-ripple-height: 36px !default;
$switch-small-ripple-left: -10px !default;
$switch-small-ripple-top: -10px !default;
$switch-small-ripple-width: 42px !default;
$switch-small-wrapper-height: 18px !default;
$switch-small-wrapper-width: 42px !default;
$switch-small-handle-width: 14px !default;
$switch-small-handle-height: 14px !default;
$switch-small-handle-active-left: 100% !default;
$switch-small-handle-margin-left: -16px !default;
$switch-small-handle-active-left-rtl: 18px !default;
$switch-small-font-size: $text-xxs !default;
$small-switch-text-indent: 14px !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: 14px !default;
$switch-bigger-wrapper-height: 24px !default;
$switch-bigger-wrapper-width: 58px !default;
$switch-bigger-handle-width: 20px !default;
$switch-bigger-handle-height: 20px !default;
$switch-bigger-handle-active-left: 100% !default;
$switch-bigger-handle-margin-left: -23px !default;
$switch-bigger-handle-active-left-rtl: 25px !default;
$switch-bigger-font-size: $text-sm !default;
$switch-bigger-on-text-indent: -15px !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: 2px !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: 58px !default;
$switch-focused-outline: none !default;
$switch-focused-outline-offset: initial !default;
$switch-focused-outline-active: none !default;
$switch-bigger-small-wrapper-height: 22px !default;
$switch-bigger-small-wrapper-width: 54px !default;
$switch-bigger-small-handle-width: 18px !default;
$switch-bigger-small-handle-height: 18px !default;
$switch-bigger-small-handle-active-left: 100% !default;
$switch-bigger-small-handle-margin-left: -20px !default;
$switch-bigger-small-handle-active-left-rtl: 22px !default;
$switch-bigger-small-font-size: $text-xs !default;
$bigger-small-switch-text-indent: 14px !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: -14px !default;
$switch-bigger-small-off-text-indent: 14px !default;
$switch-bigger-small-handle-to: 2px !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: 54px !default;
$switch-on-off-disabled-bg-color-opacity: .5 !default;
$switch-active-handle-bg: $content-bg-color !default;
$switch-inner-border-style: 1px solid $border !default;
$switch-inner-active: $primary !default;
$switch-inner-active-bg: $primary !default;
$switch-focus-inner-box-shadow: $shadow-focus-ring2 !default;
$switch-inner-active-border-color: $primary !default;
$switch-active-background: transparent !default;
$switch-handle-shadow: $shadow-sm !default;
$switch-handle-shadow-disabled: none !default;
$switch-off-bg-color: $content-bg-color !default;
$switch-inner-bg: $content-bg-color !default;
$switch-handle-bg-color: $border !default;
$switch-hover-bg-color: $content-bg-color-alt3 !default;
$switch-font-family: $font-family !default;
$switch-font-size: $text-xs !default;
$switch-inner-hover-bg-color: $primary !default;
$switch-inner-hover-border-color: $primary !default;
$switch-inner-on-font-color: $primary-text-color !default;
$switch-inner-off-font-color: $content-text-color !default;
$switch-inner-focus-border: $content-bg-color-alt3 !default;
$switch-on-hover-bg-color: $primary !default;
$switch-on-off-disabled-bg-color: $content-bg-color !default;
$switch-handle-disabled-bg-color: $border-light !default;
$switch-handle-on-disabled-bg-color: $content-bg-color !default;
$switch-border-disabled-bg-color: $content-bg-color-alt3 !default;
$switch-disabled-font-color: $content-text-color-disabled !default;
$switch-on-off-hover-bg-color: $content-bg-color !default;
$switch-inner-focus-bg-color: $content-bg-color !default;
$switch-inner-focus-off-bg: $content-bg-color !default;
$switch-focus-border-color-active: $primary !default;
$switch-hover-border: $border !default;
$switch-hover-active-border: $primary !default;
$switch-handle-hover-bg-color: $content-bg-color !default;
$switch-small-disabled-rtl-active-bg-color: transparent !default;
$switch-on-bg-color: $primary !default;
$switch-checked-ripple-bg-color: rgba(0, 0, 0, .12) !default;
$switch-ripple-bg-color: rgba(255, 64, 129, .12) !default;
$switch-on-disabled-bg-color: $content-bg-color !default;
$switch-inner-hover-on-font-color: $primary-text-color !default;
$switch-handle-off-hover-bg-color: $border !default;

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

  /*! 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;
    }

    &:focus,
    &.e-focus {
      @if $skin-name == 'FluentUI' {
        border: 1px solid $switch-inner-focus-border;
      }
    }

    @at-root {
      & .e-switch {
        /* stylelint-disable property-no-vendor-prefix */
        -moz-appearance: none;
        height: 1px;
        opacity: 0;
        position: absolute;
        width: 1px;
      }

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

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

      & .e-ripple-container {
        border-radius: 50%;
        bottom: -9px;
        height: 52px;
        left: -17px;
        pointer-events: none;
        position: absolute;
        top: -17px;
        width: 52px;
        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: 50%;
          }
        }
      }

      &.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: 50%;
          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;

    & .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: 50%;
      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;
        }
      }
    }
  }

  #{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;

    & .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: 50%;
      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;

    & .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: 50%;
        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;
        }
      }
    }
  }
}


@include export-module('switch-theme') {

  /*! 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;
    }

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

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

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

      & .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 {
          @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-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 {
          background-color: $switch-checked-ripple-bg-color;
        }
  
        & .e-ripple-check.e-ripple-container {
          background-color: $switch-ripple-bg-color;
        }
      }
    }

    &:not(.e-switch-disabled):hover {
      & .e-switch-handle:not(.e-switch-active) {
        background-color: $switch-handle-off-hover-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 {
        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-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 {
            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;
        }

        & .e-switch-inner.e-switch-active {
          @if $skin-name == 'bootstrap4' {
            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;
          }
        }
      }
    }
  }
}

$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: $text-sm !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: $text-xs !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: $text-base !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: $text-sm !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;

@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: 0;
      font-size: $fab-icon-font-size;
    }

    &.e-icon-btn {
      padding: 0;
    }

    &.e-fab-fixed {
      position: fixed;
    }

    &.e-fab-top {
      top: $fab-offset;
      &.e-fab-middle {
        top: var(--fabVertDist);
      }
    }

    &.e-fab-bottom {
      bottom: $fab-offset;
      &.e-fab-middle {
        bottom: var(--fabVertDist);
      }
    }

    &.e-fab-left {
      left: $fab-offset;
      &.e-fab-center {
        left: var(--fabHorzDist);
      }
    }

    &.e-fab-right {
      right: $fab-offset;
      &.e-fab-center {
        right: var(--fabHorzDist);
      }
    }
  }

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

  .e-small.e-fab.e-btn,
  .e-small .e-fab.e-btn {
    border-radius: $fab-small-border-radius;
    min-height: $fab-small-min-height;
    min-width: $fab-small-min-width;
    padding: $fab-small-padding;

    &.e-icon-btn {
      padding: 0;
    }

    .e-btn-icon {
      font-size: $fab-small-icon-font-size;
    }
  }
  .e-bigger.e-fab.e-btn,
  .e-bigger .e-fab.e-btn {
    border-radius: $fab-bigger-border-radius;
    min-height: $fab-bigger-min-height;
    min-width: $fab-bigger-min-width;
    padding: $fab-bigger-padding;

    &.e-icon-btn {
      padding: 0;
    }

    .e-btn-icon {
      font-size: $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 {
    border-radius: $fab-bigger-small-border-radius;
    min-height: $fab-bigger-small-min-height;
    min-width: $fab-bigger-small-min-width;
    padding: $fab-bigger-small-padding;

    &.e-icon-btn {
      padding: 0;
    }

    .e-btn-icon {
      font-size: $fab-bigger-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 != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5-dark') {
        box-shadow: $fab-box-shadow;
      }
      @if ($skin-name == 'tailwind') {
        box-shadow: $fab-focus-box-shadow;
      }
    }
  }
}

$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 5px !default;
$sd-vert-ul-padding: 5px 3px !default;
$sd-horz-li-margin: 0 5px !default;
$sd-vert-li-margin: 5px 0 !default;
$sd-li-text-margin: 0 8px !default;
$sd-li-text-height: 26px !default;
$sd-li-icon-height: 32px !default;
$sd-li-icon-width: 32px !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 px !default;
$sd-small-li-text-height: 22px !default;
$sd-small-li-icon-height: 26px !default;
$sd-small-li-icon-width: 26px !default;
$sd-small-li-icon-font-size: 12px !default;

$sd-bigger-horz-ul-padding: 6px 6px !default;
$sd-bigger-vert-ul-padding: 6px 6px !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: 32px !default;
$sd-bigger-li-icon-height: 38px !default;
$sd-bigger-li-icon-width: 38px !default;
$sd-bigger-li-icon-font-size: 14px !default;

$sd-bigger-small-horz-ul-padding: 5px 5px !default;
$sd-bigger-small-vert-ul-padding: 5px 5px !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 10px !default;
$sd-bigger-small-li-text-height: 30px !default;
$sd-bigger-small-li-icon-height: 34px !default;
$sd-bigger-small-li-icon-width: 34px !default;
$sd-bigger-small-li-icon-font-size: 14px !default;

$sd-overlay-bg: $overlay-bg-color !default;
$sd-li-shadow: 0 2px 4px -1px rgba(0, 0, 0, .06), 0 4px 6px -1px rgba(0, 0, 0, .1) !default;

$sd-li-bg: $content-bg-color !default;
$sd-li-border-color: $border-light !default;
$sd-font-color: $content-text-color !default;

$sd-disabled-li-bg: $content-bg-color-disabled !default;
$sd-disabled-li-border-color: $border-disabled !default;
$sd-disabled-font-color: $content-text-color-disabled !default;

$sd-focus-li-bg: $content-bg-color-focus !default;
$sd-focus-li-border-color: $border-focus !default;
$sd-focus-font-color: $content-text-color-focus !default;
$sd-focus-box-shadow: $secondary-shadow-focus !default;

$sd-hover-li-bg: $content-bg-color-hover !default;
$sd-hover-li-border-color: $border-hover !default;
$sd-hover-font-color: $content-text-color-hover !default;

$sd-active-li-bg: $content-bg-color-pressed !default;
$sd-active-li-border-color: $content-bg-color-pressed !default;
$sd-active-font-color: $content-text-color-focus !default;

@include export-module('speed-dial-layout') {
  .e-speeddial-popup {
    position: absolute;
    z-index: 100000;
    pointer-events: none;

    &.e-speeddial-top {
      top: $sd-offset;

      &.e-speeddial-radial .e-speeddial-li {
        top: 0;
      }

      &.e-speeddial-radial.e-speeddial-middle .e-speeddial-li {
        top: calc(.5 * var(--speeddialRadialMinWidth) + var(--speeddialRadialOffset));
      }

      &.e-speeddial-middle,
      &.e-speeddial-linear {
        top: var(--speeddialVertDist);
      }
    }

    &.e-speeddial-bottom {
      bottom: $sd-offset;

      &.e-speeddial-radial .e-speeddial-li {
        bottom: 0;
      }

      &.e-speeddial-radial.e-speeddial-middle .e-speeddial-li {
        bottom: calc(.5 * var(--speeddialRadialMinWidth) + var(--speeddialRadialOffset));
      }

      &.e-speeddial-middle,
      &.e-speeddial-linear {
        bottom: var(--speeddialVertDist);
      }
    }

    &.e-speeddial-left {
      left: $sd-offset;

      &.e-speeddial-radial .e-speeddial-li {
        left: 0;
      }

      &.e-speeddial-radial.e-speeddial-center .e-speeddial-li {
        left: calc(.5 * var(--speeddialRadialMinWidth) + var(--speeddialRadialOffset));
      }

      &.e-speeddial-center,
      &.e-speeddial-linear {
        left: var(--speeddialHorzDist);
      }
    }

    &.e-speeddial-right {
      right: $sd-offset;

      &.e-speeddial-radial .e-speeddial-li {
        right: 0;
      }

      &.e-speeddial-radial.e-speeddial-center .e-speeddial-li {
        right: calc(.5 * var(--speeddialRadialMinWidth) + var(--speeddialRadialOffset));
      }

      &.e-speeddial-center,
      &.e-speeddial-linear {
        right: var(--speeddialHorzDist);
      }
    }

    &.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-li-text {
      border-radius: 2px;
      border: 1px solid;
      padding: $sd-li-text-padding;
      white-space: nowrap;
      height: $sd-li-text-height;
      line-height: $sd-li-text-height;
    }

    .e-speeddial-li-icon {
      border-radius: $sd-li-icon-border-radius;
      border: 1px 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 {
      flex-direction: row-reverse;
    }

    &.e-speeddial-vert-bottom .e-speeddial-ul {
      flex-direction: column-reverse;
    }

    &.e-speeddial-horz-right .e-speeddial-ul {
      flex-direction: row-reverse;

      &.e-speeddial-horz-top {
        flex-direction: row;
      }
    }

    &.e-speeddial-horz-left .e-speeddial-ul {
      flex-direction: row;

      &.e-speeddial-horz-top {
        flex-direction: row-reverse;
      }
    }

    &.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: 100%;
      }

      &.e-speeddial-top-right {
        border-bottom-left-radius: 100%;
      }

      &.e-speeddial-bottom-left {
        border-top-right-radius: 100%;
      }

      &.e-speeddial-bottom-right {
        border-top-left-radius: 100%;
      }

      .e-speeddial-ul {
        border-radius: inherit;
        height: inherit;
        width: inherit;
        padding: 0;
        position: relative;
      }

      .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 {
    .e-speeddial-ul {
      padding: $sd-small-vert-ul-padding;
    }

    &.e-speeddial-linear .e-speeddial-li {
      margin: $sd-small-vert-li-margin;
    }

    .e-speeddial-li:not(.e-speeddial-text-li) .e-speeddial-li-text {
      margin: $sd-small-li-text-margin;
    }

    .e-speeddial-li-text {
      height: $sd-small-li-text-height;
      line-height: $sd-small-li-text-height;
    }

    .e-speeddial-li-icon {
      height: $sd-small-li-icon-height;
      width: $sd-small-li-icon-width;
      font-size: $sd-small-li-icon-font-size;
    }

    &.e-speeddial-horz-right,
    &.e-speeddial-horz-left {
      .e-speeddial-ul {
        padding: $sd-small-horz-ul-padding;
      }

      .e-speeddial-li {
        margin: $sd-small-horz-li-margin;
      }
    }
  }

  .e-bigger.e-speeddial-popup,
  .e-bigger .e-speeddial-popup {
    .e-speeddial-ul {
      padding: $sd-bigger-vert-ul-padding;
    }

    &.e-speeddial-linear .e-speeddial-li {
      margin: $sd-bigger-vert-li-margin;
    }

    .e-speeddial-li:not(.e-speeddial-text-li) .e-speeddial-li-text {
      margin: $sd-bigger-li-text-margin;
    }

    .e-speeddial-li-text {
      height: $sd-bigger-li-text-height;
      line-height: $sd-bigger-li-text-height;
    }

    .e-speeddial-li-icon {
      height: $sd-bigger-li-icon-height;
      width: $sd-bigger-li-icon-width;
      font-size: $sd-bigger-li-icon-font-size;
    }

    &.e-speeddial-horz-right,
    &.e-speeddial-horz-left {
      .e-speeddial-ul {
        padding: $sd-bigger-horz-ul-padding;
      }

      .e-speeddial-li {
        margin: $sd-bigger-horz-li-margin;
      }
    }
  }

  .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 {
    .e-speeddial-ul {
      padding: $sd-bigger-small-vert-ul-padding;
    }

    &.e-speeddial-linear .e-speeddial-li {
      margin: $sd-bigger-small-vert-li-margin;
    }

    .e-speeddial-li:not(.e-speeddial-text-li) .e-speeddial-li-text {
      margin: $sd-bigger-li-text-margin;
    }

    .e-speeddial-li-text {
      height: $sd-bigger-small-li-text-height;
      line-height: $sd-bigger-small-li-text-height;
    }

    .e-speeddial-li-icon {
      height: $sd-bigger-small-li-icon-height;
      width: $sd-bigger-small-li-icon-width;
      font-size: $sd-bigger-small-li-icon-font-size;
    }

    &.e-speeddial-horz-right,
    &.e-speeddial-horz-left {
      .e-speeddial-ul {
        padding: $sd-bigger-small-horz-ul-padding;
      }

      .e-speeddial-li {
        margin: $sd-bigger-small-horz-li-margin;
      }
    }
  }

  .e-speeddial-overlay {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 99998;

    &.e-speeddial-fixed {
      height: 100vh;
      position: fixed;
      width: 100vw;
    }
  }

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


@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,
      .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;
        }
      }
    }
    .e-speeddial-li.e-disabled {
      color: $sd-disabled-font-color;
      .e-speeddial-li-text,
      .e-speeddial-li-icon {
        background: $sd-disabled-li-bg;
        border-color: $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 == '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 {
      color: $sd-hover-font-color;
      .e-speeddial-li-text,
      .e-speeddial-li-icon {
        background: $sd-hover-li-bg;
        border-color: $sd-hover-li-border-color;
      }
    }

    .e-speeddial-li:not(.e-disabled):active {
      color: $sd-active-font-color;
      .e-speeddial-li-text,
      .e-speeddial-li-icon {
        background: $sd-active-li-bg;
        border-color: $sd-active-li-border-color;
      }
    }
  }
}

//layout
$listview-icon-margin-right: 8px !default;
$listview-icon-back-margin: 0 !default;
$listview-rtl-icon-back-margin: 0 !default;
$listview-item-height: 36px !default;
$listview-item-line-height: 18px !default;
$listview-item-padding: 7px 9px 7px 12px !default;
$listview-rtl-item-padding: 7px 12px 7px 12px !default;
$listview-header-padding: 6px 12px !default;
$listview-back-icon-font-size: $text-xs !default;
$listview-root-border-radius: 4px !default;
$listview-nested-icon-collapsible: 12px !default;
$listview-icon-size: 20px !default;
$listview-header-text-padding: 12px !default;
$listview-header-height: 36px !default;
$listview-header-line-height: 18px !default;
$listview-border-bottom: 1px !default;
$listview-border-top: 0 !default;
$listview-border-left: 0 !default;
$listview-border-right: 0 !default;
$listview-group-first-border-bottom: 1px !default;
$listview-group-border-top: 0 !default;
$listview-group-border-bottom: 1px !default;
$listview-groupheader-item-height: 36px !default;
$listview-groupheader-item-line-height: 20px !default;
$listview-groupheader-font-size: $text-xs !default;
$listview-border-size: 1px !default;
$listview-font-size: $text-sm !default;
$listview-back-padding-right: 8px !default;
$listview-back-icon-size: 20px !default;
$listview-touch-item-height: 40px !default;
$listview-touch-item-line-height: 21px !default;
$listview-touch-item-size: 24px !default;
$listview-touch-item-padding: 16px 14px 12px 16px !default;
$listview-rtl-touch-item-padding: 12px 16px 12px 14px !default;
$listview-touch-item-font-size: $text-base !default;
$listview-touch-groupheader-height: 40px !default;
$listview-touch-groupheader-line-height: 20px !default;
$listview-touch-header-height: 40px !default;
$listview-touch-header-font-weight: $font-weight-medium !default;
$listview-touch-header-font-size: $text-sm !default;
$listview-touch-header-line-height: 22px !default;
$listview-touch-header-icon-margin-top: 2px !default;
$listview-touch-icon-margin-right: 12px !default;
$listview-touch-checkbox-right-margin: -2px 0 0 12px !default;
$listview-touch-checkbox-left-margin: 0 12px 0 0 !default;
$listview-touch-rtl-checkbox-left-margin: -2px 0 0 12px !default;
$listview-touch-rtl-checkbox-right-margin: -2px 12px 0 0 !default;
$listview-checkbox-right-margin: -2px 0 0 8px !default;
$listview-checkbox-left-margin: 0 8px 0 0 !default;
$listview-rtl-checkbox-left-margin: -2px 0 0 8px !default;
$listview-rtl-checkbox-right-margin: -2px 8px 0 0 !default;

//ListView In-built template variables
$listview-template-padding: 10px 16px !default;
$listview-template-avatar-padding-right: 16px !default;
$listview-template-avatar-padding-left: 68px !default;
$listview-template-avatar-rightposition-padding-right: 68px !default;
$listview-template-avatar-rightposition-padding-left: 16px !default;
$listview-template-avatar-size: 40px !default;
$listview-template-avatar-top: 0 !default;
$listview-template-avatar-left: 0 !default;
$listview-template-avatar-margin: 7px 16px 7px 12px !default;
$listview-template-avatar-rightposition-right: 0 !default;
$listview-template-badge-height: 18px !default;
$listview-template-badge-width: 20px !default;
$listview-template-badge-line-height: 16px !default;
$listview-template-badge-font-size: $text-xxs !default;
$listview-template-badge-right: 12px !default;
$listview-template-avatar-badge-padding-right: 10px !default;
$listview-template-avatar-badge-padding-left: 68px !default;
$listview-template-badgewithoutavatar-padding-right: 10px !default;
$listview-template-badgewithoutavatar-padding-left: 16px !default;
$listview-template-item-padding: 8px 0 !default;
$listview-template-multiline-header-padding: 0 !default;
$listview-template-multiline-content-padding: 2px 0 0 0 !default;
$listview-template-multiline-header-font-size: $text-sm !default;
$listview-template-multiline-padding: 4px !default;
$listview-template-multiline-content-font-size: $text-sm !default;
$listview-template-multiline-avatar-top: 0 !default;
$listview-touch-template-padding: 12px 16px !default;
$listview-touch-template-multiline-padding: 7px !default;
$listview-touch-template-avatar-padding-left: 88px !default;
$listview-touch-template-avatar-size: 48px !default;
$listview-touch-template-multiline-header-font-size: $text-base !default;
$listview-touch-template-multiline-header-line-height: 24px !default;
$listview-touch-template-avatar-margin: 8px 24px 8px 16px !default;
$listview-touch-template-badge-height: 20px !default;
$listview-touch-template-badge-width: 34px !default;
$listview-touch-template-badge-line-height: 18px !default;
$listview-touch-template-badge-font-size: $text-xs !default;

//color
$listview-font-family: $font-family !default;
$listview-text-color: $content-text-color !default;
$listview-text-disabled: $content-text-color-disabled !default;
$listview-icon-color: $icon-color !default;
$listview-icon-disabled: $icon-color-disabled !default;
$listview-background: $transparent !default;
$listview-line-color: $border-light !default;
$listview-item-hover-bg: $content-bg-color-hover !default;
$listview-text-hover-color: $content-text-color-hover !default;
$listview-item-active-bg: $content-bg-color-selected !default;
$listview-root-border-color: $border-light !default;
$listview-text-active-color: $content-text-color-selected !default;
$listview-header-text-color: $content-text-color-alt3 !default;
$listview-header-text-disabled: $content-text-color-disabled !default;
$listview-header-bg: transparent !default;
$listview-header-icon-color: $icon-color !default;
$listview-header-icon-disabled: $icon-color-disabled !default;
$listview-header-border: $border-light !default;
$listview-header-font-size: $text-xs !default;
$listview-header-font-weight: $font-weight-medium !default;
$listview-hover-border-color: $border-light !default;
$listview-border-bottom-color: $border-light !default;
$listview-border-top-color: transparent !default;
$listview-border-right-color: transparent !default;
$listview-border-left-color: transparent !default;
$listview-groupheader-text-color: $content-text-color-alt3 !default;
$listview-groupheader-bg: transparent !default;
$listview-groupheader-icon: $icon-color !default;
$listview-focused-collapsible-color: $content-text-color-selected !default;
$listview-icon-hover: $icon-color-hover !default;
$listview-icon-pressed: $icon-color-pressed !default;
$checkmark-bgcolor: $content-bg-color !default;
$checkmark-border-color: $content-bg-color !default;
$checkmark-color: $primary !default;

//ListView In-built template variables
$listview-template-multiline-header-color: $content-text-color !default;
$listview-template-multiline-content-color: $content-text-color-alt3 !default;
$listview-template-focused-multiline-content-color: $content-text-color-selected !default;

@include export-module('listview-layout') {
  /* stylelint-disable property-no-vendor-prefix */
  .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 == 'tailwind') {
        .e-text-content .e-list-text {
          font-size: $listview-touch-item-font-size;
        }
      }
    }

    &:not(.e-list-template) .e-list-item {
      height: $listview-touch-item-height;
      line-height: $listview-touch-item-line-height;
      position: relative;
      @if ($skin-name == 'bootstrap4') {
        padding: 12px 20px;
      }
      @if ($skin-name == 'tailwind') {
        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') {
        font-size: 16px;
        padding: 12px 20px;
      }
      @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI') {
        padding: $listview-template-padding;
      }
      @if ($skin-name == 'FluentUI') {
        font-size: 16px;
      }

      .e-text-content {
        @if ($skin-name == 'tailwind' or $skin-name == 'Material3') {
          font-size: $listview-touch-header-font-size;
          line-height: $listview-touch-groupheader-line-height;
        }
      }
    }

    .e-list-header {
      align-items: center;
      display: flex;
      font-weight: $listview-touch-header-font-weight;
      height: $listview-touch-header-height;
      @if ($skin-name == 'bootstrap4') {
        font-size: 20px;
        line-height: 1.2;
        padding: 0 0 0 20px;
      }
      @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI') {
        font-size: $text-sm;
        line-height: $listview-item-line-height;
        padding: $listview-template-padding;
      }
    }

    .e-list-header .e-text.header {
      display: none;
    }

    .e-list-header .e-headertemplate-text.nested-header {
      display: none;
    }

    .e-list-header .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') {
        height: $listview-touch-item-size;
        margin-right: $listview-touch-icon-margin-right;
        width: $listview-touch-item-size;
      }
    }

    .e-icon-collapsible {
      @if ($skin-name == 'bootstrap4') {
        font-size: 12px;
      }
      @if ($skin-name == 'tailwind') {
        font-size: $listview-touch-item-size;
        height: $listview-touch-item-size;
        width: $listview-touch-item-size;
      }
    }

    .e-listview-checkbox {
      &.e-checkbox-left {
        @if ($skin-name == 'bootstrap4') {
          margin: 0 12px 0 0;
        }
        @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI') {
          margin: $listview-touch-checkbox-left-margin;
        }
        @if ($skin-name == 'FluentUI') {
          border: 0;
          padding: 0;
        }
      }

      &.e-checkbox-right {
        @if ($skin-name == 'bootstrap4') {
          margin: 0 0 0 12px;
        }
        @if ($skin-name == 'tailwind') {
          margin: $listview-touch-checkbox-right-margin;
        }
      }
    }

    &.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 {
          margin-left: 12px;
          margin-right: 0;
        }
      }
      @if ($skin-name == 'Material3') {
        & .e-list-icon {
          margin-left: $listview-touch-icon-margin-right;
          margin-right: $listview-rtl-icon-back-margin;
        }

        & .e-icon-back {
          margin-left: $listview-icon-back-margin-right;
          margin-right: $listview-rtl-icon-back-margin;
        }
      }

      .e-listview-checkbox {
        &.e-checkbox-right {
          @if ($skin-name == 'bootstrap4') {
            margin: 0 12px 0 0;
          }
          @if ($skin-name == 'tailwind') {
            margin: $listview-touch-rtl-checkbox-right-margin;
          }
        }

        &.e-checkbox-left {
          @if ($skin-name == 'bootstrap4') {
            margin: 0 0 0 12px;
          }
          @if ($skin-name == 'tailwind') {
            margin: $listview-touch-rtl-checkbox-left-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) {
              padding-right: $listview-touch-template-avatar-padding-left;
            }

            &.e-list-badge.e-list-avatar {
              padding-right: $listview-touch-template-avatar-padding-left;
            }
          }
        }
      }
    }

    @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 {
              font-size: $listview-touch-template-multiline-header-font-size;
              font-weight: $font-weight-normal;
              line-height: $listview-touch-template-multiline-header-line-height;
            }
          }

          &: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 {
              height: $listview-touch-template-avatar-size;
              margin: $listview-touch-template-avatar-margin;
              width: $listview-touch-template-avatar-size;
            }
          }

          &.e-list-avatar:not(.e-list-badge) {
            padding-left: $listview-touch-template-avatar-padding-left;
          }

          &.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;
            }
          }
        }
      }
    }
    @if ($skin-name == 'FluentUI') {
      & .e-text-content.e-checkbox .e-list-text {
        width: calc(100% - 60px);
      }
    }
    @else {
      & .e-text-content.e-checkbox .e-list-text {
        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 {
              font-size: $listview-template-touch-font-size;
              line-height: 24px;
            }

            .e-list-content {
              font-size: $listview-template-multiline-header-font-size;
              line-height: 22px;
            }
          }

          &.e-list-avatar {
            .e-avatar {
              height: $listview-template-avatar-touch-size;
              width: $listview-template-avatar-touch-size;
            }
          }

          &:not(.e-list-multi-line) {
            .e-list-content {
              font-size: $listview-template-touch-font-size;
              line-height: 24px;
            }
          }
        }
      }
    }
  }

  .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 {
      height: $listview-item-height;
      line-height: $listview-item-line-height;
      padding: $listview-item-padding;
      position: relative;
    }

    @at-root {
      & .e-list-item {
        border-bottom: $listview-border-size solid;
        cursor: pointer;
        @if ($skin-name == 'tailwind') {
          .e-text-content .e-list-text {
            font-size: $listview-font-size;
          }
        }
      }

      & .e-list-parent {
        margin: 0;
        padding: 0;
      }

      & .e-list-header .e-text.header {
        display: none;
      }

      & .e-icon-back {
        @if ($skin-name == 'tailwind') {
          height: $listview-back-icon-size;
          width: $listview-back-icon-size;
        }
        @else {
          margin-top: $listview-icon-back-margin;
        }
        @if ($skin-name == 'FluentUI' or $skin-name == 'Material3') {
          margin-right: $listview-icon-back-margin-right;
        }
      }

      & .e-list-header .e-headertemplate-text.nested-header {
        display: none;
      }

      & .e-list-header {
        align-items: center;
        display: flex;
        font-weight: $listview-header-font-weight;
        height: $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') {
            border-bottom: 1px solid;
          }
          padding: 0 $listview-header-text-padding;
        }
      }

      & .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:first-child {
        border: 0;
        border-bottom: $listview-group-first-border-bottom solid $listview-border-bottom-color;
      }

      & .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;
        @if ($skin-name == 'tailwind') {
          box-sizing: border-box;
          font-weight: $font-weight-medium;
          padding: $listview-header-padding;

          .e-list-text {
            text-transform: uppercase;
          }
        }
        @else {
          font-weight: 600;
          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;
        }
      }

      & .e-icon-collapsible {
        cursor: pointer;
        font-size: $listview-nested-icon-collapsible;
        position: absolute;
        right: 0%;
        top: 50%;
        transform: translateY(-50%);
        @if ($skin-name == 'tailwind') {
          height: $listview-icon-size;
          width: $listview-icon-size;
        }
      }

      & .e-text-content {
        height: 100%;
        position: relative;
        vertical-align: middle;
      }

      & .e-text-content * {
        display: inline-block;
        vertical-align: middle;
      }

      & .e-text-content.e-checkbox .e-list-text {
        width: calc(100% - 40px);
      }

      & .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
        width: calc(100% - 90px);
      }

      & .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
        width: calc(100% - 80px);
      }

      & .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 .e-checkbox-left {
        margin: $listview-checkbox-left-margin;
      }

      & .e-checkbox .e-checkbox-right {
        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%;
      }

      & .e-list-icon + .e-list-text {
        width: calc(100% - 60px);
      }

      & .e-icon-wrapper .e-list-text {
        width: calc(100% - 60px);
      }

      & .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
        width: calc(100% - 60px);
      }

      & .e-list-icon {
        margin-right: $listview-icon-margin-right;
        @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI') {
          height: $listview-icon-size;
          width: $listview-icon-size;
        }
        @else {
          height: 30px;
          width: 30px;
        }
      }

      & .e-list-container {
        overflow: hidden;
        position: relative;
      }

      & .e-list-header.e-list-navigation .e-text {
        cursor: pointer;
      }

      & .e-list-header .e-text {
        cursor: default;
        text-indent: 0;
      }

      & .e-text .e-headertext {
        display: inline-block;
        line-height: $listview-header-line-height;
      }

      &.e-rtl {
        direction: rtl;

        @if ($skin-name == 'FluentUI') {
          & .e-back-button {
            margin-left: 12px;
            margin-right: 0;
          }
        }

        &:not(.e-list-template) .e-list-item {
          @if ($skin-name == 'tailwind') {
            padding: $listview-rtl-item-padding;
          }
        }

        & .e-list-icon {
          @if ($skin-name == 'tailwind') {
            margin-left: 8px;
          }
          @else {
            margin-left: 16px;
          }
          margin-right: 0;
        }

        & .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') {
            margin-left: 8px;
            margin-right: 0;
          }
        }

        & .e-icon-back {
          @if ($skin-name != 'tailwind') {
            margin-top: $listview-rtl-icon-back-margin;
          }
        }

        & .e-checkbox .e-checkbox-left {
          margin: $listview-rtl-checkbox-left-margin;
        }

        & .e-checkbox .e-checkbox-right {
          margin: $listview-rtl-checkbox-right-margin;
        }
      }
    }
  }
}


@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 {
        background-color: $listview-header-bg;
        border-color: $listview-header-border;
        color: $listview-header-text-color;
        font-size: $listview-header-font-size;
      }

      & .e-icons:not(.e-primary .e-btn-icon, .e-check) {
        color: $listview-icon-color;

        @if ($skin-name == 'tailwind') {
          &.e-back-button:hover,
          &.e-icon-collapsible:hover {
            color: $icon-color-hover;
          }
        }
        @if ($skin-name == 'bootstrap5') {
          &.e-back-button:hover {
            color: $icon-color-hover;
          }

          &.e-back-button:active {
            color: $icon-color-pressed;
          }
        }
      }

      & .e-list-item {
        background-color: $listview-background;
        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;
        color: $listview-text-color;
      }

      & .e-list-item.e-hover,
      & .e-list-item.e-hover.e-active.e-checklist {
        background-color: $listview-item-hover-bg;
        border-color: $listview-hover-border-color;
        color: $listview-text-hover-color;
      }

      & .e-list-item.e-active {
        background-color: $listview-item-active-bg;
        color: $listview-text-active-color;
      }

      & .e-list-item.e-active.e-checklist {
        background-color: $listview-background;
        color: $listview-text-color;

        @if $skin-name == 'Material3' {
          & .e-checkbox-wrapper .e-frame.e-check {
            color: $checkmark-color;
          }
        }
      }

      & .e-list-item.e-focused,
      & .e-list-item.e-focused.e-active.e-checklist {
        background-color: $listview-item-active-bg;
        color: $listview-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 != 'tailwind' and $skin-name != 'Material3') {
          background-color: $checkmark-bgcolor;
          border-color: $checkmark-border-color;
          color: $checkmark-color;
        }
      }

      & .e-list-group-item {
        background-color: $listview-groupheader-bg;
        border-color: $listview-header-border;
        color: $listview-groupheader-text-color;
        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: inherit;
        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: 22px;
            }
            @else {
              font-weight: 500;
            }
            margin: 0;
            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: 18px;
              }
              @else {
                line-height: 22px;
              }
            }
            margin: 0;
            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 {
            height: $listview-template-avatar-size;
            left: $listview-template-avatar-left;
            position: absolute;
            top: $listview-template-avatar-top;
            width: $listview-template-avatar-size;
            @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
              margin: $listview-template-avatar-margin;
            }
            @if $skin-name == 'Material3' {
              background: $listview-template-avatar-background;
            }
          }
        }

        &.e-list-avatar:not(.e-list-badge) {
          padding-left: $listview-template-avatar-padding-left;
          padding-right: $listview-template-avatar-padding-right;
        }

        &.e-list-avatar-right:not(.e-list-badge) {
          padding-left: $listview-template-avatar-rightposition-padding-left;
          padding-right: $listview-template-avatar-rightposition-padding-right;

          .e-avatar {
            height: $listview-template-avatar-size;
            position: absolute;
            right: $listview-template-avatar-rightposition-right;
            top: $listview-template-avatar-top;
            width: $listview-template-avatar-size;
          }
        }

        &.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;
            height: $listview-template-badge-height;
            line-height: $listview-template-badge-line-height;
            padding: 0;
            position: absolute;
            right: $listview-template-badge-right;
            top: 50%;
            transform: translateY(-50%);
            width: $listview-template-badge-width;
            @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
              border-radius: 10px;
            }
          }
        }

        &.e-list-badge.e-list-avatar {
          padding-left: $listview-template-avatar-badge-padding-left;
          padding-right: $listview-template-avatar-badge-padding-right;
        }

        &.e-list-badge:not(.e-list-avatar) {
          padding-left: $listview-template-badgewithoutavatar-padding-left;
          padding-right: $listview-template-badgewithoutavatar-padding-right;
        }

        &:not(.e-list-multi-line) {
          .e-list-content {
            display: block;
            margin: 0;
            overflow: hidden;
            padding: $listview-template-item-padding;
            text-overflow: ellipsis;
            white-space: nowrap;
            @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
              font-size: $listview-font-size;
              line-height: $listview-item-line-height;
            }
          }
        }
      }

      .e-list-item {
        &.e-focused {
          .e-list-wrapper.e-list-multi-line {
            .e-list-item-header {
              @if ($skin-name == 'bootstrap5') {
                color: $content-text-color-selected;
              }
            }

            .e-list-content {
              @if ($skin-name == 'bootstrap5') {
                color: $content-text-color-selected;
              }
            }
          }
        }

        &.e-hover .e-list-item-header {
          color: $listview-text-hover-color;
        }

        &.e-hover .e-list-content {
          color: $listview-text-hover-color;
        }

        &.e-active .e-list-item-header {
          color: $listview-text-active-color;
        }

        &.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) {
          padding-left: $listview-template-avatar-padding-right;
          padding-right: $listview-template-avatar-padding-left;
        }

        &.e-list-avatar-right:not(.e-list-badge) {
          padding-left: $listview-template-avatar-rightposition-padding-right;
          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 {
          padding-left: $listview-template-avatar-badge-padding-right;
          padding-right: $listview-template-avatar-badge-padding-left;
        }

        &.e-list-badge:not(.e-list-avatar) {
          padding-left: $listview-template-badgewithoutavatar-padding-right;
          padding-right: $listview-template-badgewithoutavatar-padding-left;
        }
      }
    }
  }
}


.e-icon-collapsible::before {
  content: '\e748';
}

.e-icon-back::before {
  content: '\e773';
  font-size: $listview-back-icon-font-size;
}

/* 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;
      filter: alpha(Opacity=35);
      opacity: .35;
    }

    * {
      box-sizing: border-box;

      &:focus {
        outline: none;
      }
    }
  }

  /* stylelint-disable */
  .e-sortableclone {
    position: fixed !important;
  }
  /* stylelint-enable */
}

// size variables
$range-btn-font-weight: $font-weight-medium !default;
$range-btn-width: 50% !default;
$range-btn-normal-height: 30px !default;
$range-btn-bigger-height: 36px !default;
$range-btn-normal-line-height: 24px !default;
$range-btn-bigger-line-height: 32px !default;
$range-max-width: 730px !default;
$range-device-max-width: 294px !default;
$range-bigger-max-width: 770px !default;
$range-max-height: 500px !default;
$range-normal-nav-icon-width: 24px !default;
$range-control-border-right: 0 !default;
$range-normal-nav-icon-height: 24px !default;
$range-calendar-medium-font-size: $text-sm !default;
$range-calendar-btn-font-size: $text-sm !default;
$range-presets-normal-list-font-size: $text-xs !default;
$range-presets-bigger-list-font-size: $text-sm !default;
$range-range-btn-font-weight: $font-weight-medium !default;
$range-header-label-size: $text-lg !default;
$range-calendar-small-font-size: $text-xs !default;
$range-calendar-bigger-font-size: $text-xl !default;
$range-calendar-header-padding: 8px 5px !default;
$range-e-bigger-header-padding: 10px 5px !default;
$range-device-control-header-margin: 0 !default;
$range-device-control-header-padding: 12px !default;
$range-control-header-margin: 12px 0 !default;
$range-control-bigger-header-margin: 12px 0 !default;
$range-indicator-margin: 0 !default;
$range-lg-day-header-format-width: 100% !default;
$range-start-end-container-height: 28px !default;
$range-calendar-margin: 0 !default;
$range-start-end-label-width: 48% !default;
$range-change-icon-width: 4% !default;
$range-font-weight-bold: $font-weight-medium !default;
$range-font-size: $text-sm !default;
$range-bigger-change-icon-size: $font-icon-18 !default;
$range-indicator-label-width: 100% !default;
$range-device-indicator-margin: 10px 0 !default;
$range-separator-height: 1px !default;
$range-border-value: 1px solid $border-light !default;
$range-separator-margin: 0 !default;
$range-footer-height: 48px !default;
$range-bigger-footer-height: 58px !default;
$range-btn-height: 36px !default;
$range-btn-padding: 0 16px !default;
$range-normal-footer-margin: 0 8px 0 8px !default;
$range-bigger-footer-margin: 0 8px 0 8px !default;
$range-normal-rtl-footer-margin: 0 8px 0 8px !default;
$range-bigger-rtl-footer-margin: 0 8px 0 8px !default;
$range-presets-height: 192px !default;
$range-bigger-presets-height: 240px !default;
$range-calendar-container-height: 100% !default;
$range-list-item-height: 48px !default;
$range-list-item-padding: 0 24px !default;
$range-listview-padding: 4px 0 !default;
$range-list-item-line-height: 47px !default;
$range-device-medium-font-size: $text-sm !default;
$range-device-medium-header-font-size: $text-sm !default;
$range-device-small-font-size: $text-xs !default;
$range-week-header-font-size: $text-sm !default;
$range-device-header-container-height: 36px !default;
$range-device-header-container-width: 100% !default;
$range-device-list-item-padding: 0 16px !default;
$range-value-zero: 0 !default;
$range-btn-border-value: 1px solid $primary !default;
$range-btn-left-radius: 2px 0 0 2px !default;
$range-btn-right-radius: 0 2px 2px 0 !default;
$range-day-span-height: 18px !default;
$range-indicator-size: 1px !default;
$range-preset-min-width: 625px !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-btn-height: 36px !default;
$range-device-btn-line-height: 34px !default;
$range-icon-hover-color: $content-bg-color-hover !default;
$range-icon-border-radius: 50% !default;
$range-icon-container-min-height: 18px !default;
$range-icon-container-min-width: 30px !default;
$range-icon-bottom-right-radius: 0 !default;
$range-icon-top-right-radius: 0 !default;
$range-bigger-icon-container-min-height: 18px !default;
$range-bigger-icon-container-min-width: 36px !default;
$range-icon-margin: 0 !default;
$range-icon-bigger-margin: 0 !default;
$range-sart-end-btn-padding: 1px 6px !default;
$range-popup-padding: 0 !default;
$range-calendar-normal-table-padding: 0 !default;
$range-calendar-bigger-table-padding: 0 !default;
$range-popup-border-radius: 0 !default;
$range-list-border-radius: 0 !default;
$range-bigger-nav-icon-width: 24px !default;
$range-bigger-nav-icon-height: 24px !default;
$range-calendar-popup-padding: 0 8px !default;
$range-bigger-calendar-popup-padding: 0 8px !default;
$range-icon-bigger-padding: 0 !default;
$range-icon-normal-padding: 0 !default;
$range-preset-normal-list-height: 36px !default;
$range-preset-bigger-list-height: 48px !default;
$range-calendar-bigger-max: 296px !default;
$range-calendar-landscape-height: 130px !default;

// new variable
$range-icon: '\e245' !default;
$range-icon-font-size: $font-icon-16 !default;
$range-bigger-icon-font-size: $font-icon-18 !default;
$range-icon-next: '\e913' !default;
$range-icon-prev: '\e921' !default;
$range-change-icon: '\e85f' !default;
$range-rtl-icon-next: '\e921' !default;
$range-rtl-icon-prev: '\e913' !default;
$range-rtl-icon-change: '\e85b' !default;

// Mouse small size
$range-small-header-label-size: 16px !default;
$range-small-font-size: $text-xs !default;
$range-start-end-container-small-height: 32px !default;
$range-calendar-mouse-small-font-size: $text-xs !default;
$range-indicator-small-margin: 0 0 10px 0 !default;
$range-control-small-header-margin: 10px 10px 0 10px !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: $text-xs !default;
$calendar-bigger-small-max-width: 246px !default;
$range-control-header-width: auto !default;
$range-font-weight-normal: $font-weight-normal !default;
$range-flex-style: flex !default;
$range-flex-justify-content: flex-end !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-calendar-border: none !default;
$range-calendar-selection-border: none !default;
$range-calendar-hover-border: none !default;
$range-calendar-other-month-border: none !default;
$range-cursor-default-style: default !default;
$range-cursor-pointer-style: pointer !default;
$range-browser-select-none:  none !default;
$range-flex-direction-row-reverse: row-reverse !default;
$range-flex-direction-row: row !default;
$range-width-auto: auto !default;
$range-value-none: none !default;
$range-visibility-hidden: hidden !default;
$range-text-nowrap: nowrap !default;
$range-direction-left: ltr !default;
$range-text-overflow: ellipsis !default;
$range-calendar-other-normal-border: none !default;

// mouse small icon
$range-small-icon-font-size: $font-icon-14 !default;

// touch small icon
$range-bigger-small-icon-font-size: $font-icon-18 !default;

// color variables
$range-bg-color: $flyout-bg-color !default;
$range-primary-color: $primary !default;
$range-primary-font-color: $primary-text-color !default;
$range-presets-bg: $content-bg-color !default;
$range-preset-normal-font-color: $content-text-color !default;
$range-font-color: $content-text-color !default;
$range-background: $flyout-bg-color !default;
$range-footer-background: $flyout-bg-color !default;
$range-header-bg-color: $flyout-bg-color !default;
$range-active-icon-color: $content-text-color !default;
$range-active-state-icon-color: $content-text-color !default;
$range-hover-color: $content-bg-color-alt3 !default;
$range-hover-content-color: $content-bg-color-alt4 !default;
$range-today-color: $content-bg-color-hover !default;
$range-selection-bg: $primary !default;
$range-other-hover-color: $content-bg-color !default;
$range-other-month-date: $content-text-color-alt2 !default;
$range-box-shadow: $shadow-lg !default;
$range-box-shadow-none: none !default;
$range-calendar-dark-color: $content-text-color-alt1 !default;
$range-calendar-header-text-color: $content-text-color-alt2 !default;
$range-calendar-header-dark-color: $content-text-color-alt1 !default;
$range-calendar-medium-color: $content-text-color-alt3 !default;
$range-calendar-light-color: $content-text-color-alt2 !default;
$range-btn-border-transparent: 1px solid transparent !default;
$range-calendar-hover-border-color: none !default;
$range-change-icon-color: $icon-color !default;
$range-separator-color: $border-light !default;
$range-popup-border: 1px solid $border-light !default;
$range-overlay: $flyout-bg-color !default;
$range-presets-bg-color: $transparent !default;
$range-presets-font-color: $primary !default;
$range-presets-hover-bg: $content-bg-color-hover !default;
$range-list-hover-color: $content-text-color-hover !default;
$range-calendar-active-border: 1px solid $primary !default;
$range-today-border-color: $range-calendar-active-border !default;
$range-calendar-today-color: $content-text-color !default;
$range-calendar-today-start-color: $range-calendar-active-border !default;
$range-active-font-color: $primary-text-color !default;
$range-button-font-color: $blue !default;

// apply and cancel button styles
$range-apply-disabled-background-style: $primary-bg-color-disabled !default;
$range-apply-disabled-border-style: $primary-border-color-disabled !default;
$range-apply-disabled-color: $primary-text-disabled !default;
$apply-buuton-bg: $primary-bg-color !default;
$apply-buuton-bg-border-color: $primary-border-color !default;
$apply-buuton-text-color: $primary-text-color !default;
$apply-buuton-hover-bg: $primary-bg-color-hover !default;
$apply-buuton-bg-border-hover-color: $primary-border-color-hover !default;
$apply-buuton-text-hover-color: $primary-text-hover !default;
$apply-buuton-active-bg: $primary-bg-color-pressed !default;
$apply-buuton-bg-border-active-color: $primary-border-color-pressed !default;
$apply-buuton-text-active-color: $primary-text-pressed !default;
$range-cancel-disabled-background-style: $secondary-bg-color-disabled !default;
$range-cancel-disabled-border-style: $secondary-border-color-disabled !default;
$range-cancel-disabled-color: $secondary-text-color-disabled !default;
$cancel-buuton-bg: $secondary-bg-color !default;
$cancel-buuton-bg-border-color: $secondary-border-color !default;
$cancel-buuton-text-color: $secondary-text-color !default;
$cancel-buuton-hover-bg: $secondary-bg-color-hover !default;
$cancel-buuton-bg-border-hover-color: $secondary-border-color-hover !default;
$cancel-buuton-text-hover-color: $secondary-text-color-hover !default;
$cancel-buuton-active-bg: $secondary-border-color-pressed !default;
$cancel-buuton-bg-border-active-color: $secondary-border-color-pressed !default;
$cancel-buuton-text-active-color: $secondary-text-color-pressed !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 $border-light !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: $flyout-bg-color !default;
$modal-range-header-text-color: $content-text-color-alt1 !default;

// tablet device style changes for modal popup
$modal-range-tablet-font-size: 18px !default;

$range-header-font-size: 16px !default;

@include export-module('daterangepicker-layout') {
  
  /*! 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;
  }

  // Hidden element styles
  .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: 0;
    height: 0;
    margin: 0;
    padding: 0;
    text-indent: 0;
    visibility: hidden;
    width: 0;
  }

  #{&}.e-daterangepicker,
  .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(&, '&', '*')} .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;
            width: $range-control-header-width;
            @if ($skin-name != 'FluentUI') {
              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 {
            float: $range-float-right;
          }
          #{if(&, '&', '*')} .e-prev {
            float: $range-float-left;
            @if ($skin-name == 'FluentUI') {
              float: $range-float-right;
            }
          }
          #{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(&, '&', '*')} .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 {
            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-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: 100%;
    left: 0;
    opacity: .5;
    pointer-events: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
  }

  .e-bigger.e-small #{&}.e-daterangepicker #{&}.e-calendar {
    max-width: $calendar-bigger-small-max-width;
  }

  //bigger style

  .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' {
          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 == '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 == 'bootstrap4' {
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }

  .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,
  .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-daterangepicker.e-bigger .e-calendar .e-month .e-selected span.e-day {
    @if $skin-name == 'FluentUI' {
      height: 29px;
      width: 29px;
      line-height: 29px;
    }
  }
  .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: 100%;
  justify-content: center;
  left: 0;
  max-height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1002;

  .e-daterangepicker.e-popup.e-control.e-lib.e-device.e-popup-open {
    position: relative;
    top:0 !important;
    left: 0 !important;
  }

  .e-daterangepicker.e-popup.e-popup-expand.e-control.e-lib.e-device.e-popup-open {
    min-height:100%;
    min-width: 100%;
    height:100%;
    width:100%;
}
}

.e-content-placeholder.e-daterangepicker.e-placeholder-daterangepicker {
  background-size: 250px 33px;
  min-height: 33px;
}

.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: 40px;
}

.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: 0;
              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') {
                    margin-right: 60vw;
                    vertical-align: inherit;
                    font-size: $modal-range-tablet-font-size
                  }
                  @media screen and (orientation: landscape) {
                    @if ($skin-name == 'Material3') {
                      margin-right: 78vw;
                      vertical-align: inherit;
                    }
                  }

                  #{if(&, '&', '*')} span {
                    @media (min-device-width: 768px) {
                      font-size: 18px;
                      padding: 11px;
                    }
                  }
                }
                #{if(&, '&', '*')} .e-next {
                  height: $modal-range-prev-next-icon-size;
                  width: $modal-range-prev-next-icon-size;
                  @if ($skin-name == 'Material3') {
                    margin-right: 42px;
                  }

                  #{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-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: 100%;

            #{if( &, '&', '*')} .e-calendar-container {
              @media (max-height: 600px) {
                min-height: 78vh;
                height: 78vh;
              }

              #{if( &, '&', '*')} .e-calendar {
                @media (max-height: 600px) {
                  min-height: 78vh;
                  height: 78vh;
                }
              }
            }
        }

        #{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: 0;
        }

        #{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: 18px;
              }
            }
           }
        }

        #{if(&, '&', '*')} .e-range-mob-popup-wrap {
          position: relative;
          height:100%;

          #{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 {
        padding: 0;
        @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: 70vh;
            height: 70vh;
          }

          @media (max-height: 600px) {
            min-height: 65%;
            height: 65%;
          }

          #{if(&, '&', '*')} .e-calendar {
            @media (min-height: 600px) {
              min-height: 70vh;
              height: 70vh;
            }
          }

          #{if(&, '&', '*')} .e-content.e-month,
          #{if(&, '&', '*')} .e-content.e-year,
          #{if(&, '&', '*')} .e-content.e-decade {        
            @media (max-height: 600px) {
              height: 50vh;
            }
          }
        }
      }

      #{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: 8px 0;
            font-size: 16px;
          }
          
        }            

        #{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: calc(100% - 80px);
}

.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: calc(100% - 110px);
}

/* stylelint-enable */

@include export-module('daterangepicker-theme') {

  /*! 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,
  .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(&, '&', '*')} .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' {
            background-color: $range-selection-bg;
          }
          @if $skin-name == 'Material3' {
            background: $range-selection-bg;
          }
          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(&, '&', '*')} .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(&, '&', '*')} .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;
          }
        }
      }
    }
  }

  //bigger style
  .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'{
        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;
    }
  }

  // apply button override style changes
  .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 == '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 == '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 == '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 == 'FluentUI') {
      background-color: $range-apply-disabled-background-style;
      border-color: $range-apply-disabled-border-style;
      color: $range-apply-disabled-color;
    }
  }

  // cancel button override style changes
  .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 == '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 == '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 == '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 == '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,
.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-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-today.e-range-hover span,
.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-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-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-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-bootstrap5-icons') {

  /*! component icons */
  .e-input-group-icon.e-range-icon,
  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-range-icon {
    border-bottom-right-radius: $range-icon-bottom-right-radius;
    border-right: $range-control-border-right;
    border-top-right-radius: $range-icon-top-right-radius;
    font-size: $range-icon-font-size;
    margin: $range-icon-margin;
    min-height: $range-icon-container-min-height;
    min-width: $range-icon-container-min-width;
    outline: none;

    #{if(&, '&', '*')}::before {
      content: '\e74c';
      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: '\e748';
    }
    #{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-prev::before {
      content: '\e765';
    }
    #{if(&, '&', '*')} .e-change-icon::before {
      content: '\e7f9';
    }
    #{if(&, '&', '*')} .e-calendar.e-rtl .e-header .e-date-icon-next::before {
      content: '\e765';
    }
    #{if(&, '&', '*')} .e-calendar.e-rtl .e-header .e-date-icon-prev::before {
      content: '\e748';
    }
    #{if(&, '&', '*')}.e-rtl .e-start-end .e-change-icon::before {
      content: '\e773';
    }
  }

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

  // mouse small icon
  .e-small .e-input-group-icon.e-range-icon,
  #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-range-icon,
  #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-range-icon {
    font-size: $range-small-icon-font-size;
  }

  // Touch small icon
  .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;
  }

  .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: '\e7e7';
          font-family: 'e-icons';
        }

        #{if(&, '&', '*')} .e-apply::before {
          content: '\e774';
          font-family: 'e-icons';
        }
      }
    }
  }
}

// size variables
$datetime-default-text-indent: 12px !default;
$datetime-list-bigger-line-height: 32px !default;
$datetime-list-normal-line-height: 30px !default;
$datetime-list-normal-font-size: $text-sm !default;
$datetime-list-bigger-font-size: $text-base !default;
$datetime-list-normal-text-indent: $datetime-default-text-indent !default;
$datetime-list-bigger-text-indent: 16px !default;
$datetime-popup-border-radius: 6px !default;
$datetime-list-font-weight: $font-weight-normal !default;
$datetime-list-normal-padding: 8px !default;
$datetime-list-bigger-padding: 8px !default;
$datetime-time-font-icon: '\e20c' !default;
$datetime-icon-normal-font-size: $text-base !default;
$datetime-icon-bigger-font-size: $text-lg !default;
$datetime-date-icon-margin: 0 !default;
$datetime-time-icon-margin: 0 !default;
$datetime-time-bigger-icon-margin: 0 !default;
$datetime-time-rtl-icon-margin: 0 !default;
$datetime-time-rtl-bigger-icon-margin: 0 !default;
$datetime-normal-min-height: 24px !default;
$datetime-normal-min-width: 24px !default;
$datetime-bigger-min-height: 26px !default;
$datetime-bigger-min-width: 26px !default;
$datetime-time-icon-border: 0 !default;
$datetime-time-icon-border-style: none !default;
$datetime-list-default-border-style: none !default;

//mouse small
$datetime-list-small-line-height: 26px !default;
$datetime-list-small-text-indent: 8px !default;
$datetime-list-small-font-size: $text-xs !default;

// mouse small icon
$datetime-icon-small-font-size: $font-icon-14 !default;
$datetime-small-min-width: 16px !default;

//touch small
$datetime-list-bigger-small-line-height: 30px !default;
$datetime-list-bigger-small-text-indent: 16px !default;
$datetime-list-bigger-small-font-size: $text-sm !default;

// touch small icon
$datetime-icon-bigger-small-font-size: $text-base !default;

// color variables
$datetime-popup-shadow: none !default;
$datetime-list-default-font-color: $content-text-color !default;
$datetime-list-border-color: 1px solid $border-light !default;
$datetime-list-bg-color: $content-bg-color !default;
$datetime-list-active-bg-color: $flyout-bg-color-pressed !default;
$datetime-list-active-font-color: $flyout-text-color-pressed !default;
$datetime-list-active-icon-color: $content-text-color-pressed !default;
$datetime-list-hover-bg-color: $content-bg-color-hover !default;
$datetime-list-hover-font-color: $content-text-color-hover !default;
$datetime-list-popup-icon-active-color: $icon-color-pressed !default;
$datetime-list-active-hover-bg-color: $flyout-bg-color-hover !default;
$datetime-list-active-hover-font-color: $flyout-text-color-hover !default;
$datetime-list-hover-border-color: none !default;
$datetime-default-overlay: $content-bg-color-alt2 !default;

// modal full-screen popup
$modal-datetime-position: fixed !default;
$modal-datetime-wrapper-position: relative !default;
$modal-datetime-wrapper-width: 100% !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(&, '&', '*')} 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-datetime-wrapper:not(.e-outline) {
    #{if(&, '&', '*')}.e-rtl .e-input-group-icon.e-time-icon {
      margin: $datetime-time-rtl-icon-margin;
    }
  }

  #{&}.e-datetimepicker.e-time-modal {
    @if $skin-name != 'Material3' {
      background-color: $datetime-default-overlay;
    }
    @if $skin-name == 'Material3' {
      background: $datetime-default-overlay;
    }
    height: 100%;
    left: 0;
    opacity: .5;
    pointer-events: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
  }

  #{&}.e-datetimepicker.e-popup {
    border-style: solid;
    border-width: 1px;
    overflow: auto;

    #{if(&, '&', '*')} .e-content {
      position: relative;
    }

    #{if(&, '&', '*')} .e-list-parent.e-ul {
      margin: 0;
      @if $skin-name != 'Material3' {
        padding: $datetime-list-normal-padding 0;
      }
      @else {
        padding: 0;
      }

      #{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;
      }
    }
  }

  //normal styles

  #{&}.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;
    }
  }

  //bigger styles
  .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-bigger-padding 0;
      }
      @else {
        padding: 0;
      }
      
      #{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-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-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-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-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-content-placeholder.e-datetimepicker.e-placeholder-datetimepicker {
    background-size: 250px 33px;
    min-height: 33px;
  }

  .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: 40px;
  }

  .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(&, '&', '*')} .e-list-item.e-navigation,
      #{if(&, '&', '*')} .e-list-item:focus {
        @if $skin-name != 'Material3' {
          background-color: $datetime-list-hover-bg-color;
        }
        @if $skin-name == 'Material3' {
          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' {
          background-color: $datetime-list-active-bg-color;
        }
        @if $skin-name == 'Material3' {
          background: $datetime-list-active-bg-color;
        }
        color: $datetime-list-active-font-color;
      }

      #{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-bootstrap5-icons') {

  /*! component icons */
  .e-datetime-wrapper {

    #{if(&, '&', '*')} .e-time-icon.e-icons::before {
      content: '\e705';
      font-family: 'e-icons';
    }
  }
}

$mask-font-family: $font-family !default;
$mask-font-size: $text-sm !default;
$mask-bigger-font-size: $text-base !default;

// color

$mask-error-color: $danger !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-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-content-placeholder.e-mask.e-placeholder-mask {
    background-size: 300px 33px;
    min-height: 33px;
  }

  .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: 40px;
  }
}


@include export-module('maskedit-theme') {

  /*! maskedtextbox theme */
  .e-control-wrapper.e-mask.e-error #{&}.e-maskedtextbox {
    @if $skin-name != 'bootstrap' and $skin-name != 'FluentUI' {
      color: $mask-error-color;
    }
  }

  .e-utility-mask.e-error {
    @if $skin-name != 'bootstrap' and $skin-name != 'FluentUI' {
      color: $mask-error-color;
    }
  }
}

/* stylelint-disable-line no-empty-source */
$multiline-clear-icon-right-position: 10px;
$multiline-clear-icon-top-position: 10px;
$multiline-clear-icon-left-position: 10px;

.e-content-placeholder.e-textbox.e-placeholder-textbox {
  background-size: 300px 33px;
  min-height: 33px;
}

.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: 40px;
}

.e-input-group.e-input-focus.e-multi-line-input textarea.e-textbox {
  padding-right: 30px;
}

.e-input-group.e-input-focus.e-rtl.e-multi-line-input textarea.e-textbox {
  padding-left: 30px;
}

.e-bigger .e-input-group.e-input-focus.e-multi-line-input textarea.e-textbox {
  padding-right: 32px;
}

.e-bigger .e-input-group.e-input-focus.e-rtl.e-multi-line-input textarea.e-textbox {
  padding-left: 32px;
}

.e-input-group.e-multi-line-input .e-clear-icon:not(.e-clear-icon-hide) {
  position: absolute;
  right: $multiline-clear-icon-right-position;
  top: $multiline-clear-icon-top-position;
}

.e-input-group.e-rtl.e-multi-line-input .e-clear-icon:not(.e-clear-icon-hide) {
  right: initial;
  left: $multiline-clear-icon-left-position;
}


/* stylelint-disable-line no-empty-source */

// uploader bootstrap theme
$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: $text-sm !default;
$list-item-height: 35px !default;
$list-item-margin-right: 90px !default;
$list-item-name-width: 75% !default;
$progress-bar-wrapper-height: 4px !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: 24px !default;
$remove-bigger-icon-width: 24px !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: 4px !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: 46px !default;
$footer-buttons-height-bigger: 62px !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: $text-sm !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;
$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;

$upload-font-family: inherit !default;
$drop-area-font-size-smaller: $text-sm !default;
$drop-area-font-size: $text-base !default;
$drop-zone-margin: 3px !default;
$header-padding: 12px 0 12px 12px !default;
$drop-area-padding-left: 16px !default;
$drop-area-padding-left-smaller: 12px !default;
$file-name-font-size-smaller: $text-sm !default;
$file-name-font-size: $text-base !default;
$list-item-status-font-size-smaller: $text-xs !default;
$list-item-status-font-size: $text-xs !default;
$list-item-status-bigger-font-size: $text-sm !default;
$list-item-margin-left-smaller: 12px !default;
$list-item-margin-left: 15px !default;
$list-line-height: 22px !default;
$remove-icon-margin: 15px !default;
$remove-icon-margin-smaller: 15px !default;
$action-buttons-margin-smaller: 8px !default;
$footer-buttons-margin: 15px !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: $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: 82px !default;
$inner-wrap-radius: 4px !default;
$progress-bar-radius: 4px !default;
$progress-inner-wrap-height-smaller: 4px !default;
$progress-bar-height-smaller: 4px !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: 16px 0 16px 16px !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;
$remove-icon-top: 50% !default;
$remove-icon-font-size-smaller: $font-icon-18 !default;
$remove-icon-font-size: $font-icon-22 !default;
$delete-icon-font-size: $font-icon-22 !default;
$abort-icon-font-size: $font-icon-22 !default;
$delete-icon-font-size-smaller: $font-icon-18 !default;
$abort-icon-font-size-smaller: $font-icon-18 !default;
$upload-border-radius: 6px !default;
$remove-icon-padding-smaller: 10px !default;
$remove-icon-margin-top-smaller: -9px !default;
$uploader-icons-hover-radius: 50% !default;

// mouse small
$header-padding-small: 12px 0 12px 12px !default;
$drop-area-small-font-size: $text-xs !default;
$file-small-name-font-size: $text-xs !default;
$file-small-name-padding-top: 12px !default;
$list-small-item-status-font-size: $text-xs !default;
$file-small-size-padding: 6px 0 !default;
$remove-small-icon-font-size: $text-xxs !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;

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

// color

$remove-icon-color: $icon-color !default;
$upload-hover-icon-color: $icon-color-hover !default;
$disabled-state: $icon-color-disabled !default;
$remove-icon-disabled-color:  $zero-value !default;
$drop-text-color: $content-text-color !default;
$file-drop-text-color: $content-text-color-alt2 !default;
$progress-text-color: $content-text-color-alt3 !default;
$file-size-color: $content-text-color-alt3 !default;
$upload-success-color: $success !default;
$upload-failure-color: $danger !default;
$upload-in-progress-color: $primary !default;
$progress-background-color: $content-bg-color-alt3 !default;
$progress-text-color: $content-text-color-alt2 !default;
$clear-icon-focus-color: rgba($black, .12) !default;
$list-bottom-border: 1px solid $border-light !default;
$upload-border: 1px dashed $border-dark !default;
$drag-hover-border: 1px dashed $primary !default;

.e-upload .e-upload-actions,
.e-bigger.e-small .e-upload .e-upload-actions {
  background-color: $content-bg-color-alt1;
  border-radius: 0 0 6px 6px;
}

// uploader layout styles
@include export-module('uploader-layout') {
  // For bigger class UI
  .e-bigger {
    .e-upload {
      width: 100%;
      @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: 0;

            #{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: 0;
              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;
        }
      }
    }
  }

  // For Desktop view

  .e-upload,
  .e-bigger.e-small .e-upload {
    width: 100%;

    #{if(&, '&', '*')}.e-control-wrapper {
      font-family: $upload-root-font-family;
    }

    .e-hidden-file-input {
      border: 0;
      height: 0;
      margin: 0;
      outline: none;
      padding: 0;
      text-indent: 0;
      visibility: hidden;
      width: 0;
    }

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

          #{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: 0;
            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') {
          outline: none;
        }
      }

      .e-upload-file-list {
        font-family: $upload-font-family;
        font-size: $list-items-font-size-smaller;
        height: 100%;
        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: 100%;
          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: 100%;

              #{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 != 'Material3' {
          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(&, '&', '*')} .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: 65px;
    }

    .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: 80px;
    }
  }

  .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: 0;
              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' {
      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;
          }

          .e-file-type {
            color: $drop-text-color;
          }

          .e-file-size {
            color: $file-size-color;
          }

          .e-file-status,
          .e-file-information {
            color: $drop-text-color;
            @if $skin-name == 'FluentUI' or $skin-name == 'tailwind' {
              color: $file-status-color;
            }
          }

          .e-file-status.e-upload-success {
            color: $upload-success-color;
          }

          .e-file-status.e-upload-fails {
            color: $upload-failure-color;
          }

          .e-file-status.e-validation-fails {
            color: $upload-failure-color;
          }

          #{if(&, '&', '*')} .e-progress-inner-wrap {
            @if $skin-name != 'Material3' {
              background-color: $progress-background-color;
            }
            @if $skin-name == 'Material3' {
              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' {
          background-color: $clear-icon-focus-color;
        }
        @if $skin-name == 'Material3' {
          background: $clear-icon-focus-color;
        }
        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-bootstrap4-icons') {
  .e-upload .e-upload-files .e-file-remove-btn.e-icons::before {
    content: '\e7e7';
  }

  .e-upload .e-upload-files .e-icons.e-file-pause-btn::before {
    content: '\e77b';
  }

  .e-upload .e-upload-files .e-icons.e-file-reload-btn::before {
    content: '\e706';
  }

  .e-upload .e-upload-files .e-icons.e-file-play-btn::before {
    content: '\e70c';
  }

  .e-upload .e-upload-files .e-file-delete-btn.e-icons::before {
    content: '\e820';
  }

  .e-upload .e-upload-files .e-file-abort-btn.e-icons::before {
    content: '\e81b';
  }

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

//Layout Variables Start
$dialog-close-button-left: -5px !default;
$dialog-header-border: 1px solid $border-light !default;
$dialog-close-icon-font-size: $text-base !default;
$dialog-bigger-close-icon-font-size: $text-xl !default;
$footer-content-border-radius: 0 !default;
$header-content-border-radius: 0 !default;
$dialog-border-radius: 6px !default;
$dialog-border: 1px solid $border-light !default;
$dialog-content-font-size: $text-sm !default;
$dialog-header-line-height: $leading-tight !default;
$dialog-content-line-height: $leading-normal !default;
$dialog-content-padding-top: 12px !default;
$dialog-bigger-content-padding-top: 16px !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: 12px 14px 12px 12px !default;
$dialog-content-padding: 12px !default;
$dialog-footer-content-padding: 12px !default;
$dialog-footer-content-border-top: 1px solid $border-light !default;
$dialog-alert-footer-content-border-top: 1px solid $border-light !default;
$dialog-bigger-header-content-padding: 16px !default;
$dialog-bigger-content-padding: 16px !default;
$dialog-bigger-footer-content-padding: 16px !default;
$dialog-bigger-footer-button-margin-left: 12px !default;
$dialog-footer-button-margin-left: 8px !default;
$dialog-bigger-footer-button-margin-right: 12px !default;
$dialog-footer-button-margin-right: 8px !default;
$dialog-close-icon-margin-left: 0 !default;
$dialog-close-icon-width: 12px !default;
$dialog-bigger-close-icon-height: 14px !default;
$dialog-bigger-close-icon-width: 14px !default;
$dialog-close-icon-top: 0 !default;
$dialog-headericon-bottom: 5px !default;
$dialog-bigger-header-content-font-size: $text-xl !default;
$dialog-bigger-content-font-size: $text-base !default;
$dialog-bigger-close-icon-top: 0 !default;
$dialog-bigger-close-icon-margin-left: 0 !default;
$dialog-bigger-close-icon-margin-right: 0 !default;
$dialog-bigger-close-button-bottom: 7px !default;
$dialog-bigger-close-button-left: -7px !default;
$dialog-bigger-close-button-height: 20px !default;
$dialog-bigger-close-button-width: 20px !default;
$dialog-resize-handler-width: 15px;
$dialog-resize-handler-height: 15px;
$dialog-resize-handler-position: 0;

//Layout Variables End

//Theme Variables Start
$dialog-header-font-size: $text-base !default;
$dialog-device-content-font-size: $text-base !default;
$dialog-bg-color: $content-bg-color !default;
$dialog-icon-color: $icon-color !default;
$dialog-active-icon-color: $icon-color-pressed !default;
$dialog-hover-icon-color: $icon-color-hover !default;
$dialog-icon-bg-normal: $transparent !default;
$dialog-header-bg-color: $transparent !default;
$dialog-content-bg-color: $content-bg-color !default;
$dialog-footer-bg-color: $transparent !default;
$dialog-shadow-color: $shadow-lg !default;
$dialog-header-font-weight: $font-weight-medium !default;
$dialog-header-font-color: $content-text-color !default;
$dialog-content-font-weight: $font-weight-normal !default;
$dialog-content-font-color: $content-text-color !default;
$dialog-closeicon-btn-hover-color: $transparent !default;
$dialog-closeicon-btn-active-color: $transparent !default;
$dialog-btn-border-color: $transparent !default;
$dialog-btn-bg-color: $transparent !default;
$dialog-active-btn-border-color: $transparent !default;
$dialog-hover-focus-btn-bg-color: $transparent !default;
$dialog-active-btn-bg-color: transparent !default;
$dialog-close-icon-normal-opacity: initial !default;
$dialog-close-icon-active-opacity: initial !default;
$dialog-overlay-bg-color: $overlay-bg-color !default;
$dialog-overlay-opacity: 1 !default;

//Theme Variables End

$dialog-footer-btn-bg-color: $primary !default;
$dialog-footer-btn-color: $primary-text-color !default;
$dialog-footer-btn-border-color: $primary-border-color !default;
$dialog-footer-hover-btn-color: $primary-bg-color-hover !default;

$dialog-footer-flat-btn-bg-color: $secondary-bg-color !default;
$dialog-footer-flat-hover-btn-bg-color: $secondary-bg-color-hover !default;
$dialog-footer-flat-btn-border-color: $secondary-border-color !default;
$dialog-footer-flat-btn-content-color: $secondary-text-color !default;
$dialog-enable-resize-padding-bottom: 15px !default;

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

  /*! dialog layout */
  /* stylelint-disable property-no-vendor-prefix */
  .e-dialog {
    -webkit-flex-direction: column;
    border: $dialog-border;
    border-radius: $dialog-border-radius;
    flex-direction: column;
    width: 100%;

    &.e-popup {
      width: 100%;
    }

    &.e-dlg-resizable {
      padding-bottom: $dialog-enable-resize-padding-bottom;
      touch-action: none;
    }

    .e-dlg-header-content {
      border-radius: $header-content-border-radius;
      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;
    }

    .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: 80%;
      @if $skin-name == 'Material3' {
        line-height: 30px;
      }

      &.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;
      border-top: $dialog-footer-content-border-top;
      bottom: 0;
      display: block;
      right: 0;
      width: 100%;

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

    .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: 0;
      position: absolute;
    }
  }

  //Bigger Style
  .e-bigger.e-dialog,
  #{if(&, '&', '*')}.e-bigger .e-dialog {
    #{if(&, '&', '*')} .e-dlg-header-content {
      padding: $dialog-bigger-header-content-padding;
    }

    & .e-dlg-header {
      font-size: $dialog-bigger-header-content-font-size;
      @if $skin-name == 'Material3' {
        line-height: 40px;
      }
    }

    & .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 {
      margin-left: $dialog-bigger-footer-button-margin-left;
    }

    & .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
      bottom: $dialog-bigger-close-button-bottom;
      height: $dialog-bigger-close-button-height;
      left: $dialog-bigger-close-button-left;
      width: $dialog-bigger-close-button-width;
      @if $skin-name == 'FluentUI' {
        padding: $dialog-bigger-header-btn-padding;
      }
      @if $skin-name == 'Material3' {
        padding: $zero-value;
      }
    }

    .e-btn .e-btn-icon.e-icon-dlg-close {
      font-size: $dialog-bigger-close-icon-font-size;
      width: $dialog-bigger-close-icon-width;
    }
  }

  .e-bigger.e-rtl .e-footer-content .e-btn,
  .e-bigger .e-rtl .e-footer-content .e-btn {
    margin-left: 0;
    margin-right: $dialog-bigger-footer-button-margin-right;
  }

  .e-bigger .e-dlg-header-content + .e-dlg-content {
    padding-top: $dialog-bigger-content-padding-top;
  }

  //Normal Style

  .e-dialog {
    & .e-dlg-header-content {
      border-bottom: $dialog-header-border;
      padding: $dialog-header-content-padding;
    }

    & .e-dlg-content {
      padding: $dialog-content-padding;
      @if $skin-name == 'Material3' {
        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 {
    max-height: 98%;
    max-width: 100%;
    min-width: 240px;
    position: absolute;
  }

  .e-rtl .e-footer-content .e-btn {
    margin-left: 0;
  }

  .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: 0;
    right: $dialog-close-button-left;
  }

  .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' {
      padding: $dialog-header-btn-padding;
    }
    @if $skin-name == 'Material3' {
      padding: $zero-value;
    }
  }

  .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: 100%;
    left: 0;
    opacity: $dialog-overlay-opacity;
    position: fixed;
    top: 0;
    transition: opacity .15s linear;
    width: 100%;

    &.e-fade {
      opacity: 0;
    }
  }

  .e-dlg-overflow-hidden {
    overflow: auto;
  }

  /* stylelint-disable declaration-no-important */
  .e-dlg-fullscreen {
    height: 100% !important;
    left: 0 !important;
    width: 100% !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: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
  }

  .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 {
    background-color: $dialog-hover-focus-btn-bg-color;
    border-color: $dialog-active-btn-border-color;
    box-shadow: 0 0 0 transparent;
  }

  .e-dialog .e-btn.e-dlg-closeicon-btn:active {
    background-color: $dialog-active-btn-bg-color;
  }
}

.e-content-placeholder.e-dialog.e-placeholder-dialog {
  background-size: 400px 210px;
  min-height: 210px;
}

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

@media (min-width: 768px) {
  .e-alert-dialog.e-dialog.e-popup,
  .e-confirm-dialog.e-dialog.e-popup {
    margin: 30px;
    width: 600px;
  }
}

@media (max-width: 768px) {
  .e-alert-dialog.e-dialog.e-popup,
  .e-confirm-dialog.e-dialog.e-popup {
    margin: 30px;
    width: auto;
  }
}

@media (max-width: 768px) {
  .e-prompt-dialog.e-dialog.e-popup,
  .e-prompt-dialog.e-dialog.e-popup {
    margin: 30px;
    width: auto;
  }
}

@media (min-width: 768px) {
  .e-prompt-dialog.e-dialog.e-popup,
  .e-prompt-dialog.e-dialog.e-popup {
    margin: 30px;
    width: 600px;
  }
}

.e-dlg-ref-element {
  display: none;
}

.e-dialog .e-footer-content {
  box-sizing: border-box;
}


@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 == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' {
      .e-btn.e-primary.e-flat:not([DISABLED]) {
        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]) {
        @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 == 'Material3' {
      .e-btn.e-primary.e-flat:not([DISABLED]):focus-visible,
      .e-btn.e-primary.e-flat:not([DISABLED]):focus,
      .e-btn.e-primary.e-flat:not([DISABLED]):focus,
      .e-btn.e-flat:not([DISABLED]):focus-visible {
        background: $dialog-footer-flat-hover-btn-bg-color;
        box-shadow: $shadow-focus-ring1;
      }
    }

    @if $skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI'or $skin-name == 'Material3' {
      .e-btn.e-flat:not([DISABLED]) {
        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]) {
        background: $dialog-footer-flat-hover-btn-bg-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 {
    color: $dialog-active-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:hover {
    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;
    }
  }

  .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 == '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-bootstrap5-icons') {
  .e-dialog {
    .e-icon-dlg-close::before {
      content: '\e7e7';
      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: '\e832';
    }
  }
}

/*! component's theme wise override definitions and variables */
$hscroll-skin: 'bootstrap5' !default;
$border-type: solid;
$hscroll-hover-font: $icon-color !default;
$hscroll-active-font-color: $content-text-color-alt2 !default;
$hscroll-default-bg: $content-bg-color-alt2 !default;
$hscroll-press-bg: $content-bg-color-alt2 !default;
$hscroll-active-bg: $content-bg-color-alt2 !default;
$hscroll-border-size: 1px !default;
$hscroll-nav-nrml-minheight: 38px !default;
$hscroll-nav-bgr-minheight: 46px !default;
$hscroll-mob-nav-nrml-width: 40px !default;
$hscroll-nav-nrml-width: 32px !default;
$hscroll-nav-bgr-width: 38px !default;
$hscroll-nrml-padding: 0 $hscroll-nav-nrml-width !default;
$hscroll-bgr-padding: 0 $hscroll-nav-bgr-width !default;
$hscroll-border-type: $border-type !default;
$hscroll-box-shadow: none !default;
$hscroll-hover-bg: $content-bg-color-alt3 !default;
$hscroll-hover-border-color: $border-light !default;
$hscroll-default-icon-color: $icon-color !default;
$hscroll-focus-border: 0 !default;
$hscroll-active-border: 0 !default;
$hscroll-hover-border: 0 !default;
$hscroll-active-box-shadow: none !default;
$hscroll-overlay-opacity: .5 !default;
$hscroll-overlay-bg: $content-bg-color-alt2 !default;
$hscroll-overlay-start: rgba($hscroll-overlay-bg, 0) !default;
$hscroll-overlay-end: rgba($hscroll-overlay-bg, 1) !default;
$hscroll-right-bg: linear-gradient(-270deg, $hscroll-overlay-start 0%, $hscroll-overlay-end 100%) !default;
$hscroll-left-bg:  linear-gradient(-270deg, $hscroll-overlay-end 0%, $hscroll-overlay-start 100%) !default;

$hscroll-device-arrow-box-shadow: $shadow !default;
$hscroll-device-arrow-rtl-box-shadow: $shadow !default;
$hscroll-device-arrow-bg: $content-bg-color-alt2 !default;
$hscroll-device-arrow-border-size: 1px !default;
$hscroll-device-arrow-border-color: $border-light !default;
$hscroll-device-arrow-color: $icon-color !default;
$hscroll-device-arrow-size: 18px !default;
$hscroll-device-arrow-icon-size: 18px !default;
$hscroll-device-arrow-size-bigger: 22px !default;
$hscroll-device-arrow-width: 48px !default;

$hscroll-default-border: $hscroll-hover-border-color !default;
$hscroll-ribble-animation-border-frame: rgba(255, 255, 255, .5) !default;
$hscroll-ribble-animation-shadow-frame: 0 0 0 0 $hscroll-ribble-animation-border-frame !default;
$hscroll-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !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 {
  background-color: transparent;
  border-radius: 50%;
  border-width: 1px;
  box-sizing: border-box;
  content: '';
  height: 1px;
  left: 50%;
  position: absolute;
  top: 50%;
  visibility: hidden;
  width: 1px;
}

@mixin hscroll-btn-animation-after {
  animation: hscroll-popup-shadow .6s ease-out 0ms;
  visibility: visible;
}

@keyframes hscroll-popup-shadow {
  0% {
    border-color: $hscroll-ribble-animation-border-frame;
    box-shadow: $hscroll-ribble-animation-shadow-frame;
  }

  100% {
    box-shadow: $hscroll-ribble-animation-shadow-frame-end;
  }
}

@include export-module('h-scroll') {

  /*! h-scroll layout */

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

    .e-scroll-overlay {

      &.e-scroll-right-overlay {
        right: $hscroll-nav-bgr-width;
      }
    }

    .e-scroll-nav {
      min-height: $hscroll-nav-bgr-minheight;
      width: $hscroll-nav-bgr-width;
    }
  }

  #{&}.e-hscroll {
    display: block;
    position: relative;
    width: inherit;

    &.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: inherit;
      line-height: normal;
    }

    .e-hscroll-content {
      display: inline-block;
      height: inherit;
      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: 0;
        }

        &.e-scroll-right-nav {
          border-left: 0;
          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;

      &.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-bootstrap5-icons') {

  /*! hscroll icons */
  #{&}.e-hscroll {

    &.e-rtl {

      &.e-scroll-device {

        .e-nav-right-arrow::before {
          content: '\e765';
        }

        .e-nav-left-arrow::before {
          content: '\e748';
        }
      }

      .e-nav-left-arrow::before {
        content: '\e748';
      }

      .e-nav-right-arrow::before {
        content: '\e765';
      }
    }

    &.e-scroll-device {

      .e-nav-right-arrow::before {
        content: '\e748';
      }

      .e-nav-left-arrow::before {
        content: '\e765';
      }
    }

    .e-nav-left-arrow::before {
      content: '\e765';
      line-height: normal;
    }

    .e-nav-right-arrow::before {
      content: '\e748';
      line-height: normal;
    }
  }
}

/*! component's theme wise override definitions and variables */
$vscroll-skin: 'bootstrap5' !default;
$vscroll-nav-nrml-height: 38px !default;
$vscroll-hover-font: $content-text-color-alt2 !default;
$vscroll-active-font-color: $content-text-color-alt2 !default;
$vscroll-border-size: 1px !default;
$vscroll-border-type: solid !default;

$vscroll-default-bg: $content-bg-color-alt2 !default;
$vscroll-nav-nrml-minheight: 38px !default;
$vscroll-nav-bgr-minheight: 48px !default;
$vscroll-nav-nrml-width: 28px !default;
$vscroll-nav-bgr-width: 48px !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: $content-bg-color-alt2 !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: $shadow !default;
$vscroll-device-arrow-rtl-box-shadow: $shadow !default;
$vscroll-device-arrow-bg: $content-bg-color-alt2 !default;
$vscroll-device-arrow-border-size: 1px !default;
$vscroll-device-arrow-border-color: $icon-color !default;
$vscroll-device-arrow-color: $icon-color !default;
$vscroll-device-arrow-size: 14px !default;
$vscroll-device-arrow-width: 48px !default;

$vscroll-default-icon-color: $icon-color !default;
$vscroll-hover-bg: $content-bg-color-alt3 !default;
$vscroll-press-bg: $content-bg-color-alt3 !default;
$vscroll-default-border: $icon-color !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: '';
}

@include export-module('v-scroll') {

  /*! v-scroll layout */

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

  #{&}.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-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-bootstrap5-icons') {

  /*! vscroll icons */
  #{&}.e-vscroll {

    &.e-scroll-device {

      .e-nav-up-arrow::before {
        content: '\e7dd';
      }

      .e-nav-down-arrow::before {
        content: '\e734';
      }
    }

    .e-nav-up-arrow::before {
      content: '\e776';
      line-height: normal;
    }

    .e-nav-down-arrow::before {
      content: '\e729';
      line-height: normal;
    }
  }
}

/*! Toolbar's bootstrap5 theme wise override definitions and variables */
/* stylelint-disable */
$tbar-skin: 'bootstrap5' !default;

//font definitions
$tbar-icons-bgr-font-size: $text-xl;
$tbar-btn-font-size: $text-lg !default;
$tbar-btn-txt-font-size: $text-sm !default;

// box shadow definitions
$tbar-pop-box-shadow: $shadow-lg;
$tbar-btn-box-shadow: none !default;
$tbar-box-shadow: none !default;
$tbar-nav-pressed-box-shadow: none !default;
$tbar-btn-pressed-box-shadow: none !default;

// padding definitions
$tbar-item-bgr-padding: 4px !default;
$tbar-item-nrml-padding: 4px !default;
$tbar-btn-nrml-padding: 0 4px !default;
$tbar-btn-bgr-padding: 0 8px !default;
$tbar-btn-bgr-focus-padding: 0 8px !default;
$tbar-btn-icn-nrml-padding: 4px !default;
$tbar-btn-icn-bgr-padding: 4px 6px !default;
$tbar-rtl-btn-icn-nrml-padding: 4px !default;
$tbar-rtl-btn-icn-bgr-padding: 4px 6px !default;
$tbar-btn-icn-right-bgr-padding: 4px 6px !default;
$tbar-btn-icn-right-nrml-padding: 4px !default;
$tbar-rtl-btn-icn-right-nrml-padding: 4px !default;
$tbar-rtl-btn-icn-right-bgr-padding: 4px 6px !default;
$btn-txt-nrml-padding: 4px !default;
$btn-txt-bgr-padding: 4px !default;
$btn-rtl-txt-nrml-padding: 4px !default;
$btn-rtl-txt-bgr-padding: 4px !default;
$tbar-item-pop-nrml-padding: 0 !default;
$tbar-item-pop-bgr-padding: 0 !default;
$tbar-pop-btn-bgr-padding: 8px 18px !default;
$tbar-pop-btn-nrml-padding: 6px 12px !default;
$tbar-pop-icon-bgr-padding: 0 6px 0 0 !default;
$tbar-pop-icon-nrml-padding: 0 4px 0 0 !default;
$tbar-pop-btn-txt-nrml-pad: 0 0 0 4px !default;
$tbar-pop-btn-txt-bgr-pad: 0 0 0 6px !default;
$tbar-popup-padding: 0 !default;

// dimension definitions
$tbar-btn-nrml-minheight: 32px !default;
$tbar-btn-nrml-line-height: 22px !default;
$tbar-btn-icon-nrml-line-height: 14px !default;
$tbar-btn-bgr-minheight: 38px !default;
$tbar-btn-bgr-line-height: 24px !default;
$tbar-btn-icon-bgr-line-height: 14px !default;
$tbar-btn-nrml-minwidth: 32px !default;
$tbar-btn-weight: $font-weight-normal !default;
$tbar-btn-bgr-minwidth: 38px !default;
$tbar-nrml-size: 38px !default;
$tbar-bgr-size: 46px !default;
$tbar-nrml-items-size: 38px !default;
$tbar-bgr-items-size: 46px !default;
$tbar-nrml-item-size: 38px !default;
$tbar-item-height: 38px !default;
$tbar-item-nrml-minwidth: 28px !default;
$tbar-bgr-item-size: 49px !default;
$tbar-btn-icon-nrml-width: 12px !default;
$tbar-btn-icon-nrml-height: 16px !default;
$tbar-right-item-line-height: 24px !default;
$tbar-btn-icon-bgr-width: 13px !default;
$tbar-nav-nrml-width: 28px !default;
$tbar-nav-bgr-width: 36px !default;
$tbar-btn-pop-nrml-minheight: 38px !default;
$tbar-btn-pop-bgr-minheight: 46px !default;
$tbar-radius: 0;
$tbar-pop-radius: 4px;
$tbar-zero-value: 0 !default;
$tbar-separator-nrml-height: 24px !default;
$tbar-separator-bgr-height: 30px !default;
$tbar-separator-nrml-minheight: $tbar-separator-nrml-height !default;
$tbar-separator-bgr-minheight: $tbar-separator-bgr-height !default;
$tbar-separator-size: 1px !default;
$tba-horizontal-separator: 0 $tbar-separator-size 0 0 !default;
$tba-vertical-separator: 0 0 $tbar-separator-size 0 !default;

// margin definitions
$tbar-item-nrml-mrgn: 8px !default;
$tbar-item-bgr-mrgn: 12px !default;
$tbar-multirow-items-mrgn-bigger: 12.5px !default;
$tbar-multirow-items-mrgn-small: 10px !default;
$tbar-multirow-item-top-btm-mrgn-bigger: 0 !default;
$tbar-multirow-item-top-btm-mrgn-small: 0 !default;
$tbar-btn-nrml-mrgn: 0 !default;
$tbar-separator-vertical-nrml-mrgn: 3px 7px;
$tbar-separator-bgr-mrgn: 8px;
$tbar-separator-vertical-bgr-mrgn: 5px 10px;
$tbar-separator-nrml-mrgn: 5px 10px;

// border definitions
$border-size: 0;
$border-type: solid;
$tbar-border-radius: 4px !default;
$tbar-border-nav-type: solid !default;
$tbar-border-size: $border-size;
$tbar-separator-border-type: $border-type;
$tbar-hover-border-color: $icon-color;
$tbar-pressed-border: $tbar-hover-border-color;
$tbar-separator-border: $border-light !default;
$tbar-default-border: $border-light !default;
$tbar-hover-border-color: $icon-color !default;
$tbar-focus-border-color: $tbar-hover-border-color !default;
$tbar-press-border-color: $border-light !default;
$tbar-border-nav-type: $border-light !default;
$tbar-border-nav-active-type: $border-light !default;
$tbar-btn-border: none !default;
$tbar-item-pop-bg-color: $transparent !default;
$tbar-popup-border-width: 0 0 0 $border-size !default;
$tbar-popup-rtl-border-width: 0 $border-size 0 0 !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-border-type: $border-type !default;
$tbar-nav-press-border: 0 !default;
$tbar-nav-hover-border: 0 !default;
$tbar-nav-focus-border: 0 !default;
$tbar-btn-border-radius: 4px !default;

// color definitions
$tbar-default-bg: $content-bg-color-alt1 !default;
$tbar-items-default-bg: $tbar-default-bg !default;
$tbar-default-font: $content-text-color !default;
$tbar-active-bg: $secondary-bg-color-pressed !default;
$tbar-active-icon-color: $primary-text-color !default;
$tbar-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
$tbar-press-bg: $content-bg-color-alt2 !default;
$tbar-btn-press-bg: $tbar-active-bg !default;
$tbar-hover-bg:  $secondary-bg-color-hover !default;
$tbar-hover-font: $icon-color !default;
$tbar-default-icon-color: $icon-color !default;
$tbar-pressed-bg: $secondary-bg-color-focus !default;
$tbar-pressed-font: $content-text-color-alt2 !default;
$tbar-select-font: $content-text-color-alt2 !default;
$tbar-default-icon-overlay: $content-text-color-alt2 !default;
$tbar-focus-bg: $tbar-hover-bg !default;
$tbar-press-font: $content-text-color-alt2 !default;
$tbar-default-font-overlay: $content-text-color-alt2 !default;
$tbar-active-font-color: $primary-text-color !default;
$tbar-pop-bg: $flyout-bg-color !default;

$tbar-bgr-btn-text-font-size: $text-base !default;
$tbar-bgr-btn-icon-font-size: $text-lg !default;
$tbar-bgr-btn-focus-padding: 0 8px !default;

$tbar-nrml-btn-border-radius: 4px !default;
$tbar-nrml-btn-focus-padding: 0 4px !default;
$tbar-nrml-btn-focus-outline: 0 !default;

$tbar-btn-icons-focus-color: $primary-text-color !default;
$tbar-btn-text-focus-color: $primary-text-color !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: $tbar-default-icon-color !default;
$tbar-btn-hover-active-text-color: $content-text-color-alt2 !default;
$tbar-btn-overlay-opacity: .5 !default;
$tbar-btn-active-bg: $tbar-active-bg !default;
$tbar-btn-active-icons-color: $tbar-default-icon-color !default;
$tbar-btn-active-text-color: $content-text-color-alt2 !default;
$tbar-btn-text-color: $content-text-color !default;
$tbar-btn-pressed-text-color: $secondary-text-color-pressed !default;
$tbar-btn-pressed-focus-box-shadow: $secondary-shadow-focus !default;
$tbar-btn-pressed-bg: $secondary-bg-color-pressed !default;
$tbar-flat-btn-active-box-shadow: none !default;

$tbar-ext-btn-focus-padding: 0 4px !default;
$tbar-ext-btn-icon-padding: 5px 6px !default;
$tbar-ext-btn-icon-font-size: $text-base !default;
$tbar-ext-btn-focus-box-shadow: none !default;
$tbar-ext-btn-hover-border-color: $tbar-hover-border-color !default;
$tbar-ext-btn-border: none !default;

$tbar-popup-icon-font-size: $text-lg !default;
$tbar-popup-text-btn-icon-padding: 4px 4px 5px 4px !default;
$tbar-popup-bgr-text-btn-icon-padding: 4px 6px 3px 6px !default;
$tbar-popup-btn-border: none !default;
$tbar-popup-btn-border-radius: 4px !default;
$tbar-popup-bgr-height: 38px !default;
$tbar-popup-bgr-btn-icon-font-size: $text-base !default;
$tbar-popup-bgr-btn-text-font-size: $text-base !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: $tbar-default-icon-color !default;
$tbar-popup-nav-hover-bg: $tbar-hover-bg !default;
$tbar-popup-nav-hover-color: $tbar-active-icon-color !default;
$tbar-popup-nav-hover-icons-color: inherit !default;
$tbar-popup-nav-hover-border-color: $tbar-default-border !default;
$tbar-popup-nav-hover-border-size: 0 !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 !default;
$tbar-popup-nav-focus-bg: $tbar-hover-bg !default;
$tbar-popup-nav-focus-color: $primary-text-color !default;
$tbar-popup-nav-focus-border-color: $tbar-default-icon-color !default;
$tbar-popup-nav-focus-border-size: 0 !default;
$tbar-popup-btn-bg: transparent !default;
$tbar-popup-btn-hover-bg: $tbar-hover-bg !default;
$tbar-popup-btn-hover-box-shadow: none !default;
$tbar-popup-btn-active-bg: transparent !default;
$tbar-popup-btn-active-box-shadow: none !default;
$tbar-popup-btn-focus-bg: $tbar-hover-bg !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;

@mixin tbar-btn-animation {
  content: '';
}

@mixin tbar-btn-animation-after {
  content: '';
}

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

  /*! toolbar layout */
  /* stylelint-disable property-no-vendor-prefix */
  .e-bigger .e-toolbar,
  .e-toolbar.e-bigger {
    height: $tbar-bgr-size;
    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-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) {
        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: 0;
          }

          &:last-child {
            margin-right: 0;
          }
        }
      }

      .e-toolbar-item {

        &:not(.e-separator) {
          min-height: 38px;
        }

        &.e-separator {
          height: auto;
          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: 0;
        padding-left: $tbar-item-bgr-mrgn;
        padding-right: $tbar-item-bgr-mrgn;
        padding-top: 0;

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

            .e-tbar-btn-text {
              padding: $btn-txt-bgr-padding;
            }

            &: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: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
  
        .e-toolbar-extended {
          border-top: 0;
          border-top-left-radius: 0;
          border-top-right-radius: 0;
        }
      }
    }

    &.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 {
            margin: 0;
          }

          .e-toolbar-right .e-toolbar-item {
            margin: 0;

            &:last-child {
              margin-left: $tbar-item-bgr-mrgn;
              margin-right: 0;
            }
          }
        }

        &:not(.e-tbar-pos) {

          .e-toolbar-item:first-child {
            margin-left: 0;
            margin-right: $tbar-item-bgr-mrgn;
          }
        }
      }
    }

    &.e-extended-toolbar.e-rtl {

      .e-toolbar-extended {
        padding-right: $tbar-item-bgr-mrgn;
      }
    }
  }

  .e-toolbar {
    border-radius: $tbar-radius;
    display: block;
    height: $tbar-nrml-size;
    min-height: $tbar-nrml-size;
    position: relative;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;

    .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-toolbar-items {
      border-radius: $tbar-radius 0 0 $tbar-radius;
      display: inline-flex;
      height: 100%;
      vertical-align: middle;
      align-items: center;

      &.e-toolbar-multirow {
        margin-bottom: 1px;
        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: 100%;
          top: 0;
        }

        .e-toolbar-right,
        .e-toolbar-left {
          position: absolute;
        }

        .e-toolbar-right {
          right: 0;
        }

        .e-toolbar-left {
          left: 0;
        }

        .e-toolbar-center {
          margin: 0 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 {
          margin: 0;
        }

        .e-toolbar-right .e-toolbar-item {
          margin: 0;

          &: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;

      .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-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) {
        height: inherit;
        min-width: $tbar-item-nrml-minwidth;
        padding: $tbar-item-nrml-padding;
      }

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

      &.e-hidden {
        display: none;
      }

      input[type = 'checkbox'] {
        height: auto;
      }
    }

    &.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: auto;
          }

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

          &:last-child {
            margin-right: 0;
          }
        }

        .e-toolbar-item {
          display: flex;
          height: auto;

          &:not(.e-separator) {
            min-width: 33px;
          }

          &.e-separator {
            height: auto;
            margin: $tbar-separator-vertical-nrml-mrgn;
            min-height: auto;
          }
        }
      }

      .e-hor-nav {
        bottom: 0;
        height: auto;
        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: 0 $tbar-radius $tbar-radius 0;
      cursor: pointer;
      display: flex;
      height: 100%;
      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 {
      color: $tbar-default-icon-color;
      display: flex;
      text-align: center;
      vertical-align: middle;
      align-items: center;
      justify-content: center;
      width: 100%;
      font-size: $tbar-popup-icon-font-size;
    }

    &.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) {
          min-width: 34px;
          padding: $tbar-item-pop-nrml-padding;
        }

        > * {
          height: 100%;
          min-width: 100%;
          text-overflow: ellipsis;
        }

        &.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: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }

      .e-toolbar-extended {
        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        min-height: $tbar-nrml-size;
        padding-bottom: 0;
        padding-left: $tbar-item-nrml-mrgn;
        padding-right: $tbar-item-nrml-mrgn;
        padding-top: 0;
        margin-left: -1px;
        box-shadow: none;
        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: 14px;
              }
            }

            &:not(.e-separator) {
              height: 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;
          }
        }
      }

      .e-hor-nav.e-ie-align {
        display: table;
      }
    }

    &.e-rtl {

      .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 {
          margin: 0;
        }

        .e-toolbar-right .e-toolbar-item {
          margin: 0;

          &: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: 0;
            }

            &:last-child {
              margin-left: $tbar-item-nrml-mrgn;
            }
          }
        }

        &:not(.e-tbar-pos) {

          .e-toolbar-item:first-child {
            margin-left: 0;
            margin-right: $tbar-item-nrml-mrgn;
          }
        }

        &:first-child {

          > .e-toolbar-item:last-child,
          > .e-toolbar-right .e-toolbar-item {

            &:last-child {
              margin-right: 0;
            }

            &:first-child {
              margin-right: $tbar-item-nrml-mrgn;
            }
          }
        }
      }

      .e-hor-nav {
        left: $tbar-zero-value;
        right: auto;
        border-radius: $tbar-radius 0 0 $tbar-radius;
      }
    }

    &.e-toolpop.e-rtl {

      .e-toolbar-items:not(.e-tbar-pos) {

        .e-toolbar-center .e-toolbar-item {
          margin: 0;
        }

        .e-toolbar-right .e-toolbar-item {
          margin: 0;

          &:last-child {
            margin: 0;
            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: 0;

        .e-toolbar-item .e-tbar-btn.e-btn .e-icon-left {
          padding-left: 0;
        }
      }
    }
  }
}


@include export-module('toolbar-theme') {

  /*! 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;
          }
  
          .e-tbar-btn-text {
            color: $tbar-btn-text-focus-color;
          }
        }
  
        &: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;
          }

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

          &: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;
            box-shadow: $tbar-popup-btn-focus-box-shadow;
            border-color: $tbar-btn-focus-border-color;
            border-style: $tbar-border-nav-type;
            border-width: $tbar-popup-btn-hover-border-size;
          }
        }

        .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;
            }
  
            &: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;
            }
  
            &: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-bootstrap5-icons') {

  /*! toolbar icons */
  #{&}.e-toolbar {

    .e-popup-down-icon::before {
      content: '\e729';
      line-height: normal;
    }

    .e-popup-up-icon::before {
      content: '\e776';
      line-height: normal;
    }
  }
}

/*! Tab's bootstrap5 theme wise override definitions and variables */
/* stylelint-disable */
/*! Horizontal Tab */
$tab-skin: 'bootstrap5' !default;

// font definitions
$tab-font-family: $font-family !default;
$tab-big-vertical-nav-arrow-font-size: $text-xs !default;
$tab-nrml-vertical-nav-arrow-font-size: $text-xxs !default;
$tab-content-font-color: $content-text-color !default;
$tab-big-font-size: $text-base !default;
$tab-nrml-font-size: $text-sm !default;
$tab-font-weight: $font-weight-normal !default;
$tab-semi-font-weight: $font-weight-normal !default;
$tab-light-font-weight: $font-weight-normal !default;

// dimension definitions
$tab-big-height: 42px !default;
$tab-nrml-height: 32px !default;
$tab-focus-big-height: 42px !default;
$tab-focus-nrml-height: 32px !default;
$tab-active-big-height: 42px !default;
$tab-active-nrml-height: 32px !default;
$tab-active-focus-big-height: 42px !default;
$tab-active-focus-nrml-height: 32px !default;
$tab-big-fill-height: 42px !default;
$tab-nrml-fill-height: 32px !default;
$tab-mob-fill-height: 42px !default;
$tab-focus-big-fill-height: 42px !default;
$tab-focus-nrml-fill-height: 32px !default;
$tab-disable-cnt-opacity: .38 !default;
$tab-big-tb-icon-height: 72px !default;
$tab-nrml-tb-icon-height: 62px !default;
$tab-big-vertical-scroll-nav-top-bottom: 23px !default;
$tab-big-vertical-nav-arrow-size: 24px !default;
$tab-nrml-vertical-scroll-nav-top-bottom: 15px !default;
$tab-nrml-vertical-nav-arrow-size: 16px !default;
$tab-text-transform: capitalize !default;
$tab-border-width: 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-pop-up-icon-hover-border: $tab-active-text-item-border !default;
$tab-pop-up-icon-focus-border: $tab-active-text-item-border !default;
$tab-pop-up-down-icon-hover-border: $tab-active-text-item-border !default;
$tab-pop-up-icon-active-border: $tab-active-text-item-border !default;
$tab-disable-active-text-item-border: 0 !default;
$tab-fill-hdr-border: 0 !default;
$tab-fill-disable-hdr-border: 0 !default;
$tab-anim-border-display: none !default;
$tab-border: none !default;
$tab-focus-hscroll-content-padding: 1px 0 !default;
$tab-hdr-border-width: 0 0 1px 0 !default;
$tab-alt-hdr-border: 0 !default;
$tab-items-border: 1px solid $primary-text-color !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-nrml-icon-top-bottom-item-height: 62px !default;
$tab-pop-big-icon-top-bottom-item-height: 50px !default;
$tab-pop-nrml-icon-top-bottom-item-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-nrml-fill-icon-top-bottom-item-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 0 0 !default;
$tab-nrml-last-item-margin: 0 !default;
$tab-big-active-last-item-margin: 0 2px 0 0 !default;
$tab-nrml-active-last-item-margin: 0 2px 0 0 !default;
$tab-big-scroll-last-item-margin: 0 2px 0 0 !default;
$tab-nrml-scroll-last-item-margin: 0 2px 0 0 !default;
$tab-nrml-active-scroll-last-item-margin: 0 2px 0 0 !default;
$tab-mob-last-item-margin: 0 2px 0 0 !default;
$tab-big-even-last-item-margin: 0 2px 0 0 !default;
$tab-nrml-even-last-item-margin: 0 2px 0 0 !default;
$tab-mob-even-last-item-margin: 0 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-nrml-pop-item-height: 26px !default;
$tab-alt-item-margin: 0 2px 0 0 !default;
$tab-big-rtl-item-margin: 0 !default;
$tab-nrml-rtl-item-margin: 0 !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-item-border: 1px solid $transparent !default;
$tab-active-item-border: 1px solid $border-light !default;
$tab-active-item-hide-border: 1px solid $content-bg-color !default;
$tab-active-item-border-color: $content-bg-color !default;
$tab-big-boot-item-margin: 0 !default;
$tab-nrml-boot-item-margin: 0 !default;
$tab-big-scroll-boot-item-margin: 0 2px 0 0 !default;
$tab-nrml-scroll-boot-item-margin: 0 2px 0 0 !default;
$tab-mob-boot-item-margin: 0 2px 0 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: 0 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-active-item-border-radius: 4px !default;
$tab-item-wrap-border-radius: 4px !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-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 16px !default;
$tab-nrml-wrap-padding: 0 12px !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-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: rgba($primary, 0) !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-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: 42px !default;
$tab-big-active-it-text-container-height: 42px !default;
$tab-fill-big-active-it-text-container-height: 42px !default;
$tab-fill-nrml-active-it-text-container-height: 32px !default;
$tab-big-even-active-text-container-height: 42px !default;
$tab-nrml-even-active-text-container-height: 32px !default;
$tab-even-active-text-container-margin: 0 !default;
$tab-big-it-text-margin: 0 0 0 8px !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: 8px 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-icon-container-width: auto !default;
$tab-big-nav-icon-container-size: 38px !default;
$tab-nrml-nav-icon-container-size: 32px !default;
$tab-big-nav-icon-size: 12px !default;
$tab-nrml-nav-icon-size: 10px !default;
$tab-mob-nav-icon-size: 16px !default;
$tab-mob-nav-vicon-size: 12px !default;
$tab-big-icon-size: 16px !default;
$tab-nrml-icon-size: 14px !default;
$tab-mob-icon-size: 20px !default;
$tab-big-icon-container-size: 24px !default;
$tab-nrml-icon-container-size: 24px !default;
$tab-mob-icon-container-size: 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-close-icon-size: 12px !default;
$tab-big-close-icon-size: 12px !default;
$tab-nrml-close-icon-size: 10px !default;
$tab-mob-close-icon-size: 12px !default;
$tab-close-icon-minwidth: 12px !default;
$tab-big-close-icon-margin: 2px 0 0 8px !default;
$tab-nrml-close-icon-margin: 0 0 0 6px !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-pop-border: 1px $black !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;

// color definitions
$tab-border-color: $border-light !default;
$tab-hover-border-color: $border-light !default;
$tab-disable-border-color: rgba($border-light, .38) !default;
$tab-alt-border-color: $primary-text-color !default;
$tab-alt-disable-border-color: $border-light !default;
$tab-bg-color: $transparent !default;
$tab-focused-wrap-focus-border-color: $icon-color !default;
$tab-alt-hdr-bg-color: $primary !default;
$tab-hdr-bdr-color: $border-light !default;
$tab-hdr-border: 1px solid $tab-hdr-bdr-color !default;
$tab-ripple-bg-color: rgba($transparent, .12) !default;
$tab-fill-ripple-bg-color: rgba($transparent, .05) !default;
$tab-alt-ripple-bg-color: rgba($transparent, .1) !default;
$tab-focus-bg-color: rgba($content-bg-color-alt2, .12) !default;
$tab-fill-focus-bg-color: rgba($content-bg-color-alt2, .8) !default;
$tab-hover-bg-color: $content-bg-color-alt3 !default;
$tab-active-bg-color: $content-bg-color-alt2 !default;
$tab-fill-active-bg-color: $primary !default;
$tab-fill-disable-active-bg-color: rgba($primary, .38) !default;
$tab-alt-active-bg-color: $primary !default;
$tab-alt-disable-active-bg-color: $primary !default;
$tab-alt-item-bg-color: inherit !default;
$tab-alt-active-focus-bg-color: $content-bg-color !default;
$tab-key-alt-active-focus-bg-color: rgba($primary, .12) !default;
$tab-alt-hover-bg-color: $primary-bg-color-hover !default;
$tab-alt-focus-top-bottom-bg-color: inherit !default;
$tab-item-hover-bg-color: $transparent !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: $content-text-color !default;
$tab-text-color: $primary !default;
$tab-disable-text-color:  $content-text-color-disabled !default;
$tab-mob-text-color: $content-text-color-alt2 !default;
$tab-active-text-color: $content-text-color-alt2 !default;
$tab-disable-active-text-color:  rgba($border-light, .38) !default;
$tab-focus-text-color: $primary-bg-color-pressed !default;
$tab-hover-text-color: $primary-bg-color-pressed !default;
$tab-pop-active-item-text-color: $tab-active-text-color !default;
$tab-alt-text-color: $primary-lighter !default;
$tab-alt-disable-text-color: rgba($border-light, .38) !default;
$tab-alt-active-style-hover-text-color: $content-text-color !default;
$tab-alt-active-style-hover-icon-color: $tab-alt-active-style-hover-text-color !default;
$tab-alt-disable-active-text-color: $content-text-color-alt3 !default;
$tab-alt-hover-text-color: $primary-text-hover !default;
$tab-alt-active-hover-text-color: $content-text-color-alt2 !default;
$tab-clone-item-bg-color: $content-bg-color-alt3 !default;
$tab-clone-text-color: $content-text-color-alt1 !default;
$tab-comb-icon-color:  $icon-color !default;
$tab-wrap-comb-icon-color: $tab-comb-icon-color !default;
$tab-comb-text-color: $content-text-color-alt2 !default;
$tab-close-icon-color: $icon-color !default;
$tab-mob-close-icon-color: rgba($icon-color, .87) !default;
$tab-active-close-icon-color: $icon-color !default;
$tab-close-icon-hover-color: $tab-hover-text-color !default;
$tab-close-icon-active-color: $primary !default;
$tab-alt-hover-text-color: $tab-alt-hover-text-color !default;
$tab-alt-active-text-color: $tab-alt-hover-text-color !default;
$tab-alt-close-icon-color: $tab-alt-hover-text-color !default;
$tab-alt-active-wrap-close-icon-color: $tab-alt-close-icon-color !default;
$tab-alt-active-close-icon-color: $primary-text-color !default;
$tab-alt-active-hover-close-icon-color: rgba($primary, 1) !default;
$tab-pop-bg-color: $flyout-bg-color !default;
$tab-hover-nav-bg-color: $content-bg-color-alt3 !default;
$tab-bg-hover-nav-bg-color: inherit !default;
$tab-nav-icon-color: $icon-color !default;
$tab-alt-nav-icon-color: $tab-alt-text-color !default;
$tab-active-nav-icon-color: $tab-active-text-color !default;
$tab-hover-nav-icon-color: $tab-hover-text-color !default;
$tab-alt-hover-nav-icon-color: $tab-alt-hover-text-color !default;
$tab-disable-nav-icon-color: $content-text-color-alt2 !default;
$tab-nav-focus-bg-color: $content-bg-color-alt2 !default;
$tab-nav-focus-icon-color: $icon-color !default;
$tab-bg-nav-focus-icon-color: $icon-color !default;
$tab-pop-icon-color: $content-text-color-alt2 !default;
$tab-pop-icon-hover-bg-color: $content-bg-color-alt3 !default;
$tab-pop-icon-hover-border: 1px solid $border-light !default;
$tab-pop-icon-focus-border: 1px solid $border-light !default;
$tab-pop-icon-active-border: 1px solid $border-light !default;
$tab-pop-border-box-shadow: inset $shadow-sm !default;
$tab-bg-hover-nav-icon-color: $icon-color !default;

$tab-nav-pop-press-border: 3px solid $transparent !default;
$tab-nav-pop-press-active-border: 3px solid $border-dark !default;
$tab-pop-box-shadow: $shadow-lg !default;
$tab-pop-icon-transition: none !default;
$tab-pop-up-icon-transform: rotate(0deg) !default;
$tab-pop-down-icon-transform: rotate(0deg) !default;

$tab-bgr-active-last-margin: 1px 2px 0 0 !default;
$tab-bgr-hscroll-items-nav-width: 38px !default;
$tab-bgr-item-textwrap-height: $tab-big-height !default;
$tab-bgr-active-icon-top: -.5px !default;
$tab-bgr-icon-line-height: $tab-big-icon-container-size !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: 38px !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: 42px !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: 32px !default;
$tab-nrml-hscroll-items-bdr-radius: 4px !default;
$tab-nrml-item-text-wrap-height: $tab-nrml-height !default;
$tab-nrml-item-tabicon-line-height: $tab-nrml-icon-container-size !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: 32px !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: 32px !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-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: $font-weight-normal !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;

@mixin tbar-alt-btn-animation-after {
  animation: none;
}

@mixin hscroll-alt-btn-animation-after {
  animation: none;
}

/*! Bootstrap specific themes definition's */
$tab-alt-focused-active-wrap-focus-or-hover-color: $content-text-color-alt2 !default;
$tab-alt-focused-active-wrap-focus-and-hover-color: $content-text-color-alt2 !default;
$tab-even-active-item-bottom-border-color: 1px solid $border-light !default;
$tab-fill-focused-active-wrap-focus-color: $content-bg-color-alt5 !default;
$tab-alt-active-wrap-hover-close-color: $primary !default;
$tab-alt-pop-wrap-hover-color: $content-text-color-alt2 !default;
$tab-alt-wrap-hover-color: darken($secondary, 15%) !default;
$tab-nav-active-box-shadow: inset 0 0 0 3px rgba($secondary, .5) !default;
$tab-nav-focus-border-color: $secondary !default;
$tab-alt-nav-hover-bg-color: $secondary !default;

/*! Vertical Tab */
$tab-vscroll-nrml-padding: 16px 0 !default;
$tab-vscroll-big-padding: 24px 0 !default;
$tab-big-v-wrap-padding: 0 16px !default;
$tab-nrml-v-wrap-padding: 0 12px !default;
$tab-indicator-display: none !default;
$tab-nrml-more-btn-line-height: 36px !default;
$tab-big-more-btn-line-height: 48px !default;
$tab-pop-more-icon-margin: 0 0 0 8px !default;
$tab-rtl-pop-more-icon-margin: 0 8px 0 0 !default;
$tab-vscroll-nav-border: 1px solid $transparent !default;
$tab-v-popup-box-shadow: $tab-pop-box-shadow !default;
$tab-v-nav-icon-border-width: 0 !default;
$tab-v-big-close-icon-top-bottom-right: -20px !default;
$tab-v-nrml-close-icon-top-bottom-right: -15px !default;
$tab-v-rtl-big-close-icon-top-bottom-right: 0 !default;
$tab-v-rtl-nrml-close-icon-top-bottom-right: 0 !default;
$tab-v-rtl-big-close-icon-top-bottom-left: -20px !default;
$tab-v-rtl-nrml-close-icon-top-bottom-left: -15px !default;
$tab-v-pop-focus-outline: 0 !default;
$tab-vscroll-nav-border-color: rgba($content-bg-color-alt3, .12) !default;
$tab-v-nav-focus-bg-color: rgba($content-bg-color-alt2, .12) !default;
$tab-v-nav-hover-bg-color: rgba($content-bg-color-alt2, .12) !default;

$tab-header-font-weight: $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: $tab-vscroll-nav-border !default;
$tab-clone-item-wrap-border: $tab-vscroll-nav-border !default;
$tab-item-wrap-hover-border: 1px solid $tab-hover-border-color !default;
$tab-item-wrap-hover-border-radius: $tab-top-active-item-border-radius !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: 1px solid $tab-focused-wrap-focus-border-color !default;
$tab-focused-wrap-focus-icon-color: $tab-comb-icon-color !default;
$tab-content-font-size: $text-xs !default;
$tab-item-active-tabwrap-border: 1px solid transparent !default;
$tab-item-left-icon-before-top: 0 !default;
$tab-item-icon-before-top: 1px !default;
$tab-item-icon-before-left: 5px !default;
$tab-item-active-border-bottom: 1px solid $content-bg-color !default;

$tab-pop-wrap-hover-border: $tab-vscroll-nav-border !default;
$tab-pop-wrap-hover-border-radius: 0 !default;
$tab-pop-wrap-hover-close-color: $tab-hover-text-color !default;
$tab-pop-wrap-active-border-color: transparent !default;
$tab-pop-wrap-active-icon-font: $tab-alt-active-text-color !default;
$tab-pop-icon-border: $tab-active-text-item-border !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: $tab-nav-focus-bg-color !default;
$tab-pop-nav-active-border: $tab-nav-pop-press-active-border !default;
$tab-pop-nav-active-border-radius: $tab-active-item-border-radius !default;
$tab-pop-active-icons-color: $content-text-color-alt2 !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: $tab-nav-pop-press-active-border !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: $primary-text-color !default;
$tab-bottom-hidden-items-border-width: 1px 0 0 !default;
$tab-bottom-active-border-color: $tab-active-item-border-color $border-light $border-light !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-text-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-close-icon-color !default;
$tab-fill-pop-active-icon-color: $tab-pop-text-color !default;
$tab-fill-pop-wrap-hover-bg: $tab-active-bg-color !default;
$tab-fill-pop-wrap-hover-text-color: $tab-alt-active-close-icon-color !default;
$tab-fill-pop-wrap-hover-icon-color: $tab-alt-active-close-icon-color !default;
$tab-fill-pop-wrap-hover-close-color: $tab-alt-active-close-icon-color !default;
$tab-fill-focused-active-tabwrap-focus-border-color: $tab-focused-wrap-focus-border-color !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-fill-focused-active-wrap-focus-color !default;

$tab-background-indicator-bottom: 0 !default;
$tab-background-wrap-border-color: transparent !default;
$tab-background-close-hover-color: $tab-alt-active-wrap-close-icon-color !default;
$tab-background-pop-icon-hover-bg: $tab-pop-icon-hover-bg-color !default;
$tab-background-pop-icon-hover-border-color: unset !default;
$tab-background-focused-active-wrap-focus-bg: $tab-key-alt-active-focus-bg-color !default;
$tab-background-focused-active-wrap-focus-border-color: $tab-alt-active-bg-color !default;
$tab-background-wrap-hover-text-color: $tab-alt-active-text-color !default;
$tab-background-wrap-hover-icon-color: $tab-alt-active-text-color !default;
$tab-background-wrap-hover-close-color: $tab-alt-active-text-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: $tab-hover-border-color !default;
$tab-background-active-bg: inherit !default;
$tab-background-active-text-color: $tab-active-text-color !default;
$tab-background-active-icon-color: $icon-color !default;
$tab-background-active-close-color: $tab-active-text-color !default;
$tab-background-active-wrap-bg: $tab-active-item-border-color !default;
$tab-background-active-wrap-border-color: $tab-alt-active-bg-color !default;
$tab-background-active-wrap-border-radius: $tab-top-active-item-border-radius !default;
$tab-background-active-wrap-border-width: 1px 1px 0 !default;
$tab-background-active-hover-text-color: $tab-active-text-color !default;
$tab-background-active-hover-icon-color: $icon-color !default;
$tab-background-active-hover-close-color: $tab-active-text-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-active-item-border-color !default;
$tab-background-active-wrap-focus-text-color: $tab-alt-active-hover-text-color !default;
$tab-background-active-wrap-focus-icon: $tab-alt-active-hover-text-color !default;
$tab-background-active-wrap-focushover-text-color: $tab-active-text-color !default;
$tab-background-active-wrap-focushover-close-color: $tab-active-text-color !default;
$tab-background-active-text-icon-color: $icon-color !default;
$tab-background-active-close-icon-color: $tab-alt-active-close-icon-color !default;
$tab-background-active-close-text-hover-color: $tab-active-text-color !default;
$tab-background-pop-text-color: $tab-alt-text-color !default;
$tab-background-pop-wrap-hover-bg: $tab-active-bg-color !default;
$tab-background-pop-wrap-hover-text-color: $tab-alt-active-text-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-active-bg-color !default;
$tab-background-focused-wrap-focus-border-color: $tab-focused-wrap-focus-border-color !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: $tab-alt-active-bg-color !default;
$tab-background-bottom-active-wrap-border-radius: 0 0 4px 4px !default;
$tab-background-bottom-active-wrap-border-width: 0 2px 2px !default;
$tab-background-vertical-left-active-border-color: unset !default;
$tab-background-vertical-left-active-border-width: 0 !default;
$tab-background-vertical-left-active-wrap-border-radius: 4px 0 0 4px !default;
$tab-background-vertical-left-active-wrap-border-width: 2px 0 2px 2px !default;
$tab-background-vertical-right-active-border-width: 0 !default;
$tab-background-vertical-right-active-wrap-border-radius: 0 4px 4px 0 !default;
$tab-background-vertical-right-active-wrap-border-width: 2px 2px 2px 0 !default;
$tab-background-focused-active-wrap-hover-bg: $tab-background-active-wrap-bg !default;
$tab-background-focused-active-wrap-hover-border: 1px solid $tab-hover-border-color !default;
$tab-background-focused-active-wrap-hover-border-radius: $tab-top-active-item-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;

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

  /*! tab layout */

  .e-bigger .e-tab,
  .e-tab.e-bigger {

    .e-tab-header {
      height: $tab-big-height;
      min-height: $tab-big-height;

      .e-toolbar-items {
        height: auto;
        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;

          @media screen and (max-width: 480px) {
            margin: $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;

          @media screen and (max-width: 480px) {
            margin: $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-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-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;

          @media screen and (max-width: 480px) {
            margin: $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-size;
          min-width: $tab-big-icon-container-size;
          width: $tab-big-icon-container-size;
          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: 0 0 0 12px;

          @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: auto;
            }
          }

          &.e-active .e-tab-wrap {
            height: $tab-big-icon-top-bottom-item-height;

            &:focus .e-text-wrap {
              height: auto;
            }
          }

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

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

          .e-close-icon {
            margin: 0 0 0 8px;
          }

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

            @media screen and (max-width: 480px) {
              min-height: $tab-pop-big-icon-top-bottom-item-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: 0;
            padding-left: 0;
            padding-right: 12px;

            @media screen and (max-width: 480px) {
              margin: 0;
              padding-left: 0;
              padding-right: 0;
            }
          }
        }
      }

      .e-scroll-nav {
        height: $tab-big-height;
        min-height: $tab-big-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-size;
          line-height: $tab-big-nav-icon-container-size;
          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-size;
            line-height: $tab-big-nav-icon-container-size;
            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-size;
            top: $tab-bgr-scroll-nav-arrow-before-top;
            vertical-align: initial;
          }
        }
      }

      .e-hor-nav {
        height: $tab-big-height;
        min-height: $tab-big-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-size;
          line-height: $tab-big-nav-icon-container-size;
          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-size;
            line-height: $tab-big-nav-icon-container-size;
            width: $tab-big-nav-icon-container-size;
          }

          &::before {
            font-size: $tab-big-nav-icon-size;
            line-height: $tab-big-nav-icon-container-size;
            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: 0;

            @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: 0;

            @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: 0;
            padding-top: 0;
          }

          &.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: 0;
          }

          &.e-itop.e-active .e-text-wrap,
          &.e-ibottom.e-active .e-text-wrap {
            height: initial;
          }

          &.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: inherit;

          &:not(.e-tbar-pos) {

            .e-toolbar-item:last-child {
              margin: 0;
            }
          }
        }

        .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-size;
          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-size;
            line-height: $tab-big-vertical-nav-arrow-size;
            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;
            }

            &::after {
              font-size: $tab-big-font-size;
              line-height: $tab-big-more-btn-line-height;
              margin: $tab-pop-more-icon-margin;
            }
          }
        }

        &.e-toolpop {

          .e-toolbar-items {
            height: auto;
          }
        }
      }
    }

    &.e-vertical-icon {

      > .e-tab-header {
        height: $tab-big-tb-icon-height;
        min-height: $tab-big-tb-icon-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: inherit;
          }

          .e-scroll-nav {
            height: $tab-big-vertical-nav-arrow-size;
          }
        }
      }
    }

    &.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: auto;
              }
            }

            &.e-active .e-tab-wrap:focus .e-text-wrap {
              height: auto;
            }
          }
        }

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

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

        @media screen and (max-width: 480px) {
          height: $tab-mob-fill-height;
          min-height: $tab-mob-fill-height;
        }

        .e-toolbar-items {
          height: auto;
          min-height: $tab-big-fill-height;

          @media screen and (max-width: 480px) {
            min-height: $tab-mob-fill-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-height;
            padding: $tab-bgr-fill-active-item-padding;

            @media screen and (max-width: 480px) {
              height: $tab-mob-fill-height;
              min-height: $tab-mob-fill-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-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: auto;
          }
        }

        &.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: auto;
          }

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

                @media screen and (max-width: 480px) {
                  height: auto;
                }
              }
            }
          }
        }
      }

      &.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 - 2;
          min-height: $tab-big-tb-icon-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: 0;

            .e-tab-text {
              padding-left: $tab-rtl-big-pop-text-padding-left;
              padding-right: 0;

              @media screen and (max-width: 480px) {
                padding-left: 0;
              }
            }

            .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: 0;
              padding-left: 12px;
              padding-right: 0;

              @media screen and (max-width: 480px) {
                margin: 0;
                padding-left: 0;
                padding-right: 0;
              }
            }
          }
        }

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

            &.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-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: 100%;
    }

    .e-tab-header {
      height: $tab-nrml-height;
      min-height: $tab-nrml-height;

      @media screen and (max-width: 480px) {
        height: $tab-big-height;
        min-height: $tab-big-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: auto;
        margin: 0;
        min-height: $tab-nrml-height;
        position: relative;

        @media screen and (max-width: 480px) {
          min-height: $tab-big-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;

          @media screen and (max-width: 480px) {
            margin: $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: 0;

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

          @media screen and (max-width: 480px) {
            margin: $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-width;
        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-height;
          min-width: auto;
          padding: $tab-nrml-item-padding;

          @media screen and (max-width: 480px) {
            height: $tab-big-height;
            min-height: $tab-big-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: 0;

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

          @media screen and (max-width: 480px) {
            margin: $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-size;
          min-width: $tab-nrml-icon-container-size;
          width: $tab-nrml-icon-container-size;
          line-height: $tab-nrml-item-tabicon-line-height;

          @media screen and (max-width: 480px) {
            height: $tab-mob-icon-container-size;
            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: 0 0 0 8px;

          @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: auto;
              }
            }
          }

          .e-text-wrap {
            display: block;
            height: auto;
          }

          &.e-active {

            .e-tab-wrap {

              &:focus {

                .e-text-wrap {
                  height: auto;
                }
              }

              .e-text-wrap {
                height: auto;
              }
            }
          }

          .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: 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-height;
          min-width: auto;

          @media screen and (max-width: 480px) {
            height: $tab-mob-pop-item-height;
            min-height: $tab-mob-pop-item-height;
          }

          &:not(.e-separator) {
            margin: $tab-pop-item-margin;
            padding: 0;
          }

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

          .e-tab-text {
            display: inline-flex;
            width: 100%;
          }

          .e-close-icon {
            margin: 0 0 0 8px;
          }

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

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

              @media screen and (max-width: 480px) {
                min-height: $tab-pop-big-icon-top-bottom-item-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: auto;
            }

            .e-tab-text {
              display: block;
              justify-content: center;
              margin: 0 0 0 10px;
              padding-left: 0;
              padding-right: 10px;

              @media screen and (max-width: 480px) {
                justify-content: center;
                margin: 0 0 0 12px;
                padding-left: 0;
                padding-right: 0;
              }
            }

            .e-close-icon {
              right: $tab-nrml-pop-close-icon-top-bottom-right;
              top: initial;
            }
          }

          &.e-ibottom {

            .e-tab-text {
              margin: 0;
            }
          }

          .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-height;
        min-width: auto;
        width: auto;

        @media screen and (max-width: 480px) {
          height: $tab-big-height;
          min-height: $tab-big-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-size;
          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-size;
          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-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-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-size;
          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-size;
            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: 0;
          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: 0;
            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: 0;

              @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: initial;
            }

            &.e-active {

              .e-text-wrap {
                height: initial;
                padding: 0;
              }

              .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: 100%;
          left: 0;
          top: 0;
        }

        &[style *= 'overflow: hidden']::before {
          bottom: $tab-nrml-vertical-scroll-nav-top-bottom;
          height: auto;
          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: inherit;
          flex-direction: column;
          align-items: normal;

          &.e-vscroll:not(.e-scroll-device) {
            padding: $tab-vscroll-nrml-padding;
          }
        }

        .e-toolbar-item {

          &:last-child {
            margin: 0;
          }

          &:not(.e-separator) {
            margin: 0;
          }

          .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: 3px 0 0 3px;
            }
          }

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

            &::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: 0 3px 3px 0;
            }
          }

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

            &::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-size;
            margin: 0 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: 100%;
            transform: none;
            transition: none;
            width: 100%;

            &::before {
              float: left;
              font-family: $tab-font-family;
              font-size: $tab-nrml-font-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: 12px;
              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: auto;
          }
        }
      }
    }

    &.e-rtl {

      .e-tab-header.e-vertical {

        .e-toolbar-items:not(.e-tbar-pos) {

          .e-toolbar-item:last-child {
            margin: 0;
          }
        }

        .e-toolbar-item {

          &:not(.e-separator) {
            margin: 0;

            &.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-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: inherit;
        }
      }
    }

    &.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: auto;
          }

          &.e-active .e-tab-wrap:focus .e-text-wrap {
            height: auto;
          }
        }
      }

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

          &.e-itop,
          &.e-ibottom {

            .e-tab-wrap:focus .e-text-wrap {
              height: auto;
            }

            &.e-active .e-tab-wrap:focus .e-text-wrap {
              height: auto;
            }
          }
        }
      }
    }

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

        @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: auto;
          min-height: $tab-nrml-fill-height;

          @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-height;
            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-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: auto;
          }
        }

        .e-toolbar-pop {

          .e-toolbar-item.e-itop:not(.e-separator),
          .e-toolbar-item.e-ibottom:not(.e-separator) {
            height: auto;
          }
        }

        &.e-horizontal-bottom {

          .e-toolbar-items:not(.e-tbar-pos) {

            .e-toolbar-item {

              &:first-child.e-active,
              &:last-child.e-active {
                padding: 0;
              }

              &.e-itop,
              &:first-child.e-itop,
              &:last-child.e-itop {
                padding-top: 0;
              }
            }
          }

          .e-toolbar-item {

            &.e-active {
              margin-right: 0;
              padding: 0;

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

        &.e-vertical {

          .e-toolbar-items {
            height: inherit;

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

              @media screen and (max-width: 480px) {
                height: auto;
              }
            }
          }
        }
      }

      &.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 - 2;
          min-height: $tab-nrml-tb-icon-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: 0;
            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;

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

          .e-toolbar-item.e-active {
            margin: 0;
            padding: 0;
          }
        }

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

            .e-tab-text {
              padding-left: $tab-rtl-nrml-pop-text-padding-left;
              padding-right: 0;

              @media screen and (max-width: 480px) {
                padding-left: 0;
              }
            }

            .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: 0;
              padding-left: 10px;
              padding-right: 0;

              @media screen and (max-width: 480px) {
                margin: 0;
                padding-left: 10px;
                padding-right: 0;
              }
            }
          }
        }

        .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: 0;
            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-height;
      min-width: auto;
      padding: $tab-nrml-item-padding;

      @media screen and (max-width: 480px) {
        height: $tab-big-height;
        min-height: $tab-big-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-size;
      min-width: $tab-nrml-icon-container-size;
      width: $tab-nrml-icon-container-size;
      line-height: $tab-nrml-item-tabicon-line-height;

      @media screen and (max-width: 480px) {
        height: $tab-mob-icon-container-size;
        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: 0 0 0 8px;

      @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: auto;
          }
        }
      }

      .e-text-wrap {
        display: block;
        height: auto;
      }

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

  .e-bigger .e-tab-clone-element {

    &:not(.e-separator) {
      height: $tab-big-height;
      margin: $tab-big-item-margin;
      min-height: $tab-big-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-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;

      @media screen and (max-width: 480px) {
        margin: $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-size;
      min-width: $tab-big-icon-container-size;
      width: $tab-big-icon-container-size;
      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: 0 0 0 12px;

      @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: auto;
        }
      }

      &.e-active .e-tab-wrap {
        height: $tab-big-icon-top-bottom-item-height;

        &:focus .e-text-wrap {
          height: auto;
        }
      }

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


@include export-module('tab-theme') {

  /*! tab theme */
  .e-tab {
    background: $tab-bg-color;
    border: $tab-border;

    .e-tab-header {
      background: inherit;
      border: 0;
      border-radius: 0;
      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: 0;
        }
      }

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

          @media screen and (max-width: 480px) {
            color: $tab-mob-text-color;

            .e-tab-icon {
              color: $tab-mob-text-color;
            }

            .e-close-icon {
              color: $tab-mob-close-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') {
                border-radius: 3px 3px 0 0;
                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;
          }
        }

        &.e-disable.e-overlay {
          background: inherit;
          opacity: 1;
          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-hover-text-color;
              }

              .e-tab-icon,
              .e-close-icon {
                color: $tab-pop-wrap-hover-close-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: 0;

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

        &.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: 0;

        .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: 0;
          background: $tab-pop-hover-bg;

          &:active {
            background: transparent;
          }
        }

        &:active {
          box-shadow: none;
          background: $tab-pop-focus-bg;
        }

        &.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: 0;

        &::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: 0;

            &: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: 0;
              }
            }
          }
        }

        .e-hor-nav {

          .e-popup-up-icon,
          .e-popup-down-icon {
            border: 0;

            &:hover {
              background: inherit;
              border: 0;
              color: $tab-vertical-pop-icon-hover-color;
            }
          }

          &:focus {

            .e-popup-up-icon,
            .e-popup-down-icon {
              background: inherit;
              border: 0;

              &:hover,
              &:active,
              &:active:hover {
                background: inherit;
                border: 0;
                box-shadow: none;
              }

              &:active {
                color: $tab-vertical-pop-icon-active-color;
              }
            }
          }

          &:hover {

            .e-popup-up-icon,
            .e-popup-down-icon {
              border: 0;
            }
          }
        }
      }
    }

    &.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 {
          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: 0;
            }
          }
        }

        .e-hor-nav {

          .e-popup-up-icon,
          .e-popup-down-icon {
            border: 0;
          }

          &: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: 0;
        }

        .e-toolbar-item {
          border: 0;

          .e-ripple-element {
            background: $tab-fill-ripple-bg-color;
          }

          .e-tab-wrap {
            color: $tab-text-color;

            &:hover .e-tab-text,
            &:hover .e-tab-icon {
              color: $tab-hover-text-color;
            }

            &:hover .e-tab-icon {
              color: $tab-fill-wrap-hover-icon-color;
            }
          }

          .e-text-wrap {
            margin-top: 0;
          }

          &.e-active {
            border: 0;

            &.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: 0;
            }

            .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: 0;
          border-top: $tab-fill-hdr-border;

          .e-toolbar-item {

            &.e-active .e-text-wrap {
              margin-top: 0;
            }
          }
        }

        &.e-vertical {
          border-bottom: 0;

          &.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: 0;
            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: 0;

        .e-toolbar-items {
          background: $tab-alt-item-bg-color;
        }

        .e-toolbar-items.e-hscroll {
          border: 0;
        }

        .e-indicator {
          background: $tab-alt-border-color;
          bottom: $tab-background-indicator-bottom;
        }

        .e-toolbar-item {
          border: 0;

          .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: 0;
            margin: 0;
            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: 3px 3px 0 0;
              }
            }

            .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: 0;
            margin: 0;

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

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

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

            &:focus {

              .e-nav-arrow {
                border: 0;

                &: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 {
            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: 0;
          }
        }
      }
    }

    .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-bootstrap5-icons') {

  /*! tab icons */
  #{&}.e-tab {

    .e-tab-header {

      .e-close-icon::before {
        content: '\e7e7';
        position: relative;
      }
    }

    &.e-vertical-icon .e-tab-header {

      @media screen and (max-width: 480px) {

        .e-popup-up-icon::before {
          content: '\e776';
        }

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

    &.e-vertical-tab {

      .e-tab-header {

        .e-popup-up-icon {

          &::before {
            content: 'More';
          }

          &::after {
            content: '\e776';
          }
        }

        .e-popup-down-icon {

          &::before {
            content: 'More';
          }

          &::after {
            content: '\e729';
          }
        }
      }

      &.e-icon-tab {

        .e-tab-header {

          .e-popup-up-icon {

            &::before {
              content: '';
            }

            &::after {
              content: '\e776';
            }
          }

          .e-popup-down-icon {

            &::before {
              content: '';
            }

            &::after {
              content: '\e729';
            }
          }
        }
      }
    }
  }

  .e-tab-clone-element {

    .e-close-icon::before {
      content: '\e7e7';
      position: relative;
    }
  }
}

/*! TreeView's bootstrap5 theme wise override definitions and variables */
/* stylelint-disable */
$treeview-font-size: $text-sm !default;
$treeview-icon-font-size: $text-xl !default;
$treeview-image-font-size: $text-xl !default;
$treeview-item-height: 36px !default;
$treeview-text-height: 34px !default;
$treeview-input-height: 30px !default;
$treeview-root-ul-padding: 0 0 0 12px !default;
$treeview-rtl-root-ul-padding: 0 12px 0 0 !default;
$treeview-child-ul-padding: 0 0 0 20px !default;
$treeview-rtl-child-ul-padding: 0 20px 0 0 !default;
$treeview-text-wrap-padding: 0 0 0 20px !default;
$treeview-rtl-text-wrap-padding: 0 20px 0 0 !default;
$treeview-icon-size: 20px !default;
$treeview-icon-margin: 0 4px 0 -25px !default;
$treeview-rtl-icon-margin: 0 -20px 0 0 !default;
$treeview-icon-padding: 0px !default;
$treeview-text-padding: 0 8px !default;
$treeview-text-margin: 0 !default;
$treeview-image-size: 20px !default;
$treeview-image-margin: 0 0 0 8px !default;
$treeview-navigable-icon-image-anchor-margin-bigger: 0 12px 0 8px !default;
$treeview-navigable-icon-image-anchor-margin-reverse-bigger: 0 6px 0 10px !default;
$treeview-navigable-icon-image-anchor-margin: 0 8px 0 0 !default;
$treeview-navigable-icon-image-anchor-margin-reverse: 0 0 0 8px !default;
$treeview-navigable-rtl-margin-reverse: 0 12px 0 0 !default;
$treeview-rtl-image-margin: 0 8px 0 0 !default;
$treeview-image-text-padding: 0 8px !default;
$treeview-icon-image-margin: 0 0 0 8px !default;
$treeview-rtl-icon-image-margin: 0 8px 0 0 !default;
$treeview-check-margin: 0 0 0 12px !default;
$treeview-rtl-check-margin: 0 12px 0 0 !default;
$treeview-check-text-padding: 0 8px !default;
$treeview-check-image-margin: 0 0 0 8px !default;
$treeview-rtl-check-image-margin: 0 8px 0 0 !default;
$treeview-drop-count-border-size: 1px !default;
$treeview-drop-count-font-size: $text-xs !default;
$treeview-edit-wrap-width: calc(100% - 2px) !default;
$treeview-check-wrap-width: calc(100% - 21px) !default;
$treeview-check-icon-wrap-width: calc(100% - 54px) !default;
$treeview-check-icon-img-wrap-width: calc(100% - 82px) !default;
$treeview-icon-wrap-width: calc(100% - 32px) !default;
$treeview-icon-img-wrap-width: calc(100% - 60px) !default;

$treeview-big-font-size: $text-base !default;
$treeview-big-icon-font-size: $text-2xl !default;
$treeview-big-item-height: 42px !default;
$treeview-big-text-height: 40px !default;
$treeview-big-input-height: 40px !default;
$treeview-big-text-padding: 0 12px !default;
$treeview-big-input-padding: 0 9px !default;
$treeview-big-icon-padding: 0px !default;
$treeview-big-image-margin: 0 0 0 12px !default;
$treeview-big-rtl-image-margin: 0 12px 0 0 !default;
$treeview-big-icon-image-margin: 0 0 0 12px !default;
$treeview-big-rtl-icon-image-margin: 0 12px 0 0 !default;
$treeview-big-check-margin: 0 0 0 12px !default;
$treeview-big-rtl-check-margin: 0 12px 0 0 !default;
$treeview-big-check-image-margin: 0 0 0 12px !default;
$treeview-big-rtl-check-image-margin: 0 12px 0 0 !default;
$treeview-big-root-ul-padding: 0 0 0 16px !default;
$treeview-big-rtl-root-ul-padding: 0 16px 0 0 !default;
$treeview-big-child-ul-padding: 0 0 0 20px !default;
$treeview-big-rtl-child-ul-padding: 0 20px 0 0 !default;
$treeview-big-image-text-padding: 0 12px !default;
$treeview-big-icon-margin: 0 0 0 -24px !default;
$treeview-big-rtl-icon-margin: 0 -24px 0 0 !default;
$treeview-big-text-wrap-padding: 0 0 0 24px !default;
$treeview-big-rtl-text-wrap-padding: 0 24px 0 0 !default;
$treeview-big-drag-icon-font-size: $text-2xl !default;
$treeview-big-drag-item-text-padding-left: 24px !default;
$treeview-big-drag-before-icon-padding: 6px !default;
$treeview-big-check-text-padding: 0 12px !default;
$treeview-big-check-wrap-width: calc(100% - 29px) !default;
$treeview-big-check-icon-wrap-width: calc(100% - 65px) !default;
$treeview-big-check-icon-img-wrap-width: calc(100% - 101px) !default;
$treeview-big-icon-wrap-width: calc(100% - 35px) !default;
$treeview-big-icon-img-wrap-width: calc(100% - 71px) !default;

$treeview-font-family: $font-family !default;
$treeview-drag-icon-font-size: $text-xl !default;
$treeview-drag-icon-padding: 12px !default;

//treeview ripple effect variables
$ripple-size: -7px !default;
$ripple-height: 32px !default;
$ripple-width: 32px !default;

//color variables
$treeview-icon-color: $icon-color !default;
$treeview-text-color: $content-text-color !default;
$treeview-item-border-color: $transparent !default;
$treeview-item-active-bg: $content-bg-color-selected !default;
$treeview-icon-active-color: $content-text-color-selected !default;
$treeview-text-active-color: $content-text-color-selected !default;
$treeview-item-active-border-color: $content-bg-color-selected !default;
$treeview-item-hover-bg: $content-bg-color-hover !default;
$treeview-icon-hover-color: $icon-color-hover !default;
$treeview-text-hover-color: $content-text-color-hover !default;
$treeview-item-hover-border-color: $content-bg-color-hover !default;
$treeview-item-active-hover-bg: darken($treeview-item-active-bg, 5%) !default;
$treeview-icon-active-hover-color: $content-text-color-selected !default;
$treeview-text-active-hover-color: $content-text-color-selected !default;
$treeview-item-active-hover-border-color: $content-bg-color-selected !default;
$treeview-text-disable-color: $content-text-color-disabled !default;
$treeview-icon-disable-color: $icon-color-disabled !default;
$treeview-drag-line-bg: $primary !default;
$treeview-drag-line-color: $primary !default;
$treeview-popup-bg-color: $content-bg-color-hover !default;
$treeview-popup-border-color: $content-bg-color-hover !default;
$treeview-drop-count-bg: $primary !default;
$treeview-drop-count-border: $primary-text-color !default;
$treeview-drop-count-color: $primary-text-color !default;
$treeview-drag-item-bg: $content-bg-color-alt3 !default;
$treeview-drag-item-color: $content-text-color-alt1 !default;
$treeview-drag-icon-color: $content-text-color-alt1 !default;
$treeview-item-active-check-bg: $primary-text-color !default;
$treeview-item-active-check-border-color: $primary-text-color !default;
$treeview-item-active-check-color: $primary !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: 4px 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;
    }
  }
}

@include export-module('treeview-layout') {
  @keyframes rotation {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(359deg);
    }
  }

  @-webkit-keyframes rotation { /* stylelint-disable-line at-rule-no-vendor-prefix */
    from {
      -webkit-transform: rotate(0deg);
    }

    to {
      -webkit-transform: rotate(359deg);
    }
  }

  .e-bigger .e-treeview,
  .e-treeview.e-bigger {

    @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' {
      .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 {
          height: $treeview-big-icon-font-size;
          width: $treeview-big-icon-font-size;
        }

        .e-small.e-css.e-checkbox-wrapper {
          & .e-frame {
            height: 18px;
            line-height: 17px;
            width: 18px;
          }

          & .e-check {
            font-size: 12px;
          }

          & .e-stop {
            font-size: 12px;
            line-height: 17px;
          }
        }

        .e-checkbox-wrapper {
          & + .e-list-text {
            padding: $treeview-big-check-text-padding;
          }
        }
      }

      .e-icon-collapsible,
      .e-icon-expandable {
        height: $treeview-big-icon-font-size;
        margin: $treeview-big-icon-margin;
        width: $treeview-big-icon-font-size;
      }

      &.e-drag-item {

        @if $skin-name == 'FluentUI' {
          .e-icon-expandable,
          .e-icon-collapsible {
            padding-left: 24px;
            padding-top: 10px;
          }
        }

        .e-drop-count {
          padding: 3px 5px 4px;
        }
      }
    }

    .e-navigable {

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

      .e-list-text {
        @if ($skin-name != 'Material3') {
          padding: 0;
        }
        width: 100%;
      }

      .e-checkbox-wrapper + .e-list-text {
        padding: 0;
      }

      .e-checkbox-wrapper + .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-height;
      @if $skin-name != 'bootstrap4' {
        min-height: $treeview-big-text-height;
      }
      @else if $skin-name == 'bootstrap4' {
        min-height: 38px;
      }
      padding: $treeview-big-text-padding;

      .e-input-group {
        height: $treeview-big-input-height;

        @if $skin-name != 'material' {
          .e-input {
            height: 36px;
          }
        }
      }
    }

    .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') {
        & + .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' {
        height: $treeview-big-icon-size;
        margin: $treeview-big-icon-margin;
        width: $treeview-big-icon-size;
      }
    }

    .e-icon-collapsible::before,
    .e-icon-expandable::before {
      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;
          }
        }

        .e-icon-collapsible::before,
        .e-icon-expandable::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' {
        .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;
          }
        }

        .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;
          }
        }
      }
      @if $skin-name == 'bootstrap4' {
        .e-icon-collapsible,
        .e-icon-expandable {
          margin: $treeview-big-rtl-icon-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-treeview {
    display: block;
    overflow: hidden;
    position: relative;
    white-space: nowrap;

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

    .e-ul {
      margin: 0;
      padding: $treeview-root-ul-padding;
    }

    li.e-node-collapsed .e-list-item .e-fullrow {
      display: none;
    }

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

    .e-list-item {

      &.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: 15px;
        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-drag-item {
      &.e-rtl {

        .e-icons.e-drop-next {
          transform: rotate(180deg);
        }
      }
    }

    &.e-rtl {

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

    .e-list-item {
      list-style: none;
      @if $skin-name != 'tailwind' and $skin-name != 'Material3' {
        padding: 2px 0;
      }

      .e-ul {
        margin: 2px 0 -2px;
        padding: $treeview-child-ul-padding;
        @if $skin-name == 'tailwind' {
          margin: 2px 0 0;
        }
        @else if $skin-name == 'Material3' {
          margin: 0;
        }
      }

      &.e-disable {

        > .e-text-content,
        > .e-fullrow {
          -ms-touch-action: none;
          filter: alpha(opacity=50);
          opacity: .5;
          pointer-events: none;
          touch-action: none;
        }
      }
    }

    .e-list-item .e-icons.e-icons-spinner::before {
      content: none;
    }

    .e-icons .e-spinner-pane {
      position: relative;
    }

    .e-icons .e-treeview-spinner {
      position: absolute;
    }

    .e-icons-spinner {
      position: relative;
    }

    .e-text-content {
      @include user-select;
      border: 1px solid;
      cursor: pointer;
      margin: 0;
      padding: $treeview-text-wrap-padding;

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

    .e-fullrow {
      @include user-select;
      border: 1px solid;
      box-sizing: border-box;
      cursor: pointer;
      height: $treeview-item-height;
      left: 0;
      overflow: hidden;
      position: absolute;
      width: 100%;
    }

    .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-height;
      margin: $treeview-text-margin;
      @if $skin-name != 'bootstrap4' {
        min-height: $treeview-text-height;
      }
      @else if $skin-name == 'bootstrap4' {
        min-height: 30px;
      }
      padding: $treeview-text-padding;
      text-decoration: none;
      vertical-align: middle;

      .e-input-group {
        height: $treeview-input-height;
        @if ($skin-name == 'FluentUI') {
          margin-top: 3px;
        }
        @else if($skin-name == 'tailwind') {
          margin-bottom: 3px;
        }
        @else if($skin-name == 'bootstrap5') {
          margin-bottom: 2px;
        }
        @else {
          margin-bottom: 0;
        }
        min-width: 150px;
        vertical-align: bottom;

        @if $skin-name != 'material' {
          .e-input {
            height: 28px;
          }
        }
      }
    }

    .e-list-icon,
    .e-list-img {
      display: inline-block;
      height: $treeview-image-size;
      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-icon-collapsible,
    .e-icon-expandable {
      display: inline-block;
      height: $treeview-icon-size;
      margin: $treeview-icon-margin;
      vertical-align: middle;
      width: $treeview-icon-size;
    }

    .e-icon-collapsible::before,
    .e-icon-expandable::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: 6px;
        margin-top: -5px;
        width: 6px;
      }
      position: absolute;
      z-index: 2;
    }

    .e-text-content + .e-sibling {
      @if ($skin-name == 'tailwind') {
        margin-top: -2px;
      }
      @else if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
        margin-top: 1px;
      }
      @else {
        margin-top: -1px;
      }
    }

    .e-sibling::before {
      @include sibling-before(ltr);
      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
        height: 2px;
        top: -1.5px;
      }
      @else {
        height: 1px;
        width: 144px;
      }
      position: absolute;
      z-index: 2;
    }

    .e-popup {
      @include user-select;
      font-weight: normal;
      position: absolute;
      z-index: 99999;

      .e-content {
        border-radius: 4px;
        border-style: solid;
        border-width: 1px;
        font-size: 14px;
        padding: 4px;
      }

      .e-icons {
        border: 1px solid transparent;
        cursor: pointer;
        display: inline-block;
        height: 26px;
        line-height: 18px;
        padding: 4px;
        width: 26px;
      }

      .e-downtail::before,
      .e-downtail::after {
        border: 10px solid transparent;
        content: '';
        height: 0;
        left: 8px;
        position: absolute;
        width: 0;
      }

      .e-downtail::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 {
        @if ($skin-name != 'Material3') {
          padding: 0;
        }
        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-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 == 'bootstrap5' or $skin-name == 'FluentUI') {
            padding: 0 $treeview-drag-icon-padding;
          }
        }
      }
      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
        .e-icon-collapsible,
        .e-icon-expandable {
          @if ($skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
            margin: $treeview-drag-icon-margin;
          }

          @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
            box-sizing: content-box;
            padding-left: $treeview-drag-icon-padding;
            @if ($skin-name == 'FluentUI') {
              padding-top: 8px;
            }
          }
        }
      }

      .e-icon-collapsible::before,
      .e-icon-expandable::before {
        font-size: $treeview-drag-icon-font-size;
        @if ($skin-name != 'bootstrap5' 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: 15px;
        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: normal;
          min-width: 12px;
          @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
            padding: 1px 3px 2px;
          }
          @else {
            padding: 3px 5px 4px;
          }
        }
        margin-left: -12px;
        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-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-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: -12px;
        }
      }
    }

    &.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 active-hover-theme {
  @if $theme-name =='fluentui-dark' {
    background-color: lighten($treeview-item-active-bg, 5%);
  }
  
  @else if $theme-name =='tailwind' {
    background-color: darken($treeview-item-active-hover-bg, 10%);
  }

  @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 {
  background-color: $treeview-item-border-color;
  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;
  }
}

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

    .e-list-text {
      font-size: $treeview-big-font-size;

      @if $skin-name == 'bootstrap4' {
        color: $treeview-big-text-color;
      }
    }

    .e-icon-collapsible::before,
    .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;
        }
      }

      .e-list-text {
        @if $skin-name == 'bootstrap4' {
          padding: $treeview-big-drag-text-padding;
        }
      }
    }
  }

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

    .e-icon-collapsible::before,
    .e-icon-expandable::before {
      font-size: $treeview-icon-font-size;
    }

    .e-list-item.e-active,
    .e-list-item.e-hover,
    .e-list-item.e-node-focus {
      background: transparent;
    }

    .e-list-item.e-hover > .e-text-content,
    .e-list-item.e-node-focus > .e-text-content {
      color: $treeview-text-hover-color;

      .e-list-text {
        color: $treeview-text-hover-color;
      }

      .e-icon-collapsible,
      .e-icon-expandable {
        color: $treeview-icon-hover-color;
      }
    }

    .e-list-item.e-active > .e-text-content {
      color: $treeview-text-active-color;

      .e-list-text {
        @include active-font-weight;
        color: $treeview-text-active-color;
      }

      .e-icon-collapsible,
      .e-icon-expandable {
        color: $treeview-icon-active-color;
      }

      .e-check {
        @if $skin-name == 'highcontrast' {
          background-color: $treeview-checkmark-bgcolor;
          border-color: $treeview-checkmark-border-color;
          color: $treeview-checkmark-color;
        }
        @else if $skin-name == 'bootstrap4' {
          background-color: $treeview-item-active-check-bg;
          border-color: $treeview-item-active-check-border-color;
          color: $treeview-item-active-check-color;
        }
        @else if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
          border-color: $content-text-color-selected;
        }
      }

      .e-stop {
        @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
          border-color: $content-text-color-selected;
        }
      }
    }

    .e-list-item.e-active.e-hover > .e-text-content,
    .e-list-item.e-active.e-node-focus > .e-text-content {
      color: $treeview-text-active-hover-color;

      .e-list-text {
        color: $treeview-text-active-hover-color;
      }

      .e-icon-collapsible,
      .e-icon-expandable {
        color: $treeview-icon-active-hover-color;
      }
    }

    .e-list-item.e-editing.e-active > .e-text-content,
    .e-list-item.e-editing.e-hover > .e-text-content,
    .e-list-item.e-editing.e-node-focus > .e-text-content {
      color: $treeview-text-color;

      .e-list-text {
        color: $treeview-text-color;

        .e-input {
          @include active-font-weight;
        }
      }

      .e-icon-collapsible,
      .e-icon-expandable {
        color: $treeview-icon-color;
      }
    }

    .e-list-item.e-hover > .e-fullrow,
    .e-list-item.e-node-focus > .e-fullrow {
      background-color: $treeview-item-hover-bg;
      border-color: $treeview-item-hover-border-color;
    }

    .e-list-item.e-active {
      & > .e-fullrow {
        background-color: $treeview-item-active-bg;
        border-color: $treeview-item-active-border-color;
      }

      &.e-animation-active > .e-fullrow {
        background-color: transparent;
        border-color: transparent;
      }

      &.e-animation-active > .e-text-content {
        color: $treeview-text-color;

        .e-list-text {
          color: $treeview-text-color;
        }
      }
    }

    .e-list-item.e-active.e-hover > .e-fullrow,
    .e-list-item.e-active.e-node-focus > .e-fullrow {
      @include active-hover-theme;
    }

    .e-list-item.e-editing.e-active > .e-fullrow,
    .e-list-item.e-editing.e-hover > .e-fullrow,
    .e-list-item.e-editing.e-node-focus > .e-fullrow {
      @include active-editing-theme;
    }

    .e-list-item.e-disable {

      > .e-text-content,
      > .e-fullrow {
        color: $treeview-text-disable-color;
        @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
          .e-list-text {
            color: $treeview-text-disable-color;
          }
        }
      }

      > .e-text-content > .e-icon-collapsible,
      > .e-text-content > .e-icon-expandable {
        color: $treeview-icon-disable-color;
      }
    }

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

    .e-sibling::before {
      background: $treeview-drag-line-color;
      @if $skin-name == 'bootstrap4' {
        border: 1px;
      }
    }

    .e-popup {

      .e-content {
        background-color: $treeview-popup-bg-color;
        border-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-text-content,
      .e-list-item.e-node-focus > .e-text-content {
        background-color: $treeview-item-hover-bg;
        border-color: $treeview-item-hover-border-color;
      }

      .e-list-item.e-active > .e-text-content {
        background-color: $treeview-item-active-bg;
        border-color: $treeview-item-active-border-color;
      }

      .e-list-item.e-active.e-hover > .e-text-content,
      .e-list-item.e-active.e-node-focus > .e-text-content {
        @include active-hover-theme;
      }

      .e-list-item.e-editing.e-active > .e-text-content,
      .e-list-item.e-editing.e-hover > .e-text-content,
      .e-list-item.e-editing.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::before,
      .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 {
        background-color: $treeview-drop-count-bg;
        border-color: $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-bootstrap5-icons') {

  /*! TreeView icons */
  .e-treeview {

    .e-list-item {

      div.e-icons::before {
        content: '\e75c';
      }
    }

    .e-sibling::before {
      content: '';
    }

    .e-popup {

      .e-icons::before {
        content: '\e76a';
      }
    }

    &.e-drag-item {

      .e-icons.e-drop-in::before {
        content: '\e768';
      }

      .e-icons.e-drop-out::before {
        content: '\e839';
      }

      .e-icons.e-drop-next::before {
        content: '\e736';
      }

      .e-icons.e-no-drop::before {
        content: '\e839';
      }
    }
  }
}

$sidebar-box-shadow: $shadow !default;

//color variables
$sidebar-background: $content-bg-color-alt1 !default;
$sidebar-border: $transparent !default;
$sidebar-overlay: $overlay-bg-color !default;

/* 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: 100%;
    overflow: auto;
    position: fixed;
    top: 0;
    transition: none;
    vertical-align: middle;
    visibility: hidden;
    will-change: transform;

    &.e-right.e-open {
      transform: translateX(0%);
      transition: transform .5s ease;
      visibility: visible;
    }

    &.e-right.e-close {
      box-shadow: none;
      transform: translateX(100%);
      transition: transform .5s ease, visibility 500ms;
      visibility: hidden;
    }

    &.e-left.e-open {
      transform: translateX(0%);
      transition: transform .5s ease;
      visibility: visible;
    }

    &.e-left.e-transition.e-close,
    &.e-right.e-transition.e-close {
      transition: transform .5s ease, visibility 500ms;
    }

    &.e-left.e-close {
      box-shadow: none;
      transform: translateX(-100%);
      visibility: hidden;
    }

    &.e-right.e-close {
      box-shadow: none;
      transform: translateX(100%);
      transition: transform .5s ease, visibility 500ms;
      visibility: hidden;
    }

    &.e-right {
      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
        border-left: 0 solid $sidebar-border;
      }
      @else {
        border-left: 1px solid $sidebar-border;
      }
      left: auto;
      right: 0;
      top: 0;
    }

    &.e-left {
      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
        border-right: 0 solid $sidebar-border;
      }
      @else {
        border-right: 1px solid $sidebar-border;
      }
      left: 0;
      right: auto;
      top: 0;
    }

    &.e-left.e-close.e-dock {
      transform: translateX(0%);
      transition: width .5s ease, visibility 500ms;
      visibility: visible;
    }

    &.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-sidebar-absolute {
    position: absolute;
  }

  .e-sidebar-context {
    overflow-x: hidden;
    position: relative;
  }

  .e-backdrop {
    background-color: $sidebar-overlay;
    height: 100%;
    left: 0;
    @if ($skin-name != 'tailwind' and  $skin-name != 'bootstrap5' and  $skin-name != 'FluentUI' and $skin-name != 'Material3') {
      opacity: .5;
    }
    pointer-events: auto;
    top: 0;
    width: auto;
    z-index: 999;
  }

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

  /* stylelint-disable */
  .e-sidebar-overflow {
        overflow-x: hidden !important;
    }
  /* stylelint-enable */

  .e-sidebar-overlay {
    background-color: $sidebar-overlay;
    height: 100%;
    left: 0;
    @if ($skin-name != 'tailwind' and  $skin-name != 'bootstrap5' and  $skin-name != 'FluentUI') {
      opacity: .5;
    }
    pointer-events: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
  }

  .e-content-placeholder.e-sidebar.e-placeholder-sidebar {
    left: 0;
    position: fixed;
    right: auto;
    top: 0;
    visibility: visible;
  }
}

//layout variables
$menu-bigger-caret-font-size: $cmenu-bigger-caret-font-size !default;
$menu-bigger-caret-li-padding: 32px !default;
$menu-bigger-caret-right: 12px !default;
$menu-bigger-font-size: $text-base !default;
$menu-bigger-li-height: 38px !default;
$menu-bigger-li-icon-height: 40px !default;
$menu-bigger-li-padding: 0 16px !default;
$menu-bigger-li-text-indent: 15px !default;
$menu-bigger-li-right-padding: 12px !default;
$menu-bigger-icon-margin-right: 12px !default;
$menu-icon-width: 1em !default;
$menu-blank-icon: 34px !default;
$menu-blank-icon-bigger: 41px !default;
$menu-caret-font-size: $text-sm !default;
$menu-caret-icon: '\e706' !default;
$menu-caret-icon-rtl: '\e70f' !default;
$menu-caret-right: 8px !default;
$menu-caret-li-padding: 26px !default;
$menu-ul-padding: 0 !default;
$menu-separator-bigger-padding: 0 !default;
$menu-ul-bigger-header-padding: 0 !default;
$menu-caret-padding-left: 8px !default;
$menu-disable-opacity: .65 !default;
$menu-font-size: $text-sm !default;
$menu-icon-margin-right: 8px !default;
$menu-li-hover-outline-offset: 0 !default;
$menu-li-border-style: solid !default;
$menu-li-border-width: 1px !default;
$menu-li-height: 32px !default;
$menu-li-padding: 0 12px !default;
$menu-li-text-indent: 12px !default;
$menu-li-right-padding: 12px !default;
$menu-separator-padding: 0 !default;
$menu-icon-font-size: $text-lg !default;
$menu-icon-bigger-font-size: 22px !default;
$menu-li-selected-outline-offset: 0 !default;
$menu-hscroll-nav-size: 28px !default;
$menu-vscroll-nav-size: 28px !default;
$menu-scroll-nav-icon-size: 16px !default;
$menu-bigger-hscroll-nav-size: 40px !default;
$menu-bigger-vscroll-nav-size: 32px !default;
$menu-bigger-scroll-nav-icon-size: 18px !default;
$menu-header-icon-padding: 0 16px !default;
$menu-icon-li-height: 35px !default;
$menu-li-bgcolor: $content-bg-color-alt3 !default;
$menu-li-border-color: $border-light !default;
$menu-li-selection-bgcolor: $content-bg-color-alt3 !default;
$menu-li-selected-outline: 0 solid $menu-li-selection-bgcolor !default;
$menu-li-selection-font-color: $content-text-color !default;
$menu-ul-header-padding: $menu-ul-padding !default;
$menu-color: $content-text-color !default;
$menu-seperator-border-color: $border-light !default;
$menu-selected-color: $content-text-color !default;
$menu-sub-ul-bgcolor: $content-bg-color-alt2 !default;
$menu-sub-li-border-color: $border-light !default;
$menu-ul-bgcolor: $content-bg-color-alt1 !default;
$menu-ul-border: none !default;
$menu-li-hover-outline: 0 solid $menu-li-border-color !default;
$menu-srollbar-ul-border: none !default;
$submenu-caret-font-size: $menu-caret-font-size !default;
$submenu-bigger-caret-font-size: $text-base !default;
$submenu-color: $content-text-color !default;
$menu-icon-color: $icon-color !default;
$menu-icon-hover-color: $content-text-color !default;
$menu-icon-focussed-color: $cmenu-caret-color !default;
$menu-caret-color: $cmenu-caret-color !default;


@include export-module('menu-layout') {
  
  /*! menu layout */
  .e-menu-wrapper,
  .e-menu-container {
    border: $menu-ul-border;
    border-radius: $cmenu-ul-border-radius;
    display: inline-block;
    line-height: 0;

    & .e-menu-vscroll {
      height: inherit;
    }

    @at-root {
      & ul {
        @include ul-layout;
        font-size: $menu-font-size;
        padding: $menu-ul-padding;
        text-align: left;
        white-space: nowrap;

        &.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-height;
          padding: $menu-li-padding;
          vertical-align: top;
          white-space: nowrap;

          & .e-menu-icon {
            font-size: $menu-icon-font-size;
            height: auto;
            line-height: $menu-li-height;
            margin-right: $menu-icon-margin-right;
            text-align: center;
            margin-bottom: 4px;
          }

          & .e-caret {
            font-size: $menu-caret-font-size;
            height: auto;
            @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' {
              line-height: $menu-icon-li-height;
            }
            @else {
              line-height: $menu-li-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;
          }
        }
      }

      & .e-ul {
        @include ul-size;
        min-width: $cmenu-min-width;

        & .e-menu-item {
          @include li-size;
          display: list-item;

          & .e-caret {
            font-size: $submenu-caret-font-size;
          }
        }
      }
    }

    &.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: $font-family;
      font-size: $menu-icon-font-size;
      font-weight: $font-weight;
      height: $menu-li-height;
      line-height: $menu-li-height;
      text-align: left;
      white-space: nowrap;

      & .e-menu-title,
      & .e-menu-icon {
        display: inline-block;
        line-height: inherit;
      }

      & .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: 4px $menu-hscroll-nav-size;
      }
      @else {
        padding: 0 $menu-hscroll-nav-size;
      }

      & .e-scroll-nav {
        width: $menu-hscroll-nav-size;

        &:focus,
        &:hover {
          border: 0;
        }

        &.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 {
        transform: rotate(180deg);
      }

      &.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-size 0;
      }

      &.e-scroll-device {
        & .e-scroll-nav.e-scroll-down-nav {
          transform: none;
          width: 100%;

          & .e-nav-down-arrow {
            transform: none;
          }
        }
      }

      & .e-vscroll-bar {
        height: 100%;
        width: inherit;

        & .e-vscroll-content {
          width: inherit;
        }
      }

      & .e-scroll-nav {
        height: $menu-vscroll-nav-size;
      }
    }

    &.e-scrollable {
      display: block;

      & .e-menu {
        display: block;
        overflow: auto;
      }
    }

    &.e-contextmenu-container {
      height: 1px;

      .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-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-item {
      height: $menu-bigger-li-height;
      line-height: $menu-bigger-li-height;
      padding: $menu-bigger-li-padding;

      & .e-menu-icon {
        font-size: $menu-icon-bigger-font-size;
        line-height: $menu-bigger-li-height;
        margin-right: $menu-bigger-icon-margin-right;
      }

      &.e-menu-caret-icon {
        padding-right: $menu-bigger-caret-li-padding;
      }

      & .e-caret {
        font-size: $menu-bigger-caret-font-size;
        @if $skin-name == 'bootstrap5' {
          line-height: $menu-bigger-li-icon-height;
        }
        @else {
          line-height: $menu-bigger-li-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 {
            @include separator-bigger-size;
          }
        }
      }
    }

    &.e-ul {
      @include bigger-ul-size;
      max-width: $cmenu-bigger-max-width;
      min-width: $cmenu-bigger-min-width;

      & .e-menu-item  {
        @include bigger-li-size;
        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: 0 $menu-bigger-hscroll-nav-size;

      & .e-scroll-nav {
        width: $menu-bigger-hscroll-nav-size;
      }
    }

    & .e-menu-vscroll.e-vscroll {
      &:not(.e-scroll-device) {
        padding: $menu-bigger-vscroll-nav-size 0;
      }

      & .e-scroll-nav {
        height: $menu-bigger-vscroll-nav-size;
      }
    }

    &.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: 0;
      }

      & .e-caret {
        left: $menu-bigger-caret-right;
        margin-left: 0;
        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;
          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-menu-wrapper.e-hamburger,
  .e-menu-container.e-hamburger {
    border: 0;
    display: block;
    position: relative;

    & .e-menu-header:not(.e-vertical) {
      border: $menu-ul-border;
      display: block;
    }

    & .e-popup.e-menu-popup {
      border: 0;
      border-radius: 0;
      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: 0;
          }

          &.e-blankicon {
            text-indent: $menu-li-text-indent + $menu-icon-font-size + $menu-icon-margin-right;
          }

          & .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: 0;
        display: block;
        padding: 0;
        position: absolute;
      }

      &.e-ul {
        font-size: $menu-font-size;
        padding: 0;

        & .e-menu-item {
          line-height: $menu-li-height;
          text-indent: inherit;

          &.e-blankicon {
            padding: 0;
            text-indent: inherit;
          }

          & .e-caret {
            font-size: $menu-caret-font-size;
            right: $menu-caret-right;
          }
        }
      }

      & .e-menu-item {
        display: list-item;
        height: auto;
        padding: 0;

        &.e-menu-caret-icon {
          padding: 0;
        }

        & .e-menu-url {
          display: inline-block;
          min-width: 120px;
          text-indent: 0;
          width: 100%;
        }

        &.e-blankicon {
          padding: 0;
        }

        &.e-separator {
          @include separator-size;
        }
      }
    }
  }

  .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: 0;
        padding-right: 0;
      }

      & .e-menu-icon {
        margin-left: 0;
        text-indent: inherit;
      }

      & .e-caret {
        left: $menu-caret-right;
        right: auto;
      }
    }
  }

  .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: auto;
        line-height: $menu-bigger-li-height;
        padding: 0;
      }
    }
  }

  .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-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-caret {
            font-size: $menu-bigger-caret-font-size;
            right: $menu-bigger-caret-right;
          }
        }
      }
    }
  }

  .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: 0;
        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: 0;
          text-indent: inherit;
        }

        &.e-menu-caret-icon {
          padding-left: 0;
          padding-right: 0;
        }

        & .e-caret {
          left: $menu-caret-right;
          right: auto;
        }
      }

      & .e-ul {
        & .e-menu-item {
          text-indent: inherit;
        }
      }
    }
  }

  .e-menu-container .e-vscroll ul {
    position: relative;
  }
}



@include export-module('menu-theme') {

  /*! 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;
          }

          &.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: 2px;
              }
            }
          }

          &.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: 2px;
            }

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

        @include disabled-color;
      }

      & .e-ul {
        background: inherit;
        color: $submenu-color;

        & .e-menu-item {
          @if $skin-name == 'bootstrap4' {
            & .e-caret {
              color: $submenu-color;
            }

            & .e-menu-icon {
              color: $submenu-color;
            }
          }
          @else if $skin-name == 'FluentUI' {
            & .e-caret {
              color: $menu-icon-color;
            }

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

          &.e-selected,
          &.e-active-item {
            @if $skin-name == 'bootstrap4' {
              & .e-caret {
                color: $menu-icon-focussed-color;
              }

              & .e-menu-icon {
                color: $menu-icon-focussed-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;
          }
        }
      }
    }

    &.e-menu-popup {
      background: $cmenu-ul-bgcolor;

      &.e-sfcontextmenu .e-menu-vscroll {
        background: inherit;
      }
    }

    & .e-menu-hscroll.e-hscroll .e-scroll-nav {
      background: $menu-ul-bgcolor;

      & .e-nav-arrow.e-icons {
        color: $cmenu-caret-color;
      }

      &:hover {
        @if $skin-name == 'bootstrap4' {
          background: darken($gray-600, 7.5%);
          border: 1px inset darken($gray-600, 10%);

          & .e-icons {
            color: $menu-icon-focussed-color;
          }
        }
        @else if $skin-name == 'Material3' {
          border-radius: 2px;
        }
        @else {
          background: $menu-li-bgcolor;
        }
      }

      &:focus {
        @if $skin-name == 'bootstrap4' {
          background: darken($gray-600, 7.5%);
          border-color: darken($gray-600, 10%);

          & .e-icons {
            color: $menu-icon-focussed-color;
          }
        }
        @else {
          background: $menu-li-bgcolor;
        }
      }

      &:active {
        @if $skin-name == 'bootstrap4' {
          background: darken($gray-600, 7.5%);
          border: 1px inset darken($gray-600, 10%);
        }
        @else {
          background: $menu-li-bgcolor;
        }
      }
    }

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

      &:active {
        background: $cmenu-li-selection-bgcolor;
      }
    }

    &.e-inherit {
      border: 0;

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


@include export-module('menu-bootstrap5-icons') {

  /*! menu layout */
  .e-menu-wrapper,
  .e-menu-container {
    @at-root {
      & ul {
        &.e-vertical .e-menu-item {
          & .e-caret {
            &::before {
              content: '\e748';
            }
          }
        }

        & .e-menu-item  {
          & .e-caret {
            &::before {
              content: '\e729';
            }
          }
        }
      }

      & .e-ul .e-menu-item {
        & .e-caret {
          &::before {
            content: '\e748';
          }
        }
      }
    }

    &.e-hamburger {

      & .e-menu-header {

        & .e-menu-icon::before {
          content: '\e799';
        }
      }

      &.e-close-icon {
        & .e-menu-header {

          & .e-menu-icon::before {
            content: '\e7e7';
          }
        }
      }

      & .e-vertical .e-menu-item .e-caret,
      & .e-menu-item .e-caret {
        &::before {
          content: '\e729';
        }
      }
    }

    &.e-rtl.e-hamburger ul {
      &.e-ul {
        & .e-caret {
          &::before {
            content: '\e729';
          }
        }
      }
    }

    & .e-menu-hscroll.e-hscroll .e-nav-left-arrow::before,
    & .e-menu-hscroll.e-hscroll .e-nav-right-arrow::before {
      content: '\e748';
    }

    & .e-menu-vscroll.e-vscroll .e-nav-up-arrow::before,
    & .e-menu-vscroll.e-vscroll .e-nav-down-arrow::before {
      content: '\e729';
    }
  }

  .e-rtl.e-menu-wrapper ul,
  .e-rtl.e-menu-container ul {
    &.e-vertical {
      & .e-caret {
        &::before {
          content: '\e765';
        }
      }
    }

    &.e-ul {
      & .e-caret {
        &::before {
          content: '\e765';
        }
      }
    }
  }

  .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-caret {
        &::before {
          content: '\e765';
        }
      }
    }

    &.e-ul {
      & .e-caret {
        &::before {
          content: '\e765';
        }
      }
    }
  }

  .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: '\e729';
        }
      }
    }
  }
}



$pager-numericitem-border-radius: 0 !default;
$pager-border-type: solid !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: 0 !default;
$pager-bigger-messagebar-padding-bottom: 8px !default;
$pager-content-opacity: 1 !default;
$pager-bigger-new-container-rtl-margin: 0 0 -5px 0 !default;
$pager-next-icon-margin-left: 0 !default;
$pager-container-rtl-margin: 0 .3px -4px 0 !default;
$pager-rtl-navigation-icon-padding: 14px 12px 12px 11.5px !default;
$pager-rtl-numeric-margin: 0 !default;
$pager-item-hover-borders-width: 0 !default;
$pager-tripledot-font-size: 14px !default;
$pager-last-page-hover-border-radius:  0 3px 3px 0 !default;
$pager-first-page-hover-border-radius: 3px 0 0 3px !default;
$pager-rtl-parentmsgbar-margin-left: 6px !default;
$pager-rtl-parentmsgbar-padding-top: 8px !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: 7px 8px 7px 8px !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: $content-bg-color !default;
$pager-border-color: $border-light !default;
$pager-color: $content-text-color-alt2 !default;
$pager-icon-size: 9px !default;
$pager-border-size: 1px !default;
$pager-numericitem-padding: 13px 12px 10px 12px !default;
$pager-numeric-hover-bg-color: $content-bg-color-hover !default;
$pager-numeric-txt-bg-color: $icon-color-disabled !default;
$pager-padding: 7px 8px 7px 8px !default;
$pager-numeric-font-weight: bold !default;
$pager-messagebar-padding-top: 8px !default;
$pager-number-hover-bg-color: $content-bg-color-hover !default;
$pager-font-family: $font-family !default;
$pager-font-weight: bold !default;
$pager-messagebar-padding-right: 0 !default;
$pager-tripledot-padding: 10.4px 10.5px 11.4px 10.5px !default;
$pager-numeric-icon-padding: 10px 12.5px 11.5px 12.5px !default;
$pager-pagecontainer-icon-padding: 14.2px 12.2px 12.7px 11.5px !default;
$pager-bigger-pagecontainer-icon-padding: 16px 14px 14px 14px !default;
$pager-hover-color: $primary !default;
$pager-mhover-color: $primary !default;
$pager-pagermessage-weight: $font-weight-normal !default;
$pager-active-bg-color: $content-bg-color-hover !default;
$pager-last-border-size: 1px !default;
$page-content-color: $primary !default;
$pager-container-margin: 0 0 -4px .3px !default;
$pager-bigger-numeric-item-margin: 0 !default;
$pager-bigger-icon-font-size: 11px !default;
$pager-bigger-font-size: 16px !default;
$pager-bigger-padding: 7px 8px 7px 8px !default;
$pager-bigger-pagercontainer-margin: 0 0 -6px .8px !default;
$pager-bigger-pagercontainer-icons-padding: 16px 14px 14px 14px !default;
$pager-bigger-pagercontainer-icons-marign-right: 0 !default;
$pager-bigger-current-item-padding: 12px 15px 13px 15px !default;
$pager-letter-spacing: 0 !default;
$pager-bigger-icons-align: middle !default;
$pager-bigger-messagebar-padding-right: 0 !default;
$pager-bigger-messagebar-padding-top: 10px !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: $primary !default;
$pager-hover-bg-color: $content-bg-color-hover !default;
$pager-dropdown-margin-top: -24px !default;
$pager-dropdown-margin-left: 10px !default;
$pager-dropdown-margin-right: 8px !default;
$pager-dropdown-overflow: unset !default;
$pager-bigger-dropdown-constant-margin: 6px !default;
$pager-bigger-dropdown-margin: 0 10px 0 18px !default;
$pager-dropdown-height: 32px !default;
$pager-dropdown-width: 90px !default;
$pager-bigger-dropdown-width: 90px !default;
$pager-constant-margin: 0 0 6px 8px !default;
$pager-bigger-letter-spacing: 14px 14px 13px 14px !default;
$pager-tripledot-rtl-margin-top: 0 !default;
$pager-tripledot-rtl-padding: 10px 10.5px 11px 10.5px !default;
$pager-rtl-pagerconstant-margin-top: 0 8px 6px 0 !default;
$pager-rtl-pagerdropdown-margin: -24px 16px 0 0 !default;
$pager-tripledot-rtl-bigger-margin-top: 0 !default;
$pager-bigger-rtl-numeric-margin: 0 !default;
$pager-bigger-container-rtl-margin: 0 0 -4px 0 !default;
$pager-activeitem-padding: 10.4px 12.5px 11px 12.5px !default;
$pager-bigger-activeitem-padding: 12px 15px 13px !default;
$pager-rtl-pagerdropdown-bigger-margin: -26px 16px 0 0 !default;
$pager-rtl-pagerconstant-bigger-margin-top: 0 16px 7px 0 !default;
$pager-bigger-rtl-parentmsgbar-margin-top: 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: 10px !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: 10.4px 12.5px 11.6px 12.5px !default;
$pager-bigger-rtl-activeitem-hover-padding:  12px 15px 13px !default;
$pager-activeitem-hover-padding: $pager-activeitem-padding !default;
$pager-bigger-dropdown-margin-top: -24px !default;
$pager-rtl-nxtpage-margin: 0 !default;
$pager-disabled-icons-opacity: 1 !default;
$pager-current-item-font-weight: $font-weight-normal !default;
$pager-bigger-dropdown-heigh: 38px !default;
$pager-external-msg-padding: 6px 6px 0 6px !default;
$pager-rtl-bigger-tripledot-font-size: 14px !default;
$pager-bigger-tripledot-padding: 13px 14px 11px 14px !default;
$pager-container-children-height: 31px !default;
$pager-div-chrome-margin-top: -.5px !default;
$pager-div-margin-top: -.3px !default;
$pager-container-height: 32px !default;
$pager-first-disabled-border-radious: 3px 0 0 3px !default;
$pager-last-disabled-border-radious: 0 3px 3px 0 !default;
$pager-bigger-container-height: 38px !default;
$pager-bigger-container-children-height: 37px !default;
$pager-bigger-container-margin-left: -.9px !default;
$pager-bigger-container-margin-right: -.9px !default;
$pager-rtl-padding: $pager-padding !default;
$pager-skin: 'bootstrap5' !default;
$pager-container-border-radius: 4px !default;
$pager-bigger-tripledot-font-size: $pager-tripledot-font-size !default;
$pager-active-border: 2px !default;
$pager-active-size: solid !default;
$pager-active-color: $primary !default;
$pager-numeric-icon-padding-with-margin: 7px 10px 7px 10px !default;
$pager-focus-bg-color: $table-bg-color-hover !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 $primary inset !default;
$pager-focus-shadow: 0 0 0 1px $primary inset !default;

@include export-module('pager-layout') {
  
  /*! Pager layout */
  .e-bigger  #{&}.e-pager,
  #{&}.e-pager.e-bigger {
    font-size: $pager-bigger-font-size;
    padding: $pager-bigger-padding;

    div.e-icons {
      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' {
        line-height: 22px;
      }
    }

    .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 .e-firstpage,
    .e-pagercontainer .e-prevpage,
    .e-pagercontainer .e-firstpagedisabled,
    .e-pagercontainer .e-prevpagedisabled,
    .e-pagercontainer .e-nextpage,
    .e-pagercontainer .e-lastpage,
    .e-pagercontainer .e-nextpagedisabled,
    .e-pagercontainer .e-lastpagedisabled {
      padding: $pager-bigger-pagecontainer-icon-padding;
    }

    &.e-rtl .e-pagercontainer .e-next.e-icons.e-icon-next.e-nextpage.e-pager-default.e-focused {
      @if $pager-skin == 'tailwind' {
        padding: 10px 11px 9px;
      }
    }

    &.e-rtl .e-pagercontainer .e-prevpage.e-focused {
      @if $pager-skin == 'tailwind' {
        padding: 10px 11px 9px 10px;
      }
    }

    &.e-rtl .e-pagercontainer .e-firstpage.e-focused {
      @if $pager-skin == 'tailwind' {
        padding: 10px 10px 9px;
      }
    }

    &.e-rtl .e-pagercontainer .e-lastpage.e-focused {
      @if $pager-skin == 'tailwind' {
        padding: 10px 10px 9px;
      }
    }

    .e-pagerconstant {
      margin-bottom: $pager-bigger-dropdown-constant-margin;
      margin-left: $pager-bigger-constant-margin-left;
      @if $pager-skin == 'tailwind' {
        line-height: 22px;
      }
    }

    .e-pagercontainer {
      margin: $pager-bigger-pagercontainer-margin;
    }

    &.e-rtl .e-pagercontainer {
      margin: $pager-bigger-new-container-rtl-margin;
    }

    @media (max-width: 769px) {
      padding: $pager-device-padding;

      &.e-rtl div.e-parentmsgbar {
        margin-right: 0;
      }

      div.e-parentmsgbar {
        padding: $pager-device-messabar-padding;
        @if $pager-skin == 'material3' {
          vertical-align: top;
          margin-top: 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: $pager-bigger-nexticon-marign-left;
    }

    &.e-rtl .e-next.e-icons.e-icon-next.e-nextpagedisabled.e-disable,
    &.e-rtl e-next.e-icons.e-icon-next.e-nextpage.e-pager-default {
      margin-left: 0;
      margin-right: $pager-bigger-rtl-nexticon-marign-right;
    }

    &.e-rtl div.e-parentmsgbar {
      margin-left: $pager-bigger-rtl-parentmsgbar-margin-left;
      margin-top: $pager-bigger-rtl-parentmsgbar-margin-top;
    }

    .e-numericitem {
      margin: $pager-bigger-numeric-item-margin;
      @if $pager-skin == 'tailwind' {
        line-height: 22px;
      }
    }

    .e-numericitem.e-currentitem {
      @if $pager-skin == 'tailwind' {
        padding: 6px 14px 5.5px 13px;
      }
      @else if $pager-skin == 'bootstrap5' {
        padding: 9px 13px 10px 12px;
      }
    }

    .e-numericitem.e-currentitem:hover {
      @if $pager-skin == 'tailwind' {
        padding: 6px 14px 5.5px 13px;
      }
      @else if $pager-skin == 'bootstrap5' {
        padding: 9px 13px 10px 12px;
      }
    }

    &.e-rtl .e-numericitem.e-currentitem {
      @if $pager-skin == 'tailwind' {
        padding: 6px 14px 6px 13px;
      }
      @else if $pager-skin == 'bootstrap5' {
        padding: 9px 13px 10px 12px;
      }
      @else if $pager-skin == 'material3' {
        padding: 10px 15px;
      }
    }

    &.e-rtl .e-numericitem.e-currentitem:hover {
      @if $pager-skin == 'tailwind' {
        padding: 6px 14px 6px 13px;
      }
      @else if $pager-skin == 'bootstrap5' {
        padding: 9px 13px 10px 12px;
      }
      @else if $pager-skin == 'material3' {
        padding: 10px 15px;
      }
    }

    .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: 11px 12px 10.5px 11.5px;
      }
    }

    &.e-rtl .e-np.e-spacing.e-focused,
    &.e-rtl .e-pp.e-spacing.e-focused {
      @if $pager-skin == 'tailwind' {
        padding: 13px 13px 11px 12px;
      }
    }

    .e-spacing,
    .e-numericitem:hover,
    .e-currentitem {
      border-radius: $pager-bigger-current-item-border-radius;
      padding: $pager-bigger-current-item-padding;
    }

    &.e-rtl {
      & .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-spacing,
      .e-numericitem:hover,
      .e-currentitem {
        @if $pager-skin == 'material3' {
          padding: $pager-bigger-current-item-padding;
        }
      }

      & .e-pagerdropdown {
        margin: $pager-rtl-pagerdropdown-bigger-margin;
      }

      & .e-pagerconstant {
        margin: $pager-rtl-pagerconstant-bigger-margin-top;
      }
    }

    .e-pagercontainer .e-firstpage,
    .e-pagercontainer .e-prevpage,
    .e-pagercontainer .e-firstpagedisabled,
    .e-pagercontainer .e-prevpagedisabled,
    .e-pagercontainer .e-nextpage,
    .e-pagercontainer .e-lastpage,
    .e-pagercontainer .e-nextpagedisabled,
    .e-pagercontainer .e-lastpagedisabled {
      margin-right: $pager-bigger-pagercontainer-icons-marign-right;
      @if $pager-skin == 'tailwind' {
        margin-top: -4px;
      }
      padding: $pager-bigger-pagercontainer-icons-padding;
    }

    .e-pagercontainer .e-next.e-icons.e-icon-next.e-nextpage.e-pager-default.e-focused {
      @if $pager-skin == 'tailwind' {
        padding: 10px 11px 9px 10px;
      }
    }

    .e-pagercontainer .e-prevpage.e-focused {
      @if $pager-skin == 'tailwind' {
        padding: 10px 11px 9px 10px;
      }
    }

    .e-pagercontainer .e-firstpage.e-focused {
      @if $pager-skin == 'tailwind' {
        padding: 10px 11px 9px 10px;
      }
    }

    .e-pagercontainer .e-lastpage.e-focused {
      @if $pager-skin == 'tailwind' {
        padding: 10px 10px 9px;
      }
    }

    .e-pp,
    .e-np,
    .e-pp:hover,
    .e-np:hover {
      font-size: $pager-bigger-tripledot-font-size;
    }
  }

  .e-bigger .e-responsive  #{&}.e-pager,
  .e-responsive #{&}.e-pager.e-bigger {
    div.e-icons {
      @if $pager-skin == 'material3' {
        border-radius: 4px;
      }
    }
  }

  #{&}.e-pager {
    border-style: $pager-border-type;
    border-width: 1px;
    display: inline-block;
    font-size: $pager-font-size;
    padding: $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;
      padding-bottom: $pager-messagebar-padding-bottom;
      padding-right: $pager-messagebar-padding-right;
      padding-top: $pager-messagebar-padding-top;
      @if $pager-skin == 'tailwind' {
        line-height: 18px;
      }
    }

    .e-pagesizes {
      display: inline;
    }

    .e-pagerdropdown {
      display: inline-block;
      height: $pager-dropdown-height;
      margin-left: $pager-dropdown-margin-left;
      margin-right: $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;
      }
      margin: $pager-constant-margin;
      overflow: hidden;
      width: auto;
    }

    .e-icons {
      font-size: $pager-icon-size;
    }

    .e-numericitem {
      border-right-style: $pager-border-type;
      border-right-width: $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-numericitem.e-currentitem {
      @if $pager-skin == 'tailwind' {
        border: 1px solid $primary;
        padding: 3.5px 11px 6px 10px;
      }
      @else if $pager-skin == 'bootstrap5' {
        padding: 7.4px 10.5px 8.4px 9.5px;
      }
    }

    .e-numericitem.e-currentitem:hover {
      @if $pager-skin == 'tailwind' {
        padding: 3.5px 11px 6px 10px;
      }
      @else if $pager-skin == 'bootstrap5' {
        padding: 7.4px 10.5px 8.4px 9.5px;
      }
    }

    &.e-rtl .e-numericitem.e-currentitem {
      @if $pager-skin == 'tailwind' {
        border-left-color: $primary;
        border-left-style: solid;
        border-left-width: 1px;
        padding: 3.5px 11px 4px 10px;
      }
      @else if $pager-skin == 'bootstrap5' {
        border-left-color: $primary-light;
        border-left-style: solid;
        border-left-width: 3px;
        padding: 7px 10.5px 8px 9.5px;
      }
    }

    &.e-rtl .e-numericitem.e-currentitem:hover {
      @if $pager-skin == 'tailwind' {
        padding: 3.5px 11px 4px 10px;
      }
      @else if $pager-skin == 'bootstrap5' {
        padding: 7px 10.5px 8px 9.5px;
      }
    }

    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: 4px;
      }
      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-pagercontainer .e-prevpage,
    .e-pagercontainer .e-firstpagedisabled,
    .e-pagercontainer .e-prevpagedisabled,
    .e-pagercontainer .e-nextpage,
    .e-pagercontainer .e-lastpage,
    .e-pagercontainer .e-nextpagedisabled,
    .e-pagercontainer .e-lastpagedisabled {
      border-right-style: $pager-border-type;
      border-right-width: $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.9px 7px 8px;
        }
      }
      @else if $pager-skin == 'material3' {
        vertical-align: middle;
        &.e-focused {
          border-radius: 4px;
        }
      }
    }

    .e-pagercontainer .e-nextpage.e-focused {
      @if $pager-skin == 'tailwind' {
        padding-right: 8px;
      }
    }

    .e-pagercontainer .e-prevpage.e-focused {
      @if $pager-skin == 'tailwind' {
        padding-left: 7px;
        padding-right: 8px;
      }
    }

    .e-pagercontainer .e-firstpage.e-focused {
      @if $pager-skin == 'tailwind' {
        padding-right: 8px;
      }
    }

    .e-pagercontainer .e-lastpage,
    .e-pagercontainer .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;
      margin-left: $pager-border-size;
      margin-right: $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;
      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 {
      font-size: $pager-tripledot-font-size;
      font-weight: $pager-numeric-font-weight;
      letter-spacing: $pager-letter-spacing;
      padding: $pager-tripledot-padding;
    }

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

    @media (max-width: 769px) {
      padding: 13px 0;

      div.e-parentmsgbar {
        box-sizing: border-box;
        display: inline-block;
        float: initial;
        padding-bottom: 0;
        padding-right: 0;
        padding-top: 0;
        text-align: center;
        width: calc(60% - 48px);
      }

      .e-pagesizes {
        display: none;
      }

      .e-pagecountmsg {
        display: none;
      }

      .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;
        text-align: right;
        width: calc(10% + 11px);
      }

      .e-mprev {
        margin: 0 4px;
        text-align: right;
        width: 10%;
      }

      .e-mnext {
        margin: 0 4px;
        text-align: left;
        width: 10%;
      }

      .e-mlast {
        margin-left: 4px;
        text-align: left;
        width: calc(10% + 11px);
      }
    }

    &.e-rtl {
      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 {
        margin-left: 0;
        margin-right: $pager-rtl-nxtpage-margin;
        @if $pager-skin == 'tailwind' or $pager-skin == 'bootstrap5' {
          border-left-style: solid;
          border-left-width: 1px;
          border-right-style: solid;
          border-right-width: 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 {
        @if $pager-skin == 'tailwind' {
          padding: 6.5px 7px 6px;
        }
      }

      & .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' {
          border-left-style: none;
          border-left-width: 0;
        }
        @else {
          border-left-style: $pager-border-type;
          border-left-width: $pager-border-size;
        }
      }

      & .e-nextpage,
      & .e-nextpagedisabled,
      & .e-prevpage,
      & .e-prevpagedisabled {
        @if $pager-skin == 'tailwind' or $pager-skin == 'bootstrap5' {
          border-left-style: none;
          border-left-width: 0;
        }
        @else {
          border-right-style: none;
          border-right-width: 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 {
            border-left-style: none;
            border-left-width: 0;
            border-right-style: solid;
            border-right-width: 1px;
          }
        }
        @else {
          border-left-style: $pager-border-type;
          border-left-width: $pager-border-size;
          border-right-style: none;
          border-right-width: 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 {
        margin-left: 0;
        margin-right: $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;
        }
      }

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

        .e-parentmsgbar {
          float: right;
        }
      }
    }

    &.sf-pager {
      .e-pagercontainer .e-first,
      .e-pagercontainer .e-prev,
      .e-pagercontainer .e-next,
      .e-pagercontainer .e-last {
        font-size: $pager-icon-size;
      }
    }

    &.sf-pager {
      .e-numericcontainer a {
        font-size: $pager-font-size;
      }
    }

    &.sf-pager {
      .e-pagercontainer {
        font-size: 0;
      }
    }

    &.sf-pager {
      .e-link,
      .e-next.e-icons.e-icon-next.e-nextpage.e-pager-default {
        margin-left: 0;
      }
    }
  }
}


@include export-module('pager-theme') {

  /*! Pager theme */
  #{&}.e-pager {
    background-color: $pager-bg-color;
    @if $pager-skin == 'material3' {
      border-color: rgba($border-light);
    }
    @else {
      border-color: $pager-border-color;
    }
    color: $pager-color;
    opacity: $pager-content-opacity;

    div.e-icons.e-pager-default {
      color: $pager-icon-color;
    }

    div.e-icons.e-disable {
      color: $pager-numeric-txt-bg-color;
    }

    .e-pager-default:hover {
      background: $pager-hover-bg-color;
      color: $pager-hover-color;
      opacity: $pager-content-opacity;
      @if $pager-skin == 'material3' {
        border-radius: 4px;
      }
    }

    .e-parentmsgbar {
      font-weight: $pager-pagermessage-weight;
    }

    .e-spacing {
      color: $page-content-color;
      opacity: $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 {
      color: $pager-hover-color;
      opacity: $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;
      border-right-color: $pager-border-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-lastpage,
    .e-firstpage {
      background-color: transparent;
    }

    .e-pagercontainer {
      background-color: $pager-bg-color;
      border-color: $pager-border-color;
    }

    .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: 4px;
      }
      background: $pager-active-bg-color;
      color: $pager-active-color;
      opacity: 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 {
        background: $pager-bg-color;
        color: $pager-mhover-color;
        opacity: $pager-content-opacity;
      }
    }

    &.e-rtl {

      & .e-numericitem {
        border-left-color: $pager-border-color;
      }

      & .e-firstpage,
      & .e-prevpage,
      & .e-firstpagedisabled,
      & .e-prevpagedisabled,
      & .e-nextpage,
      & .e-lastpage,
      & .e-nextpagedisabled,
      & .e-lastpagedisabled {
        border-left-color: $pager-border-color;
      }

      & .e-nextpage,
      & .e-nextpagedisabled {
        border-left-color: $pager-border-color;
      }
    }
  }
}


@include export-module('pager-bootstrap5-icons') {

  /* !componenticons */

  #{&}.e-pager,
  .e-grid-menu {

    .e-icon-last::before {
      content: '\e7a9';
    }

    .e-icon-first::before {
      content: '\e744';
    }

    .e-icon-prev::before {
      content: '\e765';
    }

    .e-icon-next::before {
      content: '\e748';
    }

    &.e-rtl {
      & .e-icon-last.e-lastpage::before,
      & .e-icon-last.e-lastpage:hover,
      & .e-icon-last.e-lastpagedisabled::before {
        content: '\e744';
      }

      & .e-icon-first.e-firstpage::before,
      & .e-icon-first.e-firstpage:hover,
      & .e-icon-first.e-firstpagedisabled::before {
        content: '\e7a9';
      }

      & .e-icon-prev.e-prevpage::before,
      & .e-icon-prev.e-prevpage:hover,
      & .e-icon-prev.e-prevpagedisabled::before {
        content: '\e748';
      }

      & .e-icon-next.e-nextpage::before,
      & .e-icon-next.e-nextpage:hover,
      & .e-icon-next.e-nextpagedisabled::before {
        content: '\e765';
      }
    }
  }
}

// Size variables
$breadcrumb-skin: 'bootstrap5' !default;
$breadcrumb-last-item-font-weight: $font-weight-normal !default;
$breadcrumb-font-size: $text-sm !default;
$breadcrumb-bigger-font-size: $text-base !default;
$breadcrumb-icon-font-size: $text-sm !default;
$breadcrumb-icon-bigger-font-size: $text-base !default;
$breadcrumb-padding: 0 !default;
$breadcrumb-padding-left: 0 !default;
$breadcrumb-padding-right: 0 !default;
$breadcrumb-bigger-padding: 0 !default;
$breadcrumb-separator-padding: 0 8px !default;
$breadcrumb-separator-bigger-padding: 0 8px !default;
$breadcrumb-icon-color: $icon-color !default;
$breadcrumb-icon-right-padding: 8px !default;
$breadcrumb-icon-bigger-right-padding: 8px !default;
$breadcrumb-collapsed-icon-padding: 4px 4px !default;
$breadcrumb-collapsed-icon-bigger-padding: 5px 5px !default;
$breadcrumb-sibling-separator-padding: 0 !default;
$breadcrumb-sibling-separator-margin-left: -8px !default;
$breadcrumb-icon-item-padding: 0 !default;
$breadcrumb-collapsed-icon-font-size: $text-base !default;
$breadcrumb-collapsed-icon-bigger-font-size: $text-lg !default;
$breadcrumb-item-focus-padding: 1px !default;
$breadcrumb-item-focus-bigger-padding: 1px !default;
$breadcrumb-icon-only-item-padding: 3px 5px !default;
$breadcrumb-icon-only-item-focus-padding: 2px 4px !default;
$breadcrumb-icon-only-item-next-separator-padding-left: 5px;
$breadcrumb-icon-only-item-bigger-padding: 2px 4px !default;
$breadcrumb-icon-only-item-focus-bigger-padding: 1px 3px !default;
$breadcrumb-scroll-mode-lineheight: 30px !default;
$breadcrumb-popup-item-padding: 0 12px !default;
$breadcrumb-popup-border-radius: 4px !default;
$breadcrumb-popup-item-height: 32px !default;
$cmenu-li-hover-outline-offset: 0 !default;
$breadcrumb-popup-item-bigger-height: 36px !default;

// Color variables
$breadcrumb-separator-color: $content-text-color-alt3 !default;
$breadcrumb-item-color: $primary-outline !default;
$breadcrumb-item-hover-color: darken($primary-outline, 10%) !default;
$breadcrumb-item-focus-color: $breadcrumb-item-hover-color !default;
$breadcrumb-item-active-color: darken($primary-outline, 15%) !default;
$breadcrumb-last-item-font-color: $content-text-color-alt3 !default;
$breadcrumb-collapsed-icon-hover-bgcolor: $content-bg-color-hover !default;
$breadcrumb-collapsed-icon-active-bgcolor: $content-bg-color-pressed !default;
$breadcrumb-collapsed-icon-focus-bgcolor: $content-bg-color-focus !default;
$breadcrumb-collapsed-icon-color: $icon-color !default;
$breadcrumb-collapsed-icon-hover-color: $icon-color !default;
$breadcrumb-disabled-item-color: $content-text-color-disabled !default;
$breadcrumb-icon-interaction-color: $icon-color !default;
$breadcrumb-item-focus-border: 1px solid darken($primary-outline, 10%) !default;
$breadcrumb-popup-item-color: $content-text-color-alt3 !default;
$breadcrumb-popup-border: 1px solid $border-light !default;
$breadcrumb-popup-bgcolor: $flyout-bg-color !default;
$breadcrumb-popup-box-shadow: $shadow-lg !default;
$breadcrumb-popup-item-hover-bgcolor: $flyout-bg-color-hover !default;
$breadcrumb-popup-item-hover-color: $content-text-color-focus !default;
$breadcrumb-popup-item-hover-outline: 0 solid $border-light !default;

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

  /*! 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: 0;
    }

    .e-breadcrumb-wrapped-ol {
      flex-wrap: wrap;
      overflow: hidden;
      padding-left: 0;
    }

    &.e-breadcrumb-scroll-mode {
      line-height: $breadcrumb-scroll-mode-lineheight;
      overflow: auto;
    }

    ol {
      align-items: center;
      display: inline-flex;
      line-height: normal;
      margin: 0;
      padding: 0;
      padding-left: $breadcrumb-padding-left;
      padding-right: $breadcrumb-padding-right;
    }

    @if $breadcrumb-skin == 'bootstrap' or $breadcrumb-skin == 'Material3' {
      background-color: $breadcrumb-bgcolor;
      border-radius: 4px;
    }

    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 == 'tailwind' {
          &:focus {
            padding: $breadcrumb-item-focus-padding;
          }
        }
      }

      @if $breadcrumb-skin == 'bootstrap5' 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;
        }
      }

      a.e-breadcrumb-text {
        cursor: pointer;
        text-decoration: none;
        @if $skin-name == 'FluentUI' {
          border: 1px solid transparent;
        }

        @if $breadcrumb-skin == 'bootstrap5' {
          text-decoration: underline;
        }

        &:hover {
          @if $skin-name == 'FluentUI' {
            background-color: $content-bg-color-hover;
            color: $content-text-color-alt3;
          }
          @else {
            text-decoration: underline;
          }
        }

        &:focus {
          @if $skin-name == 'FluentUI' {
            border: 1px solid $border-alt;
            color: $content-text-color-alt1;
          }
          @else {
            text-decoration: underline;
          }
        }

        &:active {
          @if $skin-name == 'FluentUI' {
            background-color: $content-bg-color-alt4;
            color: $content-text-color-alt3;
          }
          @else {
            text-decoration: underline;
          }
        }

        @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' or $breadcrumb-skin == 'tailwind' or $breadcrumb-skin == 'Material3' {
          &:hover,
          &:focus,
          &:active {
            text-decoration: none;
          }
        }
      }

      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' {
          &::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 == '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 {
        opacity: 1;
        pointer-events: none;
      }
    }

    .e-breadcrumb-separator {
      display: flex;
      font-size: $breadcrumb-font-size;
      padding: $breadcrumb-separator-padding;

      + .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: 0;
      margin-right: $breadcrumb-sibling-separator-margin-left;
      padding-left: nth($breadcrumb-separator-padding, 2);
      padding-right: $breadcrumb-sibling-separator-padding;
    }

    @if $breadcrumb-skin == 'bootstrap5' {
      .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 == 'FluentUI' {
        margin-top: 2px;
      }
    }

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

        @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: 0;
      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: 0;
      padding: 0;
    }

    .e-breadcrumb-item {
      list-style-type: none;
      white-space: nowrap;

      .e-breadcrumb-text {
        align-items: center;
        display: flex;
        font-size: $breadcrumb-font-size;
        height: $breadcrumb-popup-item-height;
        line-height: $breadcrumb-popup-item-height;
        padding: $breadcrumb-popup-item-padding;
        width: 100%;

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

      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: 0;
      }
    }

    &.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: 0;
      padding-right: $breadcrumb-icon-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-height;

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

    &.e-icon-right,
    .e-icon-right,
    &.e-rtl {
      .e-breadcrumb-icon {
        padding-left: $breadcrumb-icon-bigger-right-padding;
        padding-right: 0;
      }
    }

    &.e-rtl.e-icon-right .e-breadcrumb-icon,
    &.e-rtl .e-icon-right .e-breadcrumb-icon {
      padding-left: 0;
      padding-right: $breadcrumb-icon-bigger-right-padding;
    }
  }

  .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 == 'tailwind' {
          &:focus {
            padding: $breadcrumb-item-focus-bigger-padding;
          }
        }
      }

      @if $breadcrumb-skin == 'bootstrap5' 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 == 'tailwind' or $breadcrumb-skin == 'bootstrap' {
        &.e-icon-item .e-breadcrumb-text {
          padding: $breadcrumb-icon-only-item-bigger-padding;
        }
      }

      .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: 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 == '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: 0;

        @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: 0;
      padding-right: $breadcrumb-icon-bigger-right-padding;

      @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' {
        padding-left: $breadcrumb-icon-bigger-right-padding;
      }
    }
  }
}


@include export-module('breadcrumb-theme') {

  /*! 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: 4px;
          }
          @else {
            color: $breadcrumb-item-hover-color;
          }
        }

        &:focus {
          @if $skin-name == 'Material3' {
            background: $breadcrumb-item-focus-color;
          }
        }

        &:active {
          @if $skin-name == 'Material3' {
            background: $breadcrumb-item-active-color;
            border-radius: 4px;
          }
          @else {
            color: $breadcrumb-item-active-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 == '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;
        }
      }

      &[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;
        color: $breadcrumb-collapsed-icon-hover-color;
      }

      &:active {
        background: $breadcrumb-collapsed-icon-active-bgcolor;
        @if $skin-name == 'FluentUI' {
          color: $breadcrumb-collapsed-icon-active-color;
        }
        @else {
          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;
          color: $breadcrumb-collapsed-icon-hover-color;
        }
      }
    }

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

      .e-breadcrumb-icon {
        color: $breadcrumb-disabled-item-color;
      }
    }
  }

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

    .e-breadcrumb-item .e-breadcrumb-text:focus {
      background: $breadcrumb-popup-item-hover-bgcolor;
      color: $breadcrumb-popup-item-hover-color;
    }
  }
}


@include export-module('breadcrumb-bootstrap5-icons') {

  /*! breadcrumb icons */
  .e-breadcrumb {
    .e-breadcrumb-collapsed::before,
    .e-breadcrumb-menu::before {
      content: '\e71c';
    }

    .e-home::before {
      content: '\e87b';
    }

    .e-home {
      height: 18px;
    }
  }

  .e-bigger .e-breadcrumb,
  .e-bigger.e-breadcrumb {
    .e-home {
      height: 21px;
    }
  }
}

/*! Carousel component bootstrap5 theme definitions and variables */

// COLORS VARIABLES
$carousel-navigator-btn-bg: transparent !default;
$carousel-navigator-btn-bg-hover: rgba($primary-text-color, .4) !default;
$carousel-navigator-icon-color: $primary-text-color !default;
$carousel-indicator-bar-bg: $primary-text-color !default;
$carousel-indicator-bar-border: 1px solid rgba($primary-text-color, .4) !default;
$carousel-indicator-bar-bg-active: $primary !default;
$carousel-indicator-border-color-focus: $black !default;
$carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;

// ANIMATION VARIABLES
$carousel-animation-duration: .6s !default;
$carousel-animation-timing-function: ease-in-out !default;

// DIMENSION VARIABLES
$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;

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

  /*! carousel component styles */
  .e-carousel {
    display: block;
    margin: 0;
    padding: 0;
    position: relative;

    .e-carousel-items,
    .e-carousel-slide-container {
      height: 100%;
      margin: 0;
      overflow: hidden;
      padding: 0;
      position: relative;
      width: 100%;
    }

    .e-carousel-items.e-swipe-start {
      cursor: pointer;
    }

    &.e-partial {
      .e-carousel-slide-container {
        padding: 0 100px;

        @media screen and (max-width: 480px) {
          padding: 0 75px;
        }

        @media screen and (max-width: 320px) {
          padding: 0 50px;
        }
      }
    }

    .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: 100%;
        overflow: hidden;
        padding: 0;
        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: 100%;
        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: 100%;
      justify-content: space-between;
      pointer-events: none;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 1;

      .e-play-pause,
      .e-previous,
      .e-next {
        padding: .5em;
        pointer-events: auto;

        .e-btn {
          border: 0;
          box-shadow: none;

          &:hover {
            border-radius: $carousel-navigator-btn-border-radius-hover;
          }

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

        &.e-hover-arrows {
          display: none;
        }
      }
    }

    .e-carousel-indicators {
      align-items: center;
      bottom: 0;
      display: flex;
      justify-content: center;
      min-height: $carousel-indicator-height;
      padding: 0;
      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: 0;

          .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: 50%;
            display: inline-block;
            height: 8px;
            left: calc(32px - calc(16px * var(--carousel-items-current)));
            margin: 0 4px;
            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: 100%;
            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%;
          }
        }
      }
    }
  }
}


@include export-module('carousel-theme') {

  /*! carousel component 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;

        .e-btn-icon {
          color: $carousel-navigator-icon-color;
        }

        &:active,
        &:focus,
        &:hover {
          background-color: $carousel-navigator-btn-bg-hover;
          outline: none;
        }
      }
    }

    .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-bootstrap5-icons') {
  .e-carousel {

    .e-previous-icon::before {
      content: '\e765';
    }

    .e-next-icon::before {
      content: '\e748';
    }

    .e-play-icon::before {
      content: '\e70c';
    }

    .e-pause-icon::before {
      content: '\e77b';
    }

    &.e-rtl {
      .e-previous-icon::before {
        content: '\e748';
      }

      .e-next-icon::before {
        content: '\e765';
      }
    }
  }
}

/*! AppBar component bootstrap5 theme definitions and variables */

$appbar-bg-color-primary: $primary !default;
$appbar-color-primary: $primary-text-color !default;
$appbar-border-color-primary: $primary !default;
$appbar-font-size: $text-sm !default;
$appbar-bigger-font-size: $text-base !default;
$appbar-border: none !default;

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

  /*! appbar component styles */
  .e-bigger .e-appbar,
  .e-appbar.e-bigger {
    height: 56px;
    font-size: $appbar-bigger-font-size;

    &.e-dense {
      height: 48px;
    }

    &.e-prominent {
      height: 112px;
    }
  }

  .e-appbar {
    display: flex;
    width: 100%;
    height: 48px;
    flex-shrink: 0;
    flex-direction: row;
    position: relative;
    align-items: center;
    padding: 8px;
    overflow: hidden;
    font-size: $appbar-font-size;

    > div:first-child {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
    }

    &.e-sticky {
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    &.e-prominent {
      height: 94px;
      align-items: flex-start;

      > div:first-child {
        align-items: flex-start;
      }
    }

    &.e-dense {
      height: 40px;
    }

    &.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: 24px;
    }

    .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') {

  /*! appbar component 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: 1px 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: 1px 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: 1px 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: 1px solid;

      .e-appbar-separator {
        border-left: 1px 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: none;
    color: inherit;
  }

  .e-inherit.e-input-group .e-clear-icon,
  .e-inherit.e-input-group.e-control-wrapper .e-clear-icon {
    color: inherit;
  }
}

/* stylelint-disable */
$ddt-skin-name: $skin-name !default;
$ddt-box-shadow: none !default;
$ddt-close-icon-bottom: 10px !default;
$ddt-dd-icon-bottom: 0 !default;
$ddt-dd-icon-width: 30px !default;
$ddt-close-icon-width: 20px !default;
$ddt-dd-icon-bigger-bottom: 0 !default;
$ddt-filter-border: 1px solid $border-light !default;
$ddt-filter-top-border: 0 !default;
$ddt-filter-padding: 4px !default;
$ddt-chip-margin: 3px 4px !default;
$ddt-chip-padding: 0 8px 0 8px !default;
$ddt-chip-radius: 4px !default;
$ddt-chip-height: 24px !default;
$ddt-chip-bigger-height: 30px !default;
$ddt-close-icon-bigger-min-height: 36px !default;
$ddt-chip-content-padding: 0 4px 0 0 !default;
$ddt-rtl-chip-content-padding: 0 0 0 4px !default;
$ddt-big-chip-content-padding: 0 8px 0 0 !default;
$ddt-rtl-big-chip-content-padding: 0 0 0 8px !default;
$ddt-chip-close-font: 10px !default;
$ddt-chip-close-height: 16px !default;
$ddt-chip-close-width: 16px !default;
$ddt-last-chip-right-margin: 48px !default;
$ddt-last-chip-bigger-right-margin: 52px !default;
$ddt-select-all-height: 34px !default;
$ddt-select-all-checkbox-margin: 0 8px !default;
$ddt-select-all-text-indent: 0 !default;
$ddt-select-all-bigger-text-indent: 0 !default;
$ddt-select-all-text-font-size: $text-sm !default;
$ddt-popup-reorder-border: $border-light !default;
$ddt-treeview-padding: 6px 8px !default;
$ddt-chip-width: calc(100% - 2px) !default;
$ddt-chip-ddi-width: calc(100% - 31px) !default;
$ddt-chip-ci-width: calc(100% - 31px) !default;
$ddt-chip-ddi-ci-width: calc(100% - 62px) !default;
$ddt-big-chip-ddi-width: calc(100% - 37px) !default;
$ddt-big-chip-ci-width: calc(100% - 37px) !default;
$ddt-big-chip-ddi-ci-width: calc(100% - 73px) !default;
$ddt-remains-padding: 0 0 0 8px !default;
$ddt-rtl-remains-padding: 0 8px 0 0 !default;
$ddt-chip-font-size: $text-sm !default;
$ddt-overflow-count-padding: 5px 4px !default;
$ddt-delim-padding : 0 8px !default;
$ddt-delim-bigger-padding: 0 12px !default;
$ddt-remains-count-padding-top: 0 !default;

// color variables
$ddt-chip-bg-color: $secondary-bg-color !default;
$ddt-popup-background-color: $flyout-bg-color !default;
$ddt-popup-border-color: $border-light !default;
$ddt-chip-close: $secondary-text-color !default;
$ddt-chip-font-color: $secondary-text-color !default;
$ddt-chip-hover-bg-color: $secondary-border-color-hover !default;
$ddt-chip-hover-font-color: $secondary-text-color-hover !default;
$ddt-nodata-font-color: $content-text-color !default;
$ddt-select-all-font-color: $content-text-color !default;
$ddt-remains-font-color: $content-text-color-alt3 !default;
$ddt-readonly-input-bg-color: $content-bg-color !default;
@mixin ddt-rotate($position) {
  transform: rotate($position);
  transition: transform 300ms ease;
}

@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: 0;
      height: 0;
      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 != 'FluentUI' and $ddt-skin-name != 'Material3' {
          min-height: $ddt-close-icon-min-height;
        }
        @if $ddt-skin-name == 'Material3' {
          margin: $ddt-dd-icon-margin;
        }
      }

      .e-input-group-icon.e-ddt-icon {
        border: 0;

        @if $ddt-skin-name == 'bootstrap4' {
          font-size: 8px;
        }
        @if $ddt-skin-name == 'bootstrap5' {
          font-size: 20px;
        }

        @if $ddt-skin-name == 'Material3' {
          font-size: $ddt-chip-icon-line-height;
          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 {
          bottom: $ddt-close-icon-bottom;
          position: absolute;
          right: 0;
          @if $ddt-skin-name == 'Material3' {
            margin: 0;
          }
        }

        &.e-show-dd-icon .e-clear-icon {
          @if $ddt-skin-name == 'tailwind' {
            right: 28px;
          }
          @else {
            right: $ddt-dd-icon-width;
          }
        }

        .e-ddt-icon {
          @if $ddt-skin-name != 'FluentUI' {
            bottom: $ddt-dd-icon-bottom;
          }
          position: absolute;
          right: 0;
        }

        &.e-input-focus input.e-dropdowntree.e-chip-input,
        input.e-dropdowntree.e-chip-input {
          padding-left: 0;
          padding-right: 0;
        }
      }
    }

    .e-chips-wrapper {
      width: 100%;
    }

    &.e-show-chip {

      .e-chips-close {
        @if $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'Material3' {
          line-height: $ddt-chip-icon-line-height;
        }
        min-height: $ddt-chip-close-height;
        min-width: $ddt-chip-close-width;
        text-align: center;

        &::before {
          font-size: $ddt-chip-close-font;
          @if $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'material' and $ddt-skin-name != 'material-dark' and $ddt-skin-name != 'Material3' {
            vertical-align: middle;
          }
        }
      }

      .e-chips {
        align-items: center;
        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;

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

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

        &.e-input-group.e-control-wrapper:not(.e-show-chip),
        &.e-float-input.e-control-wrapper:not(.e-show-chip) {
          &.e-show-dd-icon.e-input-focus .e-clear-icon  {
            min-height: 20px;
          }
        }
      }

      &.e-outline.e-show-chip {
        .e-overflow {
          padding: $ddt-outline-chip-padding;
        }

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

        &.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 {
            bottom: 6px;
            right: 10px;
          }

          .e-clear-icon {
            bottom: 5px;
            right: 38px;
          }

          &:not(.e-show-dd-icon) .e-clear-icon {
            bottom: 9px;
            right: 10px;
          }
        }

        .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: 8px;

            .e-chips {
              height: 18px;
            }

            .e-chips > .e-chipcontent {
              font-size: 12px;
              padding: 0 4px 0 0;
            }

            .e-chips-close::before  {
              font-size: 12px;
              height: 12px;
              width: 12px;
            }
          }
        }

        &.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-chips > .e-chipcontent {
                font-size: 13px;
                padding: 0 8px 0 0;
              }

              .e-chips-close::before  {
                font-size: 14px;
                height: 14px;
                width: 14px;
              }
            }
          }

          &.e-show-dd-icon.e-show-text,
          &.e-show-dd-icon.e-show-chip {
            .e-ddt-icon {
              bottom: 10px;
              right: 10px;
            }
          }

          .e-clear-icon {
            bottom: 9px;
            right: 38px;
          }

          &:not(.e-show-dd-icon) .e-clear-icon {
            bottom: 9px;
            right: 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-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' {
          padding-top: $ddt-remains-count-padding-top;
        }
      }

      .e-remain {
        cursor: pointer;
        display: inline-block;
        font-size: $ddt-chip-font-size;
        padding: $ddt-remains-padding;

        &.e-wrap-count {
          @if $ddt-skin-name == 'bootstrap5' {
            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 .e-chips-wrapper .e-chips:last-child {
      @if $ddt-skin-name == 'tailwind' {
        margin-right: 18px;
      }
      @else {
        margin-right: $ddt-dd-icon-width;
      }
      max-width: $ddt-chip-ddi-width;
    }

    &.e-show-clear .e-chips-wrapper .e-chips:last-child {
      @if $ddt-skin-name == 'tailwind' {
        margin-right: 18px;
      }
      @else {
        margin-right: $ddt-close-icon-width;
      }
      max-width: $ddt-chip-ci-width;
    }

    &.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
      margin-right: $ddt-last-chip-right-margin;
      max-width: $ddt-chip-ddi-ci-width;
    }

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

      &.e-chip-input {
        width: 0;
      }
    }

    &.e-popup {
      @if $skin-name != 'material' and $skin-name != 'FluentUI' and $skin-name != 'Material3' {
        border: 1px solid $ddt-popup-border-color;
      }

      @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' {
        border-radius: 4px;
        margin-top: 4px;
      }

      @if $skin-name == 'bootstrap4' or $skin-name == 'Material3' {
        border-radius: $ddt-chip-radius;
      }

      @if $skin-name == 'Material3' {
        margin-top: 2px;
      }

      @if $skin-name == 'FluentUI' {
        border-radius: 2px;
      }
      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: 1px 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 == 'FluentUI' {
          padding: 8px 12px;
        }
        @else if $ddt-skin-name == 'bootstrap5' {
          padding: 0 8px;
        }
        @else if $ddt-skin-name == 'Material3' {
          padding: $ddt-select-all-padding;
        }

        &.e-hide-selectall {
          display: none;
        }

        .e-checkbox-wrapper {
          position: relative;
          text-indent: 0;

          .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: 14px;
          margin: $ddt-select-all-checkbox-margin;
          @if $ddt-skin-name == 'tailwind' {
            line-height: $ddt-select-all-height;
          }
        }
      }

      & .e-filter-wrap .e-input,
      & .e-filter-wrap .e-input:focus {
        @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' {
          padding: $ddt-list-filter-text-indent;
        }
      }

      .e-filter-wrap {
        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'FluentUI' {
          border-bottom: $ddt-filter-border;
        }
        @else {
          border: $ddt-filter-border;
        }
        border-top-width: $ddt-filter-top-border;
        display: block;
        padding: $ddt-filter-padding;
      }

      .e-filter-wrap {
        @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-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-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 {
          @if $ddt-skin-name == 'material' {
            bottom: -1px;
            height: 1px;
          }
        }
      }

      .e-filter-wrap .e-input-group {
        margin-bottom: 0;

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

      .e-popup-content {
        overflow: auto;
        position: relative;

        .e-ddt-nodata {
          display: none;
        }

        &.e-no-data {
          cursor: default;
          font-family: inherit;
          font-size: 14px;
          @if $ddt-skin-name == 'tailwind' {
            padding: 8px 16px;
          }
          @else if $ddt-skin-name == 'bootstrap5' {
            padding: 7px 16px;
          }
          @else {
            padding: 14px 16px;
          }
          text-align: center;

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

        .e-list-item {
          padding: 0;

          .e-ul {
            margin: 0;
            padding: 0 0 0 14px;
          }
        }

        .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 != 'Material3' {
            height: $ddt-treeview-fullrow-height;
          }
        }

        & > .e-ul {
          overflow: hidden;
          @if $ddt-skin-name != 'FluentUI' and $ddt-skin-name != 'Material3'  {
            padding: $ddt-treeview-padding;
          }
        }

        &.e-fullrow-wrap .e-text-content {
          @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'FluentUI' and $ddt-skin-name != 'Material3' {
            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 {
            position: absolute;
            right: 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 .e-chips-wrapper .e-chips:last-child {
        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
          margin-left: 18px;
          margin-right: 4px;
        }
        @else {
          margin-left: $ddt-dd-icon-width;
          margin-right: 1px;
        }
      }

      &.e-show-clear .e-chips-wrapper .e-chips:last-child {
        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
          margin-left: 18px;
          margin-right: 4px;
        }
        @else {
          margin-left: $ddt-close-icon-width;
          margin-right: 1px;
        }
      }

      &.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
        margin-left: $ddt-last-chip-right-margin;
        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
          margin-right: 4px;
        }
        @else {
          margin-right: 1px;
        }
      }

      &.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: 0 14px 0 0;
        }
      }
    }
  }

  .e-ddt-icon-hide {
    display: none;
  }

  .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' {
            bottom: 3px;
            right: 32px;
          }
          @else if $ddt-skin-name == 'bootstrap4' {
            right: 33px;
          }
          @else if $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
            bottom: auto;
            right: 36px;
          }
          @else if $ddt-skin-name != 'Material3' {
            right: $ddt-dd-icon-bigger-width;
          }
        }

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

      .e-input-group-icon.e-ddt-icon {
        @if $ddt-skin-name == 'bootstrap4' {
          font-size: 10px;
        }
      }

      .e-clear-icon {
        @if $ddt-skin-name == 'tailwind' {
          min-width: 0;
          padding: 6px;
        }
        @else {
          min-height: $ddt-close-icon-bigger-min-height;
        }
      }
    }

    &.e-show-chip {
      .e-chips-close {
        @if $ddt-skin-name == 'bootstrap4' {
          line-height: 27px;
          min-height: 30px;
          min-width: 30px;

          &::before {
            font-size: 10px;
          }
        }
        @if $ddt-skin-name == 'tailwind' {
          line-height: 18px;
          min-height: 24px;
          min-width: 24px;

          &::before {
            font-size: 20px;
          }
        }
        @if $ddt-skin-name == 'bootstrap5' {
          min-height: 24px;
          min-width: 24px;

          &::before {
            font-size: 12px;
            vertical-align: middle;
          }
        }
        @if $ddt-skin-name == 'FluentUI' {
          line-height: 27px;
          min-height: 32px;
          min-width: 32px;

          &::before {
            font-size: 12px;
          }
        }
      }
    }

    .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' {
          font-size: $text-base;
        }
        @else if $ddt-skin-name == 'FluentUI' {
          font-size: $text-lg;
        }
      }
    }

    @if $ddt-skin-name == 'material' or $ddt-skin-name == 'material-dark' {
      &.e-outline {
        .e-overflow {
          &.e-show-text {
            padding: $ddt-outline-bigger-padding;
          }

          &.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 {
            bottom: 12px;
            right: 12px;
          }

          .e-clear-icon {
            bottom: 11px;
            right: 44px;
          }

          &:not(.e-show-dd-icon) .e-clear-icon {
            bottom: 14px;
            right: 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  {
              font-size: 14px;
              height: 14px;
              width: 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-chips > .e-chipcontent {
                font-size: 14px;
              }

              .e-chips-close::before  {
                font-size: 16px;
                height: 16px;
                width: 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 {
              bottom: 16px;
              right: 12px;
            }
          }

          .e-clear-icon {
            bottom: 15px;
            right: 44px;
          }
        }
      }
    }

    &.e-show-chip {
      .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;
            }
          }
        }

        &.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-show-dd-icon .e-chips-wrapper .e-chips:last-child {
      @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'Material3' {
        margin-right: $ddt-dd-icon-bigger-width;
      }
      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 != 'Material3' {
        margin-right: $ddt-close-icon-bigger-width;
      }
      max-width: $ddt-big-chip-ci-width;
    }

    &.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
      margin-right: $ddt-last-chip-bigger-right-margin;
      max-width: $ddt-big-chip-ddi-ci-width;
    }

    &.e-popup {
      @if $ddt-skin-name == 'tailwind' {
        margin-top: 8px;
      }
      @else if $ddt-skin-name == 'bootstrap5' {
        margin-top: 4px;
      }

      .e-selectall-parent {
        text-indent: $ddt-select-all-bigger-text-indent;
        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
          @if $ddt-skin-name == 'bootstrap5' {
            padding: 3px 12px;
          }
          @else if $ddt-skin-name == 'tailwind'  {
            padding: 12px 16px;
          }
          @else {
            padding: 10px 16px;
          }

          .e-all-text {
            font-size: $text-base;
            line-height: 24px;
            @if $ddt-skin-name == 'bootstrap5' {
              margin: 0 12px;
            }
            @else {
              margin: 0 16px;
            }
          }
        }
      }

      @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 != 'bootstrap5' and $ddt-skin-name != 'Material3' {
          height: $ddt-treeview-fullrow-bigger-height;
        }
      }

      .e-treeview > .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-float-input.e-control-wrapper.e-show-chip,
          &.e-float-input.e-control-wrapper.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 .e-chips-wrapper .e-chips:last-child {
        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
          margin-right: 4px;
        }
        @else if $ddt-skin-name != 'Material3' {
          margin-left: $ddt-dd-icon-bigger-width;
          margin-right: 1px;
        }
      }

      &.e-show-clear .e-chips-wrapper .e-chips:last-child {
        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
          margin-right: 4px;
        }
        @else if $ddt-skin-name != 'Material3' {
          margin-left: $ddt-close-icon-bigger-width;
          margin-right: 1px;
        }
      }

      &.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
        margin-left: $ddt-last-chip-bigger-right-margin;
        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
          margin-right: 4px;
        }
        @else {
          margin-right: 1px;
        }
      }

      &.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 != 'bootstrap5' and $ddt-skin-name != 'Material3' {
            left: $ddt-dd-icon-bigger-width;
          }
          right: auto;
        }
      }
    }
  }
}


@include export-module('dropdowntree-theme') {

  .e-ddt {

    .e-chips {
      @if $ddt-skin-name == 'Material3' {
        background: $ddt-chip-bg-color;
        border-color: $ddt-chip-border-color;
        border: 1px solid;
      }
      @else {
        background-color: $ddt-chip-bg-color;
      }

      .e-chips-close::before {
        color: $ddt-chip-close;
      }

      >.e-chipcontent {
        color: $ddt-chip-font-color;
      }

      &:hover {
        @if $ddt-skin-name == 'Material3' {
          background: $ddt-chip-hover-bg-color;
        }
        @else {
          background-color: $ddt-chip-hover-bg-color;
        }

        @if $ddt-skin-name == 'highcontrast' {
          .e-chips-close::before {
            color: $ddt-chip-hover-font-color;
          }
        }

        @if $ddt-skin-name == 'tailwind' {
          .e-chips-close::before {
            color: $icon-color-hover;
          }
        }

        >.e-chipcontent {
          color: $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 {
        .e-chips {
          background-color: $content-bg-color-alt3;

          >.e-chipcontent {
            color: $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 != 'material' and  $ddt-skin-name != 'material-dark' and $ddt-skin-name != 'FluentUI' and $ddt-skin-name != 'Material3' {
          background-color: $ddt-icon-bg-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 == 'FluentUI' {
        @if $ddt-skin-name == 'FluentUI' {
          background: transparent;
        }
        @else {
          background: $ddt-readonly-input-bg-color;
        }

        @if $ddt-skin-name == 'bootstrap5' {
          ~ span.e-input-group-icon.e-ddt-icon {
            background: transparent;
            color: $icon-color;
          }
        }
      }

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

        .e-all-text {
          color: $ddt-select-all-font-color;
        }
      }
    }
  }
}


@include export-module('dropdowntree-bootstrap5-icons') {
  .e-ddt {
    .e-ddt-icon::before {
      content: '\e734';
    }

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

$ddl-chip-mobile-close-font: 16px !default;
$ddl-multiselect-skin-name: $skin-name !default;
$ddl-delim-font-size: $text-sm !default;
$ddl-rtl-wrapper: 0 2px 0 32px !default;
$ddl-chip-mobile-bg: $primary !default;
$ddl-search-wrapper-width: calc(100% - 32px) !default;
$ddl-bigger-search-wrapper-width: calc(100% - 38px) !default;
$ddl-bigger-small-search-wrapper-width: calc(100% - 32px) !default;
$ddl-small-search-wrapper-width: calc(100% - 30px) !default;
$ddl-popup-shadow-value: $shadow-lg !default;
$ddl-remains-padding-left: 8px !default;
$ddl-chip-margin: 3px !default;
$ddl-chip-margin-bigger: 3px !default;
$ddl-chip-radius: 4px !default;
$ddl-chip-content-padding: 0 6px 1px 0 !default;
$ddl-chip-mobile-content-padding: 8px 4px 8px 0 !default;
$ddl-chip-bigger-content-padding: 7px 8px 7px 4px !default;
$ddl-rtl-chip-mobile-content-padding: 8px 0 8px 4px !default;
$ddl-chip-padding: 0 6px 0 8px !default;
$ddl-chip-close-top: 0 !default;
$ddl-chip-close-left: 0 !default;
$ddl-chip-close-margin: 0 0 0 !default;
$ddl-chip-close-rtl-margin: 0 0 0 !default;
$ddl-chip-close-square: 14px !default;
$ddl-chip-close-width: 14px !default;
$ddl-chip-hooker-square: 24px !default;
$ddl-chip-hooker-width: 24px !default;
$ddl-chip-close-font: 14px !default;
$ddl-chip-height: 24px !default;
$ddl-chip-mobile-height: 30px !default;
$ddl-chip-collection-top: 0 !default;
$ddl-input-height: 30px !default;
$ddl-input-bigger-height: 36px !default;
$ddl-input-mob-height: 30px !default;
$ddl-control-height: 30px !default;
$ddl-control-bigger-height: 36px !default;
$ddl-delimviewheight: 28px !default;
$ddl-delimviewheight-bigger: 36px !default;
$ddl-delimview-bigger-padding-left: 12px !default;
$ddl-closer-hooker-font: $text-sm !default;
$ddl-chip-font-family: $font-family !default;
$ddl-closer-margin-top: -2em !default;
$ddl-closer-margin-top-bigger: -2.25em !default;
$ddl-icon-margin-top: -2.1em !default;
$ddl-clear-margin-top: -2em !default;
$ddl-icon-margin-top-bigger: -2.25em !default;
$ddl-chip-mobile-radius: 2px !default;
$ddl-chip-sel-mobile-height: 40px !default;
$ddl-chip-selected-padding: 12px 4px 11px 0 !default;
$ddl-chip-mobile-close-margin: 3px 0 0 !default;
$ddl-chip-close-mob-margin: 8px 0 0 !default;
$ddl-closer-hooker-top: 100% !default;
$ddl-chip-hooker-right: 5px !default;
$ddl-chip-mob-left: 0 !default;
$ddl-chip-mob-padding: 0 0 0 16px !default;
$ddl-chip-font-size: $text-sm !default;
$ddl-chip-bigger-font-size: $text-base !default;
$ddl-chip-small-font-size: $text-xs !default;
$ddl-rtl-chip-close-left: 0 !default;
$ddl-rtl-chip-content-padding: 5px 4px !default;
$ddl-rtl-mob-chip-content-padding: 8px 4px !default;
$ddl-rtl-mob-chip-content-margin: 4px !default;
$ddl-rtl-mob-sel-chip-content-padding: 12px 4px !default;
$ddl-rtl-chip-padding: 0 8px 0 4px !default;
$ddl-rtl-mob-sel-chip-padding: 0 8px 0 4px !default;
$ddl-rtl-mob-chip-padding: 0 4px 0 8px !default;
$ddl-rtl-hooker-left: -4px !default;
$ddl-chip-close-mob-top: 0 !default;
$ddl-chip-close-mobile-top: 0 !default;
$ddl-control-placholder-padding: 0 32px 0 0 !default;
$ddl-overall-close-top: 6px !default;
$ddl-overall-close-left: 6px !default;
$ddl-sel-chip-close-mobile-top: 0 !default;
$ddl-sel-chip-close-mobile-left: 12px !default;
$ddl-chip-sel-mobile-close-height: 40px !default;
$ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
$ddl-input-text-indent: 8px !default;
$ddl-input-placeholder-padding: 0 0 0 8px !default;
$ddl-rtl-chip-sel-close-left: -12px !default;
$ddl-popup-active-focus-border-width: 0 !default;
$ddl-popup-active-focus-shadow-item: none !default;
$ddl-popup-active-border-width: 0 !default;
$ddl-delim-text-indent: 8px !default;
$ddl-popup-normal-border-width: 0 !default;
$ddl-check-right: 12px !default;
$ddl-check-left: 12px !default;
$ddl-bigger-select-all-height: 48px !default;
$ddl-select-all-height: 36px !default;
$ddl-back-icon-margin: 2.5px 10px 0 -52px !default;
$ddl-back-icon-padding: 0 8px !default;
$ddl-filterbar-padding: 0 !default;
$ddl-bigger-filterbar-padding: 0 !default;
$ddl-delimviewheight-check-bigger: 34px !default;
$ddl-popup-reorder-border: $border-light !default;
$ddl-check-right-margin: 8px !default;
$ddl-bigger-check-right-margin: 12px !default;
$ddl-selectall-font-size: $text-sm !default;
$ddl-bigger-selectall-font-size: $text-base !default;
$ddl-close-icon-left: 30px !default;
$ddl-close-down-icon-left: 40px !default;
$ddl-check-icon-top: 0 !default;
$ddl-bigger-check-right: 16px !default;
$ddl-delim-text-padding-right: 6px !default;
$ddl-list-rtl-padding-right: 15px !default;
$ddl-close-rtl-icon-left: 19px !default;
$ddl-chip-close-rtl-small-left: 20px !default;
$ddl-chip-close-rtl-bigger-left: 32px !default;
$ddl-chip-close-rtl-small-bigger-left: 25px !default;
$ddl-chip-close-rtl-left: 25px !default;
$ddl-multiselect-group-list-item-rtl-padding-right: 25px !default;
$ddl-bigger-multiselect-group-list-item-rtl-padding-right: 25px !default;
$ddl-multiselect-group-list-group-item-padding-left: 16px !default;
$ddl-multiselect-group-checkbox-wrapper-padding-left: 0 !default;
$ddl-bigger-multiselect-group-checkbox-wrapper-padding-left: $ddl-multiselect-group-checkbox-wrapper-padding-left !default;
$ddl-multiselect-group-list-group-item-rtl-padding-right: 16px !default;
$ddl-multiselect-label-position: 15px !default;
$ddl-multiselect-filled-floatlabel-fontsize: 14px !default;
$ddl-multiselect-filled-float-input-min-height: 28px !default;
$ddl-multiselect-filled-input-min-height: 39px !default;
$ddl-multiselect-filled-float-input-chip-clear-icon-size: 12px !default;
$ddl-multiselect-filled-chip-clear-icon-size: 14px !default;
$multiselect-disable-font-color: $content-text-color-alt1 !default;

// Small size
$ddl-select-all-height-small: 26px !default;
$ddl-small-chip-height: 20px !default;
$ddl-chip-small-font-size: $text-xs !default;
$ddl-small-chip-close-square: 12px !default;
$ddl-small-chip-close-width: 12px !default;
$ddl-small-chip-close-font: 12px !default;
$ddl-control-small-height: 24px !default;
$ddl-small-input-height: 24px !default;
$ddl-delim-small-font-size: $text-xs !default;
$ddl-small-closer-margin-top: -2em !default;
$ddl-chip-close-hooker-small-left: 0 !default;
$ddl-chip-close-hooker-small-bigger-left: 0 !default;
$ddl-delimviewheight-small: 24px !default;
$ddl-multiselect-filled-input-min-height-small: 32px !default;
$ddl-multiselect-filled-float-input-min-height-small: 22px !default;
$ddl-multiselect-filled-floatlabel-fontsize-small: 10px !default;
$ddl-multiselect-filled-chip-clear-icon-size-small: 10px !default;

// Touch
$ddl-multiselect-filled-input-min-height-bigger: 52px !default;
$ddl-multiselect-filled-float-input-min-height-bigger: 36px !default;
$ddl-multiselect-filled-floatlabel-fontsize-bigger: 12px !default;
$ddl-bigger-chip-close-font: 14px !default;
$ddl-bigger-chip-close-square: 14px !default;
$ddl-bigger-chip-close-width: 14px !default;

// Touch Small size
$ddl-select-all-height-bigger-small: 40px !default;
$ddl-bigger-small-chip-height: 26px !default;
$ddl-chip-bigger-small-font-size: $text-xs !default;
$ddl-bigger-small-chip-close-square: 14px !default;
$ddl-bigger-small-chip-close-width: 14px !default;
$ddl-bigger-small-chip-close-font: 14px !default;
$ddl-control-bigger-small-height: 28px !default;
$ddl-bigger-small-input-height: 32px !default;
$ddl-delim-bigger-small-font-size: $text-xs !default;
$ddl-delimviewheight-bigger-small: 28px !default;
$ddl-closer-margin-top-bigger-small: -2em !default;

// color

$ddl-list-box-shadow-color: rgba(0, 0, 0, .21) !default;
$ddl-chip-selected-shadow-value: 0 2px 3px 1px $ddl-list-box-shadow-color !default;
$ddl-chip-mobile-font: $content-text-color !default;
$ddl-chip-bg-color: $secondary-bg-color !default;
$ddl-chip-hover-bg-color: $secondary-bg-color-hover !default;
$ddl-chip-hover-font-color: $secondary-text-color !default;
$ddl-sel-hover-chip-bg-color: $secondary-bg-color-pressed !default;
$ddl-sel-chip-hover-font-color: $secondary-text-color !default;
$ddl-chip-font-color: $secondary-text-color !default;
$ddl-chip-close: $secondary-text-color !default;
$ddl-sel-chip-font-color: $content-text-color !default;
$ddl-sel-chip-close: $content-text-color !default;
$ddl-sel-chip-color: $content-text-color !default;
$ddl-sel-chip-bg-color: $content-bg-color-alt5 !default;
$ddl-remains-font-color: $content-text-color !default;
$ddl-popup-active-focus-bg-color: $content-bg-color-selected !default;
$ddl-popup-active-focus-font-color: $content-text-color-selected !default;
$ddl-popup-active-focus-border-color: transparent !default;
$ddl-input-placeholder: $placeholder-text-color !default;
$ddl-popup-active-border-color: $border-selected !default;
$ddl-multi-list-default-font-color: $content-text-color !default;
$ddl-multi-list-hover-bg-color: $content-bg-color-hover !default;
$ddl-delim-font-color: $content-text-color !default;
$ddl-close-icon-color: $content-text-color !default;
$ddl-close-down-icon-left: 35px !default;

@include export-module('multiselect-bootstrap5') {
  .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 2px 2px 0;
    border-right-width: 0;
  }

  .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-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
    height: $ddl-chip-hooker-square;
    width: $ddl-chip-hooker-square;
  }

  .e-multi-select-wrapper .e-searcher input[type = 'text'] {
    color: $content-text-color;
    height: 100%;
  }

  .e-multiselect .e-input-group-icon.e-ddl-icon {
    border-left-width: 0;
  }
}

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

  #{if(&, '&', '*')}.e-delimiter {
    #{if(&, '&', '*')} .e-searcher,
    #{if(&, '&', '*')} .e-multi-searcher {
      height: 27px;
      vertical-align: middle;
      #{if(&, '&', '*')} .e-dropdownbase {
        height: 100%;
        min-height: 100%;
      }
    }
  }

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

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

    input[type = 'text'] {
      height: 1px;
      min-height: 1px;
    }
  }

  .e-chips.e-mob-chip > .e-chipcontent {
    max-width: 100%;
  }
}

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

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

  .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 {
    padding: 0 48px 0 0;
  }

  .e-multi-select-wrapper .e-delim-values {
    align-items: center;
    display: inline;
    max-width: 100%;
    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: 0;
    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: 0;
    margin-top: $ddl-icon-margin-top;
    right: 0;
    @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-clear-icon,
  .e-multi-select-wrapper .e-ddl-icon {
    left: 0;
    right: auto;
  }

  .e-multi-select-wrapper.e-down-icon {
    padding: 0 0 0 48px;
  }
}

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

.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-bigger .e-multi-select-wrapper {
  min-height: $ddl-control-bigger-height;
}

.e-multi-select-wrapper.e-close-icon-hide {
  padding-right: 0;
}

.e-multi-select-wrapper .e-chips-collection {
  cursor: default;
  display: block;
}

.e-multi-select-wrapper .e-multi-hidden {
  border: 0;
  height: 0;
  position: absolute;
  visibility: hidden;
  width: 0;
}

.e-multi-select-wrapper .e-chips {
  align-items: center;
  display: inline-flex;
  float: left;
  margin: $ddl-chip-margin;
  max-width: 100%;
  overflow: hidden;
  padding: $ddl-chip-padding;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.e-bigger .e-multi-select-wrapper .e-chips {
  margin: $ddl-chip-margin-bigger;
}

.e-multi-select-wrapper .e-chips > .e-chipcontent {
  max-width: 100%;
  overflow: hidden;
  padding: $ddl-chip-content-padding;
  text-indent: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  @if $ddl-multiselect-skin-name == 'bootstrap5' {
    line-height: 1.5;
  }
}

.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,
.e-bigger .e-multi-select-wrapper .e-chips > .e-chipcontent {
  padding: $ddl-chip-mobile-content-padding;
}

.e-bigger .e-multi-select-wrapper .e-chips > .e-chipcontent {
  @if $ddl-multiselect-skin-name == 'bootstrap4' or $ddl-multiselect-skin-name == 'bootstrap5' {
    padding: $ddl-chip-bigger-content-padding;
  }
  @if $ddl-multiselect-skin-name == 'tailwind' {
    font-size: $ddl-chip-bigger-font-size;
  }
}

#{&}.e-multiselect.e-rtl .e-multi-select-wrapper .e-mob-chip.e-chips>.e-chipcontent,
.e-bigger #{&}.e-multiselect.e-rtl .e-multi-select-wrapper .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-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: 41px;
  }
}

.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-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: 30px;
  }
}

.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-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'  {
    right: $ddl-close-down-icon-left;
  }
}

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

.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' {
    left: 45px;
    right: auto;
  }
}

.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,
.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' {
    left: 12px;
    right: auto;
  }
}

.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: -2.3em;
    font-size: $ddl-bigger-chip-down-icon-font;
    top: 100%;
    border-radius: $ddl-bigger-closer-hooker-border-radius;
    width: $ddl-bigger-closer-hooker-width;
    height: $ddl-bigger-closer-hooker-height;
    line-height: 28px;
  }
}

.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 {
  margin-top: $ddl-closer-margin-top-bigger;
  @if $ddl-multiselect-skin-name == 'FluentUI' {
    margin-top: $ddl-bigger-clear-margin-top;
  }
  @if $ddl-multiselect-skin-name == 'bootstrap5' {
    margin-top: -2.15em;
  }
  @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-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: 0;
  }
  @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: 0;
  text-indent: $ddl-input-text-indent;
}

.e-rtl.e-multiselect.e-filled .e-multi-select-wrapper input[type = 'text'] {
  padding: 5px;
}

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

/* 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: auto;
}

// bootstrap modal search wrapper width
.e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width {
  width: $ddl-search-wrapper-width;
}

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

// Outline bootstrap modal 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-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
.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-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-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-multi-select-wrapper .e-delim-values {
  font-family: $ddl-chip-font-family;
  font-size: $ddl-delim-font-size;
  line-height: $ddl-delimviewheight;
  max-width: 100%;
  padding-left: $ddl-delim-text-indent;
  padding-right: $ddl-delim-text-padding-right;
  @if $ddl-multiselect-skin-name != 'bootstrap5' or $ddl-multiselect-skin-name != 'FluentUI' {
    vertical-align: middle;
  }
}

.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' {
    padding-left: 0;
  }
  @if $ddl-multiselect-skin-name == 'tailwind' {
    font-size: $ddl-chip-bigger-font-size;
  }
}

.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-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-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: 92%;
}

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

  .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: 0;
      margin-right: auto;
    }

    .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: auto;
      @if $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'tailwind' {
        left: 0;
      }
    }

    .e-close-hooker::before {
      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') {
    left: $ddl-chip-close-rtl-small-left;
  }
}

.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') {
    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') {
    left: $ddl-chip-close-rtl-small-bigger-left;
  }
}

.e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper {
  bottom: 1px;
  margin-right: $ddl-check-right-margin;
  position: relative;
  text-indent: 0;
  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: 4px;
  }
}

.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-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-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item .e-checkbox-wrapper {
  bottom: 1px;
  @if $ddl-multiselect-skin-name == 'bootstrap5' {
    bottom: 2px;
  }
  margin-right: $ddl-check-right-margin;
  position: relative;
  text-indent: 0;
  vertical-align: middle;
}

.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: 1px;
  @if $ddl-multiselect-skin-name == 'bootstrap5' {
    bottom: 2px;
  }
  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: 1px;
  @if $ddl-multiselect-skin-name == 'bootstrap5' {
    bottom: 2px;
  }
  margin-right: $ddl-bigger-check-right-margin;
}

.e-popup.e-multi-select-list-wrapper.e-rtl .e-list-item .e-checkbox-wrapper {
  margin-left: 12px;
  margin-right: 0;
}

.e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-rtl .e-list-group-item .e-checkbox-wrapper {
  margin-left: 12px;
  margin-right: 0;
}

.e-popup.e-multi-select-list-wrapper.e-rtl .e-list-item {
  @if ($ddl-multiselect-skin-name != 'tailwind') {
    padding-right: 0;
  }
}

.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-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-multi-select-list-wrapper .e-selectall-parent {
  cursor: pointer;
  display: block;
  line-height: $ddl-select-all-height;
  overflow: hidden;
  padding-right: $ddl-list-padding-right;
  position: relative;
  text-indent: $ddl-check-right;
  white-space: nowrap;
  width: 100%;
}

.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-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 == 'tailwind' or $ddl-multiselect-skin-name == 'FluentUI' {
    font-size: $ddl-bigger-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-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-multi-select-list-wrapper .e-selectall-parent .e-checkbox-wrapper {
  bottom: 1px;
  margin-right: $ddl-check-right-margin;
  position: relative;
  text-indent: 0;
  vertical-align: middle;
}

.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: 1px;
  @if $ddl-multiselect-skin-name == 'bootstrap5' {
    bottom: 2px;
  }
  margin-right: $ddl-bigger-check-right-margin;
}

.e-multi-select-list-wrapper.e-rtl .e-selectall-parent .e-checkbox-wrapper {
  margin-left: $ddl-check-left;
  margin-right: 0;
}

.e-multiselect .e-input-group-icon.e-ddl-icon {
  float: right;
  margin-top: $ddl-check-icon-top;
  @if $ddl-multiselect-skin-name == 'Material3' {
    top: 1px;
  }
}

.e-small .e-multiselect .e-input-group-icon.e-ddl-icon {
  @if $ddl-multiselect-skin-name == 'Material3' {
    top: 6px;
  }
}

.e-bigger.e-small .e-multiselect .e-input-group-icon.e-ddl-icon {
  @if $ddl-multiselect-skin-name == 'Material3' {
    top: 3px;
  }
}

.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 {
  padding: 0;
}

.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 != 'tailwind' {
    padding: $ddl-filterbar-padding;
  }
}

.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 != 'tailwind' and $ddl-multiselect-skin-name != 'Material3' {
    padding: $ddl-bigger-filterbar-padding;
  }
}

.e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group:not(.e-control-container) .e-clear-icon,
.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: 8px;
  }
  @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-bigger .e-checkbox .e-multi-select-wrapper .e-delim-values {
  @if $ddl-multiselect-skin-name != 'highcontrast' {
    line-height: $ddl-delimviewheight-check-bigger;
  }
}

.e-checkbox .e-multi-select-wrapper .e-delim-values .e-remain {
  line-height: 20px;
  padding-left: 10px;
  @if $ddl-multiselect-skin-name == 'bootstrap5' {
    padding-left: 0;
  }
}

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

// small size
.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: 24px;
  }
}

.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: 2px;
  }
}

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

// Touch small
.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: 100%;
  }
}

.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-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-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 != 'tailwind' {
    right: $ddl-chip-hooker-right;
  }
  @if $ddl-multiselect-skin-name == 'Material3' {
    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-content-placeholder.e-multiselect.e-placeholder-multiselect {
  background-size: 300px 33px;
  min-height: 33px;
}

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

// Outline textbox configuration

.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: 8px 12px 9px;
  }
}

.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: 8px 12px 9px;
  }
}

.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: 7px 10px;
  }
}

.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: 7px 10px;
  }
}

.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: 8px 12px 9px;
  }
}

.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: 8px 12px 9px;
  }
}

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

// Multiselect heigh changes

.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-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-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-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,
.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: 0;
  }
}

.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-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-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,
.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: 0;
  }
}

.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,
.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-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,
.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: 0;
  }
}

.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,
.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: 0;
  }
}

// Delimeter padding and left

.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-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-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-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-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    font-size: 14px;
    line-height: $ddl-outline-multiselect-height;
    padding: $outline-multiselect-delimeter-padding;
  }
}

.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: 16px;
    line-height: $outline-multiselect-bigger-height;
    padding: $outline-multiselect-bigger-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: 13px;
    line-height: $outline-multiselect-small-height;
    padding: $outline-multiselect-small-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: 14px;
    line-height: $ddl-outline-multiselect-height;
    padding: $outline-multiselect-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-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-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-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;
  }
}

// Chip size configuration

.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-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-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-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-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    padding: 0 8px 0 0;
  }
}

.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: 0 0 0 8px;
  }
}

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

//+2 more configutations

.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: 14px;
  }
}

.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: 16px;
  }
}

.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: 13px;
  }
}

.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: 14px;
  }
}

// Filled theme specifications

// Multiselect wrapper
.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper {
  padding: 0 12px 0 8px;
}

.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: 3px 12px 0 4px;
}

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

.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-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: 11px 12px 0;
}

.e-small.e-filled.e-float-input .e-multi-select-wrapper,
.e-small .e-filled.e-float-input .e-multi-select-wrapper {
  padding: 12px 12px 0 8px;
}

.e-bigger.e-filled.e-float-input .e-multi-select-wrapper,
.e-bigger .e-filled.e-float-input .e-multi-select-wrapper {
  padding: 19px 12px 0 16px;
}

.e-bigger:not(.e-small).e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper {
  padding-top: 3px;
}

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

// Searchable input

.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-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: 10px;
  }
}

.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: 2px;
  }
}

.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-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-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: 5px 0;
}

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

// Delimiter wrapper specifications

.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-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: 13px;
    line-height: $ddl-multiselect-filled-input-min-height;
  }
}

.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-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: 14px;
    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: 16px;
    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-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;
  }
}

// Chip specifications

.e-filled: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-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: 28px;
}

.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,
.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: 24px;
}

.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: 32px;
}

.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper.e-mob-wrapper .e-chips.e-mob-chip {
  height: 24px;
}

.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-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: 18px;
}

.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
.e-filled:not(.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-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: 8px 8px 0 0;
  padding: 0 8px;
}

.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,
.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: 8px 0 0 8px;
  padding: 0 8px;
}

.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: 8px;
}

.e-small .e-filled .e-multi-select-wrapper .e-chips,
.e-small.e-filled .e-multi-select-wrapper .e-chips {
  height: 16px;
  margin: 4px 4px 0 0;
  padding-right: 8px;
}

.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: 4px 0 0 4px;
}

.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: 24px;
}

.e-filled.e-multiselect.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-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-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-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: 13px;
  padding: 0 8px 0 0;
}

.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: 12px;
}

.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-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: 12px;
  padding: 0 4px 0 0;
}

.e-rtl.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-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: 0 0 0 4px;
}

.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: 10px;
}

.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: 13px;
}

.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-mob-wrapper .e-chips > .e-chipcontent {
  font-size: 13px;
  padding-right: 4px;
}

.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: 0 12px;
}

.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: 8px;
}

// 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: 38px;
  margin-top: -38px;
  right: 12px;
  top: 100%;
  width: 16px;
}

.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: 0;
  }
  @else {
    margin: 0;
  }
}

.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-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;
  }
  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-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 == 'FluentUI' {
    font-size: $ddl-bigger-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,
.e-bigger .e-multi-select-wrapper .e-chips {
  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' {
    color: $ddl-multi-list-default-font-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' {
    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' {
    color: $ddl-multi-list-default-font-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' {
    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' {
    -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;
  }
}

// Mouse Small
.e-small .e-multi-select-wrapper .e-chips {
  @if $ddl-multiselect-skin-name == 'bootstrap5' {
    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-bigger .e-multi-select-wrapper .e-close-hooker::before {
  left: $ddl-chip-close-hooker-small-bigger-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;
  }
}

//Touch Small
.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-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-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;
  }
}

// Multiselect Outline textbox configuration

.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-bootstrap5-icons') {
  .e-multiselect.e-input-group .e-ddl-icon::before {
    content: '\e729';
    font-family: 'e-icons';
  }

  .e-multi-select-wrapper .e-chips .e-chips-close::before {
    content: '\e7e7';
    cursor: pointer;
    left: $ddl-chip-close-left;
    position: relative;
    top: $ddl-chip-close-top;
  }

  .e-multi-select-wrapper .e-close-hooker::before {
    content: '\e7e7';
    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: '';
  }
}

//layout variables
$listbox-font-family: $font-family !default;
$listbox-icon-margin-right: 16px !default;
$listbox-icon-line-height: 34px !default;
$listbox-icon-back-margin: 2px !default;
$listbox-rtl-icon-back-margin: -2px !default;
$listbox-item-line-height: 1 !default;
$listbox-item-padding: 10px 12px !default;
$listbox-bigger-item-padding: 8px 16px !default;
$listbox-header-text-padding: 12px !default;
$listbox-header-font-size: $text-xs !default;
$listbox-header-height: 18px !default;
$listbox-header-font-weight: $font-weight-medium !default;
$listbox-header-line-height: 18px !default;
$listbox-header-padding-bottom: 0 !default;
$listbox-touch-back-icon-padding: 0 !default;
$listbox-border-bottom: 0 !default;
$listbox-border-top: 0 !default;
$listbox-border-left: 0 !default;
$listbox-border-right: 0 !default;
$listbox-group-first-border-bottom: 0 !default;
$listbox-group-border-top: 1px !default;
$listbox-group-border-bottom: 0 !default;
$listbox-groupheader-item-height: 30px !default;
$listbox-groupheader-item-line-height: 10px !default;
$listbox-groupheader-font-size: $text-xs !default;
$listbox-border-size: 0 !default;
$listbox-font-size: $text-sm !default;
$listbox-back-padding-right: 8px !default;
$listbox-touch-item-height: 48px !default;
$listbox-touch-item-line-height: 1.6 !default;
$listbox-touch-item-font-size: $text-base !default;
$listbox-touch-groupheader-height: 40px !default;
$listbox-touch-groupheader-line-height: 25px !default;
$listbox-touch-header-height: 22px !default;
$listbox-touch-header-font-weight: $font-weight-medium !default;
$listbox-touch-header-font-size: $text-sm !default;
$listbox-touch-header-line-height: 22px !default;
$listbox-touch-header-icon-margin-top: 2px !default;
$listbox-checkbox-right-margin: -2px 0 0 8px !default;
$listbox-checkbox-left-margin: -2px 8px 0 0 !default;
$listbox-rtl-checkbox-left-margin: -2px 0 0 8px !default;
$listbox-rtl-checkbox-right-margin: -2px 8px 0 0 !default;

//ListView In-built template variables
$listbox-template-padding: 8px 16px !default;
$listbox-template-avatar-padding-right: 16px !default;
$listbox-template-avatar-padding-left: 68px !default;
$listbox-template-avatar-rightposition-padding-right: 68px !default;
$listbox-template-avatar-rightposition-padding-left: 16px !default;
$listbox-template-avatar-size: 40px !default;
$listbox-template-avatar-top: 0 !default;
$listbox-template-avatar-left: 0 !default;
$listbox-template-avatar-rightposition-right: 0 !default;
$listbox-template-badge-height: 18px !default;
$listbox-template-badge-width: 32px !default;
$listbox-template-badge-line-height: 16px !default;
$listbox-template-badge-font-size: $text-xxs !default;
$listbox-template-badge-right: 12px !default;
$listbox-template-avatar-badge-padding-right: 10px !default;
$listbox-template-avatar-badge-padding-left: 68px !default;
$listbox-template-badgewithoutavatar-padding-right: 10px !default;
$listbox-template-badgewithoutavatar-padding-left: 16px !default;
$listbox-template-item-padding: 8px 0 !default;
$listbox-template-multiline-header-padding: 0 !default;
$listbox-template-multiline-content-padding: 2px 0 0 0 !default;
$listbox-template-multiline-header-font-size: $text-sm !default;
$listbox-template-multiline-padding: 4px !default;
$listbox-template-multiline-content-font-size: $text-sm !default;
$listbox-template-multiline-avatar-top: 0 !default;
$listbox-filter-height: calc(100% - 47px) !default;
$listbox-filter-small-height: calc(100% - 45px) !default;
$listbox-filter-bigger-small-height: calc(100% - 45px) !default;
$listbox-filter-bigger-height: calc(100% - 55px) !default;
$listbox-item-height: 36px !default;

$listbox-border-color: $border-light;
$badge-color: $primary-text-color !default;
$badge-bgcolor: $primary !default;

$select-all-border-color: $border-light !default;
$listbox-text-color: $content-text-color !default;
$listbox-text-disabled: $content-text-color-disabled !default;
$listbox-icon-color: $icon-color !default;
$listbox-icon-disabled: $icon-color-disabled !default;
$listbox-item-hover-bg: $content-bg-color-alt2 !default;
$listbox-background: $transparent !default;
$listbox-line-color: $border-light !default;
$listbox-hover-border-color: transparent !default;
$listbox-border-bottom-color: transparent !default;
$listbox-border-top-color: transparent !default;
$listbox-border-right-color: transparent !default;
$listbox-border-left-color: transparent !default;
$listbox-text-hover-color: $content-text-color !default;
$listbox-item-active-bg: $content-bg-color-alt2 !default;
$listbox-text-active-color: rgba($content-text-color, .87) !default;
$listbox-header-text-color: $content-text-color-alt2 !default;
$listbox-header-text-disabled: $content-text-color-disabled !default;
$listbox-header-bg: $content-bg-color-alt2 !default;
$listbox-header-icon-color: $icon-color !default;
$listbox-header-icon-disabled: $icon-color-disabled !default;
$listbox-header-border: rgba($black, .12) !default;
$checkmark-bgcolor: $primary !default;
$checkmark-border-color: transparent !default;
$checkmark-color: $primary-text-color !default;
$listbox-groupheader-text-color: $black !default;
$listbox-groupheader-bg: $content-bg-color-alt2 !default;
$listbox-groupheader-border: $black !default;
$listbox-groupheader-icon: $icon-color !default;
$listbox-template-multiline-header-color: $content-text-color !default;
$listbox-template-multiline-content-color: $content-text-color-alt2 !default;

$listbox-select-height: calc(100% - 36px) !default;
$listbox-select-bigger-height: calc(100% - 40px) !default;
$listbox-filterselect-height: calc(100% - 86px) !default;
$listbox-filterselect-bigger-height: calc(100% - 96px) !default;
$listbox-filter-height: calc(100% - 50px) !default;
$listbox-filter-bigger-height: calc(100% - 56px) !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: 100%;

    * {
      box-sizing: border-box;
    }

    &.e-listboxtool-container .e-list-wrap {
      @if $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'tailwind' {
        width: calc(100% - 16%) !important; /* stylelint-disable-line declaration-no-important */
      }
      @else if $skin-name == 'material' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap' {
        width: calc(100% - 14%) !important; /* stylelint-disable-line declaration-no-important */
      }
      @else if $skin-name == 'fabric' {
        width: calc(100% - 14%) !important; /* stylelint-disable-line declaration-no-important */
      }
      @else if $skin-name == 'highcontrast' {
        width: calc(100% - 13%) !important; /* stylelint-disable-line declaration-no-important */
      }
    }

    &:focus {
      outline: none;
    }

    &.e-disabled {
      cursor: default;
      pointer-events: none;
    }

    &:not(.e-list-template) .e-list-nrt {
      text-align: center;
    }

    &:not(.e-list-template) .e-list-item,
    .e-list-nrt,
    .e-selectall-parent {
      @if $skin-name == 'bootstrap5' {
        height: $listbox-item-height;
      }
      @else {
        height: $listbox-item-height;
      }
      line-height: $listbox-item-line-height;
      padding: $listbox-item-padding;
      position: relative;
    }

    .e-list-parent {
      height: 100%;
      min-height: $listbox-item-height;
    }

    & .e-list-item {
      border-bottom: $listbox-border-size solid;
      outline: none;

      &.e-disabled {
        pointer-events: none;
      }
    }

    .e-disable {
      opacity: .7;
    }

    & .e-list-parent {
      margin: 0;
      padding: 0;
    }

    & .e-list-header .e-text.header {
      display: none;
    }

    & .e-icon-back {
      margin-top: $listbox-icon-back-margin;
    }

    & .e-list-header .e-headertemplate-text.nested-header {
      display: none;
    }

    & .e-list-header {
      align-items: center;
      border-bottom: 1px solid;
      display: flex;
      font-weight: $listbox-header-font-weight;
      height: $listbox-header-height;
      padding: 0 $listbox-header-text-padding;
    }

    & .e-has-header > .e-view {
      top: 45px;
    }

    & .e-but-back {
      cursor: pointer;
      padding-right: $listbox-back-padding-right;
    }

    & .e-list-group-item:first-child {
      border: 0;
      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;
      @if $skin-name == 'Material3' {
        font-weight: 500;
      }
      @else {
        font-weight: 600;
      }
      height: $listbox-groupheader-item-height;
      line-height: $listbox-groupheader-item-line-height;
      padding: $listbox-item-padding;
    }

    & .e-icon-collapsible {
      cursor: pointer;
      font-size: 12px;
      position: absolute;
      right: 0%;
      top: 50%;
      transform: translateY(-50%);
    }

    & .e-text-content {
      height: 100%;
      position: relative;
      vertical-align: middle;
    }

    & .e-text-content * {
      display: inline-block;
      vertical-align: middle;
    }

    & .e-text-content.e-checkbox .e-list-text {
      width: calc(100% - 40px);
    }

    & .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
      width: calc(100% - 90px);
    }

    & .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
      width: calc(100% - 80px);
    }

    & .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 .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: 100%;
    }

    & .e-list-icon + .e-list-text {
      width: calc(100% - 60px);
    }

    & .e-icon-wrapper .e-list-text {
      width: calc(100% - 60px);
    }

    & .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
      width: calc(100% - 60px);
    }

    & .e-list-icon {
      height: 30px;
      margin-right: $listbox-icon-margin-right;
      width: 30px;
    }

    & .e-content {
      overflow: hidden;
      position: relative;
    }

    & .e-list-header .e-text {
      cursor: pointer;
      text-indent: 0;
    }

    & .e-text .e-headertext {
      display: inline-block;
      line-height: $listbox-header-line-height;
    }

    &.e-rtl {
      direction: rtl;

      & .e-list-icon {
        margin-left: 16px;
        margin-right: 0;
      }

      & .e-icon-collapsible {
        left: 0%;
        right: initial;
        top: 50%;
        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 {
        margin: $listbox-rtl-checkbox-left-margin;
      }

      & .e-checkbox .e-checkbox-right {
        margin: $listbox-rtl-checkbox-right-margin;
      }

      .e-checkbox-wrapper {
        margin: $listbox-rtl-checkbox-left-margin;
      }
    }

    .e-checkbox-wrapper {
      margin: $listbox-checkbox-left-margin;
      text-indent: 0;
      vertical-align: middle;
      @if $skin-name == 'Material3' {
        position: relative;
      }
    }

    &.e-checkbox-right {
      .e-checkbox-wrapper {
        position: absolute;
        right: 0;
        top: 30%;
      }
    }

    .e-input-group {
      padding: 4px 8px;
    }

    .e-input-focus {
      padding: 4px 4px 4px 8px;
    }

    .e-hidden-select {
      height: 1px;
      opacity: 0;
      position: absolute;
      width: 100%;
    }

    .e-placeholder {
      background-color: $badge-bgcolor;
      display: block;
      height: 1px;
    }
  }

  ejs-listbox {
    display: block;
  }

  .e-listbox-wrapper:not(.e-listbox-container) {
    overflow: auto;
  }

  .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: 0;
    overflow: visible;

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

    .e-ripple {
      overflow: visible;

      .e-ripple-element {
        display: none;
      }
    }

    .e-list-badge {
      align-items: center;
      background-color: $badge-bgcolor;
      border: 1px solid $badge-color;
      border-radius: 50%;
      color: $badge-color;
      display: flex;
      font-size: 12px;
      height: 22px;
      justify-content: center;
      position: absolute;
      right: -10px;
      top: -10px;
      width: 22px;
    }
  }

  .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 {
      flex: 1;
    }

    &.e-right {
      .e-listbox-tool {
        margin-left: 15px;
      }
    }

    &.e-left {
      .e-listbox-tool {
        margin-right: 15px;
      }
    }

    .e-listbox-tool {
      border: 1px solid $listbox-border-color;
      overflow: auto;
      padding: 8px;

      .e-btn {
        display: list-item;
        list-style-type: none;
        margin-bottom: 10px;
      }
    }

    &.e-checkbox-right {
      .e-checkbox-wrapper {
        position: absolute;
        right: 0;
        top: 30%;
      }
    }
  }

  .e-rtl.e-listboxtool-wrapper,
  .e-rtl.e-listboxtool-container {
    &.e-right {
      .e-listbox-tool {
        margin-right: 15px;
      }
    }

    &.e-left {
      .e-listbox-tool {
        margin-left: 15px;
      }
    }
  }

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

    &.e-listboxtool-container .e-list-wrap {
      @if $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'tailwind' {
        width: calc(100% - 20%) !important; /* stylelint-disable-line declaration-no-important */
      }
      @else if $skin-name == 'material' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap' {
        width: calc(100% - 15%) !important; /* stylelint-disable-line declaration-no-important */
      }
      @else if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
        width: calc(100% - 17%) !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;
      }
    }

    .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') {
        font-size: 16px;
        padding: 12px 20px;
      }
    }

    .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 {
      display: none;
    }

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


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

  .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
  .e-bigger .e-listbox-container.e-filter-list .e-list-parent {
    height: $listbox-filter-bigger-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;
  }

  .e-bigger .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
  .e-bigger .e-listbox-container .e-selectall-parent + .e-list-parent {
    height: $listbox-select-bigger-height;
  }

  .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-parent {
    height: $listbox-filter-bigger-small-height;
  }

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

  .e-listbox-wrapper,
  .e-listbox-container,
  .e-listboxtool-wrapper {
    font-family: $listbox-font-family;
    font-size: $listbox-font-size;
    @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;
      }

      & .e-selectall-parent + .e-list-parent {
        height: $listbox-select-height;
      }

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

      & .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 {
        background-color: $listbox-item-active-bg;
        color: $listbox-text-active-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 {
        background-color: $listbox-item-active-bg;
        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 {
        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: 500;
            margin: 0;
            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: 0;
            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 {
            height: $listbox-template-avatar-size;
            left: $listbox-template-avatar-left;
            position: absolute;
            top: $listbox-template-avatar-top;
            width: $listbox-template-avatar-size;
          }
        }

        &.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 {
            height: $listbox-template-avatar-size;
            position: absolute;
            right: $listbox-template-avatar-rightposition-right;
            top: $listbox-template-avatar-top;
            width: $listbox-template-avatar-size;
          }
        }

        &.e-list-multi-line.e-list-avatar {
          .e-avatar {
            top: $listbox-template-multiline-avatar-top;
          }
        }

        &.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: 0;
            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: 0;
            overflow: hidden;
            padding: $listbox-template-item-padding;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }

      .e-list-item {
        &.e-list-item:hover .e-list-item-header {
          color: $listbox-text-hover-color;
        }

        &.e-list-item:hover .e-list-content {
          color: $listbox-text-hover-color;
        }

        &.e-selected .e-list-item-header {
          color: $listbox-text-active-color;
        }

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


@include export-module('list-box-bootstrap5-icons') {
  .e-listbox-tool .e-moveup::before {
    content: '\e776';
  }

  .e-listbox-tool .e-movedown::before {
    content: '\e729';
  }

  .e-listbox-tool .e-moveto::before {
    content: '\e748';
  }

  .e-listbox-tool .e-movefrom::before {
    content: '\e765';
  }

  .e-listbox-tool .e-moveallto::before {
    content: '\e7a9';
  }

  .e-listbox-tool .e-moveallfrom::before {
    content: '\e744';
  }
}

/* stylelint-disable-line no-empty-source */

@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: 12px;
$de-cmt-author-nme-padding-left-big: 16px;
$de-cmt-textbox-top-margin: 12px;
$de-cmt-textbox-top-margin-big: 16px;
$de-cmt-sub-container-padding: 12px;
$de-cmt-sub-container-padding-big: 16px;
$de-cmt-sub-container-padding-left: 10px;
$de-cmt-sub-container-padding-left-big: 14px;
$de-cmt-sub-container-hover-padding-left: 11px;
$de-cmt-sub-container-hover-padding-left-big: 15px;
$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: -12px;
$de-rp-close-icon-right-bigger: -17px;
$de-rp-close-icon-top-bigger: -9px;
$de-rp-close-icon-right-rtl: 12px;
$de-rp-close-icon-right-bigger-rtl: 17px;
$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-padding-bottom: 6px;
$de-td-table-border-left: 5px;
$de-border-dlg-preview-padding-left: 72px;
$de-tbl-dlg-align-padding-bottom: 3px;

// Hyperlink dialog
$de-hyperlink-dlg-margin-top: 0 !default;
$de-bigger-padding: 16px !default;

$search-result-item-padding-top: 12px !default;
$search-result-item-padding-bottom: 12px !default;
$de-spellcheck-container-height: 140px !default;
$de-spellcheck-container-gap: 16px !default;
$de-para-dlg-heading-font-size: $text-sm !default;
$de-para-dlg-small-heading-font-size: $text-xs !default;
$de-para-dlg-heading-font-weight: $font-weight-medium !default;
$de-insert-spellchecker-height: 360px !default;
$de-insert-spellchecker-width: 513px !default;
$de-insert-big-spellchecker-width: 600px !default;
$de-spellcheck-listview-height: 122px !default;
$de-para-title-bottom-margin: 0 !default;
$de-para-dlg-height: auto !default;
$de-para-dlg-width: auto !default;
$de-toc-dlg-right-container-left: 1px !default;
$de-toc-dlg-heading-font-size: $text-sm !default;
$de-toc-dlg-heading-font-weight: $font-weight-medium !default;
$de-toc-dlg-main-heading-font-weight: $font-weight-medium !default;
$de-toc-title-bottom-margin: 8px !default;
$de-title-bottom-margin: 8px !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: 8px !default;
$de-toc-reset-button-margin-top: 10px !default;
$de-toc-modify-button-margin-top: 10px !default;
$de-toc-list-view-font-size: $text-xs !default;
$de-toc-list-view-height: 186px !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: 35px !default;
$de-para-sub-title-bottom-margin: 4px !default;
$de-para-sub-title-top-margin: 0 !default;
$de-para-sub-container-bottom: 16px !default;
$de-hyperlink-dlg-margin-bottom: 4px !default;
$de-hyperlink-dlg-input-bottom: 12px !default;
$de-hyperlink-dlg-input-width: 230px !default;
$de-hyperlink-dlg-input-height: 32px !default;
$de-font-dlg-header-margin-bottom: 4px !default;
$de-font-dlg-main-header-margin-right: 17px !default;
$e-de-font-dlg-cb-margin-right: 12px !default;
$de-dropdown-margin-right: 20px !default;
$de-op-padding-left: 12px !default;
$de-op-padding-top: 12px !default;
$de-op-header-font-family: inherit !default;
$de-op-header-font-weight: $font-weight-medium !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-close-icon-width: 20px !default;
$de-op-close-button-top: 18px !default;
$de-cell-margin-dia-common-font: $text-xs !default;
$de-cell-margin-dia-common-margin-bottom: 4px !default;
$de-cell-margin-dia-common-margin-top: 0 !default;
$de-cell-margin-dia-common-width: 150px !default;
$de-cell-margin-dia-options-font: $text-sm !default;
$de-border-dlg-border-label-fontsize: $text-base !default;
$de-border-dlg-border-label-fontweight: $font-weight-medium !default;
$de-border-dlg-border-preview-div-width: 1px !default;
$de-border-dlg-border-label-paddingbottom: 8px !default;
$de-border-dlg-setting-label-fontsize: $text-xs !default;
$de-border-dlg-setting-label-paddingbottom: 4px !default;
$de-border-dlg-settinglabels-fontsize: $text-xs !default;
$de-border-dlg-preview-inside-divs-opacity: .54 !default;
$de-table-align-border-width: 1px !default;
$de-table-align-height: 60px !default;
$de-table-align-margin-right: 11px !default;
$de-table-align-width: 60px !default;
$de-table-alignment-label-font-size: $text-xs !default;
$de-table-alignment-label-margin-top: 4px !default;
$de-table-alignment-label-margin-left: 10px !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: $text-sm !default;
$de-table-options-padding-bottom: 8px !default;
$de-table-options-padding-top: 12px !default;
$de-page-setup-dlg-width: 380px !default;
$de-page-setup-dlg-height: auto !default;
$de-page-setup-ppty-tab-border: 0 !default;
$de-page-setup-sub-container-bottom: 12px !default;
$de-page-setup-sub-container-port-bottom: 0 !default;
$de-page-setup-dlg-left-container-top: 0 !default;
$de-page-setup-dlg-right-container-top: 0 !default;
$de-page-setup-margin-dia-common-font: $text-xs !default;
$de-page-setup-margin-dia-common-margin-bottom: 4px !default;
$de-page-setup-margin-dia-common-margin-top: 12px !default;
$de-page-setup-common-margin-top: 12px !default;
$de-page-setup-sub-container-height-style: auto !default;
$de-page-setup-dlg-sub-label-font-size: $text-sm !default;
$de-page-setup-dlg-sub-label-font-weight: $font-weight-medium !default;
$de-page-setup-dlg-orientation-prop-margin-top: 8px !default;
$de-page-setup-sub-size-container-height: 73px !default;
$de-page-setup-sub-size-container-bottom: 12px !default;
$de-page-setup-layout-sub-container-height: auto !default;
$de-page-setup-layout-sub-container-bottom: 12px !default;
$de-page-setup-layout-sub-container-top: 12px !default;
$de-page-setup-checkbox-label-font-size: $text-xs !default;
$de-page-setup-dlg-layout-container-top: 0 !default;
$de-list-dlg-header-font-weight: $font-weight-medium !default;
$de-list-dlg-header-margin-bottom: 8px !default;
$de-list-dlg-header-margin-top: 12px !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: $font-weight-medium !default;
$de-list-dlg-subheader-margin-bottom: 4px !default;
$de-list-dlg-subheader-margin-top: 12px !default;
$e-de-list-subdiv-margin-top: 40px !default;
$e-de-list-div-margin-top: 36px !default;
$de-ok-insert-button-margin-right: 8px !default;
$de-options-buttons-left: 339px !default;
$de-tooltip-shadow: 0 3px 8px 0 rgba(0, 0, 0, .26) !default;
$de-dlg-btn-height: 32px !default;
$de-dlg-header-font-size: $text-base !default;
$de-dlg-header-font-weight: $font-weight-medium !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: $text-xs !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: 12px !default;
$de-op-tab-header-margin-bottom: 0 !default;
$de-op-tab-header-margin-top: 0 !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-cell-options-left: 336px !default;
$de-cell-options-top: 272px !default;
$de-font-color-margin-bottom: 8px !default;
$de-font-color-margin-top: 12px !default;
$de-font-dlg-effect-margin-left: 15px !default;
$de-font-dlg-margin-right: 10px !default;
$de-font-dlg-color-margin-right: 8px !default;
$de-font-dlg-color-margin-top: 5px !default;
$de-font-content-checkbox-left: 46px !default;
$de-font-content-checkbox-left-bg: 64px !default;
$de-font-content-checkbox-right: 41px !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: 11px !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-save-dlg-format-type-padding: 1px !default;
$de-op-search-tab-content-margin-top: 12px !default;
$de-op-search-tab-content-margin-top-bigger: 14px !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: auto !default;
$de-insert-table-width: auto !default;
$de-insert-footnote-height: auto !default;
$de-insert-footnote-width: 247px !default;
$de-insert-table-title-bottom-margin: 4px !default;
$de-insert-table-title-top-margin: 0 !default;
$de-insert-table-dlg-input-bottom: 12px !default;
$de-list-dlg-height: 405px !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: 395px !default;
$de-table-border-shading-dlg-height: 438px !default;
$de-table-border-shading-dlg-width: 460px !default;
$de-table-cell-margin-dlg-height: auto !default;
$de-table-cell-margin-dlg-width: 380px !default;
$de-table-options-dlg-height: auto !default;
$de-table-options-dlg-width: 395px !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-height: 18px !default;
$de-checkbox-line-height: $leading-normal !default;
$de-checkbox-width: 18px !default;
$de-op-dlg-footer-margin-top: 12px !default;
$de-op-dlg-footer-margin-top-bigger: 16px !default;
$de-op-search-input-width: 204px !default;
$de-op-replacewith-width: 98% !default;
$de-table-ppty-tab-border: 0 !default;
$de-list-info-btn-padding: 3px 0 0 0 !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: $text-sm !default;
$de-style-heading-font-weight: $font-weight-medium !default;
$de-style-dialog-style-ppties-bottom-margin: 14px !default;
$de-style-dialog-style-formatting-bottom-margin: 14px !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: 12px !default;
$de-style-dialog-option-div-bottom-margin: 8px !default;
$de-style-dialog-style-name-type-div-bottom-margin: 12px !default;
$de-style-dialog-style-based-para-div-bottom-margin: 16px !default;
$de-style-dialog-label-bottom-margin: 6px !default;
$e-de-style-input-text-height: 31px !default;
$de-font-checkbox-label-font-size: $text-sm !default;
$de-op-icon-font-size: $text-sm !default;
$de-op-close-icon-size: $text-sm !default;
$de-op-close-icon-margin-left: -4px !default;
$de-table-alignment-font-size: $text-5xl !default;
$de-table-alignment-top: 126px !default;
$de-tablecell-alignment-font-size: $text-5xl !default;
$de-border-none-setting-font-size: $text-4xl !default;
$de-border-setting-font-size: $text-4xl !default;
$de-td-table-border-top: 2px !default;
$de-hyperlink-bookmark-check-margin-top: 12px !default;
$de-table-ppty-dlg-measure-div-margin-left: 12px !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: 16px !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: 12px !default;
$de-table-ppty-options-break-margin-bottom: 8px !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: $font-weight-medium !default;
$de-toc-dlg-build-table-margin-top: 12px !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: 12px !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: 8px !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: auto !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: 12px !default;
$de-bookmark-dlgfields-margin-bottom: 12px !default;
$de-table-ppty-dlg-tabs-height: 280px !default;
$de-toc-dlg-toc-level-margin-left: 36px !default;
$de-table-options-font-weight: $font-weight-medium !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: 5px !default;
$de-cell-options-rtl: 123px !default;
$de-font-checkbox-ltr: 58px !default;
$de-font-content-label-width: 90px !default;
$de-font-label-width: 125px !default;
$de-font-label-width-bg: 154px !default;
$de-toc-dlg-right-sub-container-margin-top: 122px !default;
$e-de-list-div-margin-top-rtl: -125px !default;
$e-de-list-subdiv-margin-top-rtl: -121px !default;
$de-toc-modify-button-margin-rtl: 156px !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: 5px !default;
$de-table-dlg-separator-line-top: 5px !default;
$de-toggle-btn-border: none !default;
$de-btn-font-size: $text-sm;
$e-de-style-input-text-height-bigger: 41px !default;
$de-bookmark-list-margin-right: 12px !default;
$de-bkmrk-list-margin-left: 12px !default;
$de-paradialog-dir-div: .4 !default;
$de-cmt-opt-size: 20px !default;
$de-cmt-post-btn-ht: 32px !default;
$de-cmt-post-btn-wt: 42px !default;
$de-cmt-post-btn-wt-big: 54px !default;
$de-cmt-post-btn-ht-big: auto !default;
$de-reply-footer-margin-top: 8px !default;
$de-rp-btn-enforce-margin: 12px !default;
$de-rp-btn-enforce-padding-big: 10px !default;
$e-de-cmt-textarea-padding-top: 5px !default;
$e-de-cmt-textarea-padding-top-big: 2px !default;
$de-dlg-table-options-content-div: 504px !default;
$dialog-headericon-border-radius: 50% !default;
$e-de-close-icon-cursor: default !default;
$de-check-exactnumbr-width: 130px !default;
$de-tc-btn-padding: 4px !default;
$de-tc-tlbr-padding-btm: 3px !default;
$de-font-style-margin: 8px !default;
$de-font-dlg-font-size: $text-xs !default;
$de-font-dlg-width-big: max-content !default;
$de-tbl-measure-lbl-font-size: $text-xs !default;
$de-style-font-size: $text-xs !default;
$de-toc-lbl-mrgn-left: 0 !default;
$de-toc-lbl-mrgn-rgt: 0 !default;
$de-floating-menu-width: 64px !default;
$de-floating-menu-height: 64px !default;
$de-floating-menu-padding: 8px 8px 8px 10px !default;
$de-cmt-container-padding: 0 !default;
$de-cmt-sub-container-margin: 0 !default;
$de-rply-cmt-sub-container-margin: 12px 8px 0 8px !default;
$de-cmt-view-mrgn-top: 12px !default;
$de-ui-floating-menu-padding: 0 !default;
$de-ui-list-header-presetmenu-min-width: 40px;
$de-ui-wfloating-menu: 0 8px 8px 0;
$de-bullet-number-width: 300px;
$de-rp-content-ln-ht: $leading-normal;
$de-rp-font-size: $text-xs;
$de-rp-format-font-size: $text-sm;
$de-header-font-weight: $font-weight-medium;
$de-dlg-bkm-fld-fnt-size: $text-xs;
$de-ff-dlg-hdg-small-mrgn-btm: 4px;
$de-ff-seperate-div-mrgn-btm: 12px;
$de-ff-dlg-heading-mrgn-btm: 12px;
$de-ff-radio-div-mrgn-btm: 16px;
$de-ff-radio-scnd-div-mrgn-btm: 0;
$de-fnt-dlg-header-effects-mrgn-btm: 0;
$de-para-dlg-cs-check-box-mrgn-btm: 0;
$de-bullet-numbered-dlg-width: 300px;
$de-bullet-numbered-dlg-height: 173px;
$de-tbl-indent-lb-fnt-size: $text-xs;
$de-font-clr-div-mrgn-top: 12px;
$de-para-dlg-cs-check-box-mrgn-top: 12px;
$de-insert-footnote-dlg-header-mrg-btm: 12px;
$de-table-options-dlg-div-mrgn-btm: 16px;
$de-tbl-indent-lbl-mrgn-btm: 0;
$de-tbl-indent-lbl-top: 6px;
$de-cmt-date-fnt-size: $text-xxs;
$de-cmt-author-nme-fnt-size: $text-sm;
$de-cmt-date-mrgn-top: 4px;
$de-ff-drpdwn-dlg-scndiv-mrgn-botton: 4px;
$de-drp-dwn-frst-div-mrgn-btm: 8px;
$de-ff-dlg-lft-hlf-mrgn-rgt: 12px;
$de-ff-dlg-lft-hlf-wdth: 50.5%;
$de-para-dlg-cs-check-box: 12px;
$de-op-close-button-top: 8px;
$de-table-row-cell-pdng: 12px;
$de-table-prop-left-indnt-cntr-pos: 46px;
$de-avatar-width: 95%;
$de-op-more-less-mrgn-top: 12px;
$de-enforce-dlg-title-mrgn-top: 0 !default;
$de-enforce-dlg-title-fnt-size: $text-xs;
$de-enforce-btn-mrng-btm: 12px;
$de-unprotect-dlg-title-fnt-size: $text-xs;
$de-unprotect-dlg-title-mrgn-btm: 4px;
$de-user-dlg-textbox-input-mrgn-right: 24px !default;
$de-user-dlg-list-mrgn-btm: 12px !default;
$de-user-dlg-user-mrgn-btm: 8px !default;
$de-trckchanges-inner-mrgn: 0 !default;
$de-rp-width: 280px !default;
$de-rp-close-icon-top: -5px;
$de-rp-btn-enforce-prtct-margin: 0 65px;
$de-rp-nav-lbl: 0 16px;
$de-rp-nav-btn-mrgn: 0 24px;
$de-para-dlg-right-sub-container-top-margin: 0;

//New Implementation

$de-par-dlg-hdr-weight: 500 !default;
$de-para-dlg-hdr-margin-bottom: 0 !default;
$de-para-dlg-hdr-margin-top: 12px !default;
$de-dlg-heading-opacity: 87% !default;
$de-para-dlg-right-contaner-top: 0 !default;
$de-para-dlg-sub-title-bottom-margin: 4px !default;
$de-para-dlg-sub-title-top-margin: 8px !default;
$de-para-dlg-rtl-btn-margin-right: 24px !default;
$de-para-dlg-rtl-btn-font-size: $text-xs !default;
$de-para-dlg-rtl-btn-width: 200px !default;
$de-de-rtl-btn-div-e-de-rtl-margin-right: 24px !default;
$de-de-rtl-btn-div-e-de-rtl-margin-left: 12px !default;
$de-para-dlg-spacing-div-mrgn-left: 40px !default;
$de-svg-border-stroke: $content-text-color !default;

// Color variable
$de-background: $content-bg-color-alt1 !default;
$search-result-highlight-bg-color: $transparent !default;
$search-result-hightlight-bdr-clr-hvr: $primary !default;
$search-result-hightlight-bdr-clr: $primary !default;
$search-icon-bdr-clr: $icon-color-pressed !default;
$search-icon-hvr: $icon-color-hover !default;
$spin-down-bdr-clr: $border-light !default;
$spin-down-hvr: $border-light !default;
$spin-up-bdr-clr: $border-light !default;
$spin-up-hvr: $border-light !default;
$de-spellcheck-listview-border-color: $border-light;
$de-spellcheck-list-width: 100% !default;
$de-spellcheck-btn-container-width: 100% !default;
$de-spellcheck-btn-width: 100% !default;
$de-dlg-heading-main-header: $content-text-color-alt2 !default;
$de-toc-list-view-border-color: $border !default;
$de-op-title-clr: $content-text-color-alt1 !default;
$de-op-icon-color: $icon-color !default;
$de-op-close-icon-clr: $icon-color !default;
$search-result-hightlight-bdr-item: $border-light !default;
$de-table-align-border-color: $border !default;
$de-table-separator-line-color: $border !default;
$de-tooltip-bg-clr: $content-bg-color !default;
$de-op-btn-icon-active-clr: rgba($icon-color, .5) !default;
$de-op-btn-icon-bg: $transparent !default;
$de-op-btn-icon-border: $transparent !default;
$de-input-color: $content-text-color !default;
$de-op-bg-color: $content-bg-color-alt1 !default;
$de-font-color-border: 1px $content-bg-color-alt1 !default;
$de-font-color-border-radius: 4px !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-op-container-messagediv-color: $content-text-color !default;
$de-checkbox-wrapper-color: $content-text-color !default;
$bookmark-listview-border-color: $border !default;
$de-style-btn-active-bg-border-color: $border-light !default;
$de-style-btn-active-text-color: $content-text-color !default;
$de-style-toggle-btn-color: $border-light !default;
$de-table-align-hover-color: $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: $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-border-dlg-border-setting-inside-border: $border !default;
$de-border-dlg-border-setting-divs-color: $icon-color !default;
$de-border-dlg-border-preview-divs-color: $icon-color !default;
$de-numbering-list-line-color: $icon-color !default;
$de-numbering-list-span-color: $icon-color !default;
$de-numbering-list-border-color: $border !default;
$de-numbering-list-background-color: $content-bg-color !default;
$de-style-btn-bg-color:  darken($secondary-bg-color, 7.5%) !default;
$de-prop-btn-icon-clr: $icon-color;
$de-cmt-selection: $primary !default;
$de-cmt-selection-rslv: rgba($de-cmt-selection, .5) !default;
$de-cmt-pant-content-font: $content-text-color-alt1 !default;
$de-list-view: $border-light !default;
$dialog-btn-bg-color: $transparent;
$dialog-btn-border-color: $transparent;
$dialog-closeicon-btn-active-color: $transparent;
$dialog-closeicon-btn-hover-color: $transparent;
$dialog-active-icon-color: $icon-color-hover;
$dialog-btn-clr: $icon-color;
$de-tooltip-color: $content-text-color;
$de-blink-cursor-clr: $black;
$de-avatar-clr: $white !default;
$de-pane-color-border: $primary !default;
$de-rp-btn-bg-color: '';
$de-rp-btn-nav-box-shadow: $shadow-md;
$de-rp-btn-nav-box-shadow-next: $shadow-md;
$de-rp-btn-enforce-bx-shadow: $de-rp-btn-nav-box-shadow;
$de-track-chngs-sucs-bg-color: $success-bg-color;
$de-track-chngs-rejct-bg-color: $danger-bg-color;
$de-op-border-clr: $border !default;
$de-op-search-txt: $primary !default;
$de-border-dlg-border-preview-div-opacity: rgba(0, 0, 0, .54) !default;
$de-op-btn-icon-hover-clr: rgba(0, 0, 0, .75) !default;
$de-cmt-separator: $border-light !default;
$de-style-btn-color: $icon-color;
$de-style-btn-hover-color: $white;
$de-style-dlg-btn-border-color: $border-light;
$de-style-dlg-btn-bg-color: $content-bg-color;

// Table properties
$de-row-height-bottom-margin: 4px;

//Columns Dialog
$de-column-presets-font-size: $text-6xl !default;

@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: 0;
    }

    .e-de-subcontainer-right {
      padding-left: 0;
      padding-right: $de-padding-half;
      width: 50%;
    }
  }

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

      .e-de-subcontainer-right {
        padding-left: 0;
        padding-right: $de-padding-half-bigger;
        width: 50%;
      }
    }
  }

  .e-de-blink-cursor {
    border-left: 1px 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: 0;
    height: 1px;
    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: 20px;
        padding-right: 20px;
    }
    
    .e-de-column-label.e-de-rtl {
        font-size: $de-border-dlg-settinglabels-fontsize;
        font-weight: $de-border-dlg-border-label-fontweight;
        padding-left: 50px;
        padding-right: 50px;
    }
    .e-de-ff-sub-header {
        display: block;
        font-size: 12px;
        font-weight: $de-header-font-weight;
        margin-top: 6px;
    }

    .e-de-check-exactnumbr-width {
        width: $de-check-exactnumbr-width !important;
    }

    .e-de-ff-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;
        @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-size: $de-para-dlg-small-heading-font-size;
        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: 8px;
        @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: -2px;
    }
    .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: 16px;
    }
    .e-de-ff-radio-div.e-de-rtl {
        margin-left: 16px;
        margin-right: 0;
    }
    .e-de-ff-radio-scnd-div {
        display: inline-flex;
        margin-bottom: $de-ff-radio-scnd-div-mrgn-btm;
        margin-right: 16px;
    }
    .e-de-ff-radio-scnd-div.e-de-rtl {
        margin-left: 16px;
        margin-right: 0;
    }
    .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: 0;
    }
    .e-de-ff-chck-exact {
        margin-left: 15px;
        margin-top: -6px;
    }
    .e-de-ff-chck-exact.e-de-rtl {
        margin-left: 0;
        margin-right: 15px;
    }
    .e-de-ff-dlg-rght-hlf {
        width: 47.5%;
    }
    .e-de-ff-drpdwn-dlg-scndiv {
        display: inline-flex;
        height: 168px;
        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: 50%;
        color: $de-avatar-clr;
        display: flex;
        font-size: 12px;
        height: $de-cmt-avatar-height;
        justify-content: center;
        letter-spacing: 0;
        line-height: 12px;
        opacity: 100%;
        user-select: none;
        width: $de-cmt-avatar-width;
        z-index: 1;
    }
    .e-de-ff-drpdwn-listview {
        margin-right: 12px;
        width: 100%;
    }
    .e-de-ff-drpdwn-listview.e-de-rtl {
        margin-left: 12px;
        margin-right: 0;
    }
    .e-de-ff-drpdwn-mvup {
        margin-right: 8px;
    }
    .e-de-ff-drpdwn-mvup.e-de-rtl {
        margin-left: 8px;
        margin-right: 0;
    }
    .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: 2px solid $search-result-hightlight-bdr-clr-hvr;
        cursor: default;
        padding: $search-result-item-padding-top 1px $search-result-item-padding-bottom 5px;
    }
    .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 1px $search-result-item-padding-bottom 5px;
        word-break: break-word;
    }
    .e-de-search-result-item:hover {
        border-bottom: 1px solid $search-result-hightlight-bdr-clr-hvr;
        cursor: default;
    }
    .e-de-search-result-item:focus {
        border-bottom: 2px solid $search-result-hightlight-bdr-clr-hvr;
        cursor: default;
        padding: $search-result-item-padding-top 1px $search-result-item-padding-bottom 5px;
    }
    @if $skin-name !='tailwind' {
        .e-de-search-tab-content .e-input-group .e-de-op-search-icon:focus {
            border: 1px solid $search-icon-bdr-clr;
        }
        .e-de-op-search-icon:hover {
            background: $search-icon-hvr;
        }
        .e-de-search-tab-content .e-input-group .e-de-op-search-close-icon:focus {
            border: 1px 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: 1px solid $spin-down-bdr-clr;
            border-right-width: 0;
        }
        .e-spin-down:hover {
            background: $spin-down-hvr;
        }
        .e-spin-up:focus {
            border: 1px solid $spin-up-bdr-clr;
            border-right-width: 0;
        }
        .e-spin-up:hover {
            background: $spin-up-hvr;
        }
    }
    .e-de-toc-dlg-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-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: 0;
    }
    .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: 0;
        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: 1px 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: 0;
    }
    .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: 0;
        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: 8px;
    }
    @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: 10px;
    }
    .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: 12px;
        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: 14px;
        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: 0;
        margin-right: $e-de-font-dlg-cb-margin-right;
    }
    .e-de-font-dlg-cb-right-div {
        margin-left: 20px;
    }
    .e-de-dropdown {
        margin-right: $de-dropdown-margin-right;
    }
    .e-de-restrict-pane{
        border-right: 1px 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;
    }
    @if $skin-name =='FluentUI' {
      .e-bigger {
        .e-de-restrict-pane,
        .e-de-op {
            width: 300px;
        }
      }
    }
    .e-de-op {
        border-right: 1px 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: 0;
        padding-right: $de-op-padding-left;
    }
    .e-de-op-header {
        color: $de-op-title-clr;
        font-family: $de-op-header-font-family;
        font-size: 15px;
        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: 0;
        height: auto;
        @if $skin-name=='tailwind' {
            background: transparent;
        }
    }
    .e-de-op-icon {
        color: $de-op-icon-color;
        @if $skin-name !='tailwind' {
            height: 20px;
            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: 1px solid $search-result-hightlight-bdr-item;
        color: $de-dlg-heading-main-header;
        font-size: 14px;
    }
    .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-bigger {
        .e-de-op-more-less,
        .e-de-rp-more-less {
          .e-label {
            font-size: 16px !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-size: $de-cell-margin-dia-options-font;
        font-weight: $de-para-dlg-heading-font-weight;
        @if $skin-name=='tailwind' {
            color: $de-dlg-heading-main-header;
        }
    }
    .e-de-table-border-heading {
        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: 80px;
    }
    .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: 0;
    }
    .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: 1px 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;
        }
        // @if $skin-name=='tailwind' {
        //     color: $de-dlg-heading-main-header;
        // }
    }
    .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: 14px;
        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: 14px;
        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: 0 $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: 0;
        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: 0;
        margin-right: $de-cell-width-top-margin-left;
    }
    .e-de-tbl-dlg-border-btn {
        float: right;
        //margin-bottom: $de-tbl-dlg-border-btn-margin-bottom;
        margin-top: $de-tbl-dlg-border-btn-margin-top;
    }
    .e-de-tbl-dlg-border-btn.e-de-rtl {
        float: left;
        margin-right: 0;
    }
    .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: 12px;
        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: 12px;
        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: 12px;
        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: 5px;
        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: 16px;
        position: absolute;
        width: fit-content;
        word-wrap: break-word;
    }
    .e-de-save,
    .e-de-cancel {
        margin-left: 8px;
    }
    .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=='FluentUI' or $skin-name=='bootstrap5' {
        .e-bigger {
            .e-documenteditor .e-de-op-close-button {
                left: 240px;
                position: absolute;
                top: 5px;
            } 
        }
    }
    @if $skin-name=='bootstrap4' or $skin-name=='bootstrap5' {

        .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' {
                    color: $de-style-btn-color;
                  }
                }
            }
        }

        .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' {
                    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' {
            .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: 4px 8px !important;
            }

            .e-de-rp-close-icon.e-btn {
                background: $de-rp-btn-bg-color;
                border: 0;
                color: $de-cmt-pant-content-font;
                opacity: 1;
            }

            .e-de-toc-dlg-style-input {
                margin-top: 18px;
            }
            .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: 0 !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-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: 16px;
            }
            .e-bigger .e-de-op-dlg-footer {
                margin-top: $de-op-dlg-footer-margin-top-bigger;
            }
            .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;
        }
        //Hyperlink dialog
        .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' {
            // Font dialog
            .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 {
            // Font dialog
            .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: 16px;
            }
            .e-de-font-dlg-cb-right.e-de-rtl,
            .e-bookmark-list,
            .e-styles-list,
            .e-de-ff-dlg-lft-hlf {
                margin-right: 16px;
            }
          }

          .e-bookmark-textboxdiv {
            margin-bottom: 12px !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-enforce .e-de-enforce-dlg-input:not(.e-de-enforce .e-de-enforce-dlg-input:last-child) {
        //     margin-bottom: $de-bigger-padding;
        //   }
          .e-de-track-date {
              font-size: 12px;
          }
          .e-de-page-setup-dlg-sub-container-port {
            @if $skin-name != 'FluentUI' {
              margin-top: 19px;
            } 
            @else {
              margin-top: 34px;
            }
          }
        //   .e-de-table-ppty-dlg-left-indent-container {
        //     bottom: 12px;
        //   }
          .e-de-table-container-div {
            margin-top: 13px;
          }
          .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-sub-div,
            // .e-de-rp-whole-header {
            //     padding: 16px;
            // }
            .e-de-rp-stop-div1 {
                padding: 12px 16px 12px 16px;
            }
            .e-de-rp-stop-div2 {
                padding: 16px 16px 24px;
            }
            // .e-de-rp-stop-div3 {
            //     padding: 0 0 16px 16px;
            // }
            // .e-de-rp-nav-btn {
            //     margin: 0px 25px;
            // }
            // .e-de-rp-enforce {
            //     padding: 16px;
            // }
            .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: 14px !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-tbl-dlg-border-btn {
            //     margin-top: 20px;
            // }
            .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-table-ppty-dlg-left-indent-container {
            //     bottom: 14px;
            // }
            // .e-de-table-ppty-dlg-left-indent-container {
            //     left: 50px;
            // }
            // .e-de-table-ppty-dlg-left-indent-container.e-de-rtl {
            //     right: 50px;
            // }
            .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-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-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-bigger .e-de-ctnr-prop-label.e-de-table-prop-label {
            margin-bottom: 12px;
        }
        .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-bigger .e-de-enforce .e-de-enforce-dlg-input:not(.e-de-enforce .e-de-enforce-dlg-input:last-child) {
        //     margin-bottom: 16px;
        // }
        .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-enforce .e-de-enforce-dlg-input:last-child {
        //     margin-bottom: 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: 0;
    }
    .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 {
            //color: $de-input-color;
            font-size: 14px;
        }
    }
    .e-de-dlg-target .e-footer-content {
        .e-control.e-btn.e-flat:not(.e-icon-btn) {
            height: $de-dlg-btn-height;
        }
    }
    .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: 12px;
        height: 16px;
        margin-left: 15px;
        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: 40px;
        width: 40px;
    }
    .e-de-list-bullet-dot {
        height: 40px;
        width: 40px;
    }
    .e-de-list-bullet-circle {
        height: 40px;
        width: 40px;
    }
    .e-de-list-bullet-square {
        height: 40px;
        width: 40px;
    }
    .e-de-list-bullet-flower {
        height: 40px;
        width: 40px;
    }
    .e-de-list-bullet-arrow {
        height: 40px;
        width: 40px;
    }
    .e-de-list-bullet-tick {
        height: 40px;
        width: 40px;
    }
    .e-de-bullet:hover {
        background: $de-bullet-list-hover-color;
    }
    .e-de-list-numbered-none {
        height: 80px;
        width: 80px;
    }
    .e-de-list-numbered-number-dot {
        height: 80px;
        width: 80px;
    }
    .e-de-list-numbered-number-brace {
        height: 80px;
        width: 80px;
    }
    .e-de-list-numbered-up-roman {
        height: 80px;
        width: 80px;
    }
    .e-de-list-numbered-up-letter {
        height: 80px;
        width: 80px;
    }
    .e-de-list-numbered-low-letter-brace {
        height: 80px;
        width: 80px;
    }
    .e-de-numbered-low-letter-dot {
        height: 80px;
        width: 80px;
    }
    .e-de-list-numbered-low-roman {
        height: 80px;
        width: 80px;
    }
    .e-de-numbered:hover {
        background: $de-number-list-hover-color;
    }
    .e-de-list-multilevel-none {
        height: 80px;
        width: 80px;
    }
    .e-de-list-multilevel-list-normal {
        height: 80px;
        width: 80px;
    }
    .e-de-list-multilevel-list-multilevel {
        height: 80px;
        width: 80px;
    }
    .e-de-list-multilevel-list-bullets {
        height: 80px;
        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: 0;
    }
    .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-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-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: 0;
        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: 0;
        margin-right: $de-font-checkbox-ltr;
    }
    .e-de-font-checkbox.e-de-rtl {
        margin-left: 0;
        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: 0;
    }
    .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-font-dlg-display {
        display: inline-flex;
    }
    .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: 25px;
        margin-bottom: 8px;
    }
    .e-de-save-dlg-format-type {
        height: 25px;
        margin-bottom: 8px;
        padding-top: $de-save-dlg-format-type-padding;
    }
    .e-de-search-tab-content {
        //margin-right: $de-op-search-tab-content-margin-top;
        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-bigger {
        .e-de-hyperlink {
            @if $skin-name=='Material3' {
                width: 320px;
            }
            @else {
                width: 300px;
            }
        }
    }
    .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-bigger {
        .e-de-insert-spellchecker {
            width: $de-insert-big-spellchecker-width;
        }
    }
    .e-de-dlg-spellcheck-listview {
        @if $skin-name !='tailwind' {
            border: 1px solid $de-spellcheck-listview-border-color;
            border-radius: 2px !important;
        }
        height: $de-spellcheck-listview-height !important;
        margin-right: $de-bookmark-list-margin-right;
        margin-top: 8px;
        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: 140px;
        height: $de-spellcheck-container-height;
        margin-bottom: $de-spellcheck-container-gap;
        display: flex;
    }
    .e-dlg-spellcheck-listitem {
        font-size: 15px !important;
    }
    //  .e-de-dlg-suggestListView {
    //   position:absolute;
    //   width: 343px;
    //   height: 124px !important;
    //   margin-top: 8px;
    // }
    .e-de-spellcheck-btncontainer {
        margin-top: 8px;
        position: relative;
        width:$de-spellcheck-btn-container-width;
        float: right;
    }
    .e-de-spellcheck-btncontainer.e-de-rtl {
        float: left;
    }
    .e-de-spellcheck-btn {
        //height: 36px;
        margin-bottom:$de-padding-half-bigger;
        width:$de-spellcheck-btn-width;
    }
    .e-de-dlg-spellchecker-subheader {
        margin-top: 8px;
        @if $skin-name=='tailwind' {
            font-size: 14px;
            margin-top: 4px;
        }
        @else {
            font-size: 15px;
        }
    }
    .e-de-dlg-spellchecker-subheaderbtm {
        @if $skin-name=='tailwind' {
            font-size: 14px;
        }
        @else {
            font-size: 15px;
        }
    }
    .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 {
        //height: $de-table-ppty-dlg-height;
        @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-content-label span.e-label {
    //     color: $de-checkbox-wrapper-color;
    // }
    .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;
    }
    // @if $skin-name !='tailwind' and  $skin-name !='bootstrap5' {
    //     .e-documenteditor {
    //         // .e-checkbox-wrapper .e-label {
    //         //     color: $de-checkbox-wrapper-color;
    //         //     font-size: 14px;
    //         // }
    //         // .e-checkbox-wrapper .e-frame {
    //         //     height: $de-checkbox-height;
    //         //     line-height: $de-checkbox-line-height;
    //         //     width: $de-checkbox-width;
    //         // }
    //     }
    // }
    .e-de-op-dlg-footer {
        margin-top: $de-op-dlg-footer-margin-top;
    }
    .e-de-op-dlg-footer .e-btn {
        // height: $de-dlg-btn-height;
        padding-left: 6px;
        padding-right: 6px;
    }
    .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;
    }
    // @if $skin-name !='tailwind' {
    //     .e-de-table-container-div .e-checkbox-wrapper .e-label {
    //         color: $de-checkbox-wrapper-color;
    //     }
    //     .e-de-table-header-div .e-checkbox-wrapper .e-label {
    //         color: $de-checkbox-wrapper-color;
    //     }
    //     .e-de-table-ppty-options-break .e-checkbox-wrapper .e-label {
    //         color: $de-checkbox-wrapper-color;
    //     }
    //     .e-de-table-ppty-options-header-row .e-checkbox-wrapper .e-label {
    //         color: $de-checkbox-wrapper-color;
    //     }
    //     .e-de-table-cell-header-div .e-checkbox-wrapper .e-label {
    //         color: $de-checkbox-wrapper-color;
    //     }
    //     .e-de-tbl-margin-sub-header .e-label {
    //         color: $de-checkbox-wrapper-color;
    //     }
    //     .e-de-tbl-btn-separator .e-checkbox-wrapper .e-label {
    //         color: $de-checkbox-wrapper-color;
    //     }
    // }
    // .e-de-table-container-div .e-checkbox-wrapper .e-label {
    //     color: $de-checkbox-wrapper-color;
    // }
    // .e-de-table-header-div .e-checkbox-wrapper .e-label {
    //     color: $de-checkbox-wrapper-color;
    // }
    // .e-de-table-ppty-options-break .e-checkbox-wrapper .e-label {
    //     color: $de-checkbox-wrapper-color;
    // }
    // .e-de-table-ppty-options-header-row .e-checkbox-wrapper .e-label {
    //     color: $de-checkbox-wrapper-color;
    // }
    // .e-de-table-cell-header-div .e-checkbox-wrapper .e-label {
    //     color: $de-checkbox-wrapper-color;
    // }
    // .e-de-tbl-margin-sub-header .e-label {
    //     color: $de-checkbox-wrapper-color;
    // }
    // .e-de-tbl-btn-separator .e-checkbox-wrapper .e-label {
    //     color: $de-checkbox-wrapper-color;
    // }
    .e-de-list-format-info {
        border-radius: 50% !important;
        cursor: default;
        font-size: 12px !important;
        height: 15px;
        line-height: 1px;
        padding: $de-list-info-btn-padding !important;
        text-transform: lowercase;
        width: 16px;
    }
    .e-button-custom {
        height: $de-bookmark-custom-btn-height;
        width: 100%;
    }
    .e-bigger {
        .e-button-custom {
            height: $de-bigger-style-button-height;
            width: 100%;
        }
    }
    .e-styles-listview,
    .e-bookmark-listview {
        border: 1px solid $bookmark-listview-border-color;
        border-radius: $de-bookmark-list-view-border-radius;
        height: 150px;
        overflow-y: scroll;
    }
    .e-bookmark-gotobutton,
    .e-bookmark-addbutton,
    .e-styles-addbutton,
    .e-bookmark-deletebutton {
        margin-bottom: 12px;
    }
    .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: 0;
    }
    .e-bookmark-textboxdiv {
        margin-bottom: $de-bookmark-textbox-margin-bottom;
    }
    .e-bookmark-listview .e-list-item {
        font-size: 13px;
        height: 30px;
        line-height: 27px;
    }
    .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: 14px;
        width: $de-dlg-table-options-content-div;
    }
        @if $skin-name !='bootstrap4' 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: 0;
        }
        @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: 31px;
            }
        }
        .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: 35px;
                }
            }
            .e-de-style-bold-button-size {
                margin-left: $de-style-dialog-label-bottom-margin;
                @if $skin-name !='tailwind' and $skin-name !='bootstrap5' and $skin-name != 'FluentUI' and $skin-name != 'Material3' {
                    margin-right: 8px;
                    height: 35px;
                }
            }
        }
        .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: 40px !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: 40px !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: 40px !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: 40px !important;
                        width: 44px !important;
                    }
                }
            }
            .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 {
            margin-left: $de-style-dialog-label-bottom-margin;
            @if $skin-name !='tailwind' and $skin-name !='bootstrap5' and $skin-name != 'FluentUI' {
                margin-right: 8px;
                height: 31px;
            }
        }
        .e-de-style-format-dropdwn .e-btn-icon {
            margin-left: 8px;
        }
        @if $skin-name !='tailwind' and $skin-name !='bootstrap5' and $skin-name != 'FluentUI'  {
            .e-de-style-font-color-picker,
            .e-de-style-icon-button-size {
                margin-right: $de-style-dialog-label-bottom-margin;
            }
        }
        .e-de-style-icon-button-first-size {
            margin-left: $de-style-dialog-label-bottom-margin;
            @if $skin-name !='tailwind' and $skin-name !='bootstrap5' and $skin-name != 'FluentUI' {
                margin-right: 3px;
            }
        }
        .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: 25px;
        }
        .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: 2px solid $de-style-toggle-btn-color;
            }
        }
        .e-de-style-font-group-button {
            @if $skin-name !='Material3' {
                border-left: 2px solid $de-style-toggle-btn-color;
                border-right: 2px solid $de-style-toggle-btn-color;
            }
            @if $skin-name=='bootstrap5' or $skin-name == 'FluentUI' {
                padding-right: $de-style-dialog-option-div-bottom-margin;
            }
        }
        .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-bigger {
            .e-de-op-input-group,
            .e-de-op-replacewith {
                height: 40px;
            }
        }
        .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: 14px;
            }
        }
        .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: 14px;
        }
        .e-de-table-ppty-dlg-measure-div {
            float: right;
            margin-left: $de-table-ppty-dlg-measure-div-margin-left;
            margin-top: -18px;
        }
        .e-de-table-ppty-dlg-measure-div.e-de-rtl {
            float: left;
            margin-left: 0;
            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: 0;
            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: 0;
        }
        .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: 0;
            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: 0;
        }
        .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: 15px;
        }
        .e-styles-listview .e-list-item {
            font-size: 13px;
            height: 30px;
            line-height: 27px;
        }
        .e-styles-common {
            padding-top: 5px;
        }
        .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: 0;
            margin-right: $de-toc-dlg-styles-margin-left;
        }
        .e-de-toc-dlg-style-input.e-de-rtl {
            margin-left: 0;
            margin-right: $de-toc-dlg-style-input-margin-left;
        }
        .e-de-toc-table-div .e-de-toc-dlg-toc-level {
            height: 24px;
            margin-left: $de-toc-dlg-toc-level-margin-left;
            width: 44px;
        }
        .e-de-toc-styles-table-div {
            border: 1px 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: 12px;
        }
        .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: 15px;
            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: 6px;
        }
        .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: 45px;
            width: 45px;
        }
        .e-de-bullet-icon-size {
            height: 45px;
            width: 45px;
        }
        .e-de-ui-list-header-presetmenu {
            cursor: pointer;
            font-size: 11px;
            line-height: 14px;
            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: 0px;
        }
        .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: 42px;
        }
        .e-de-ui-list-header-presetmenu .e-de-ui-list-line {
            border-bottom: 1px solid $de-numbering-list-line-color;
            margin-left: 5px;
            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: 0;
            box-shadow: inset 0 0 0 1px $de-numbering-list-border-color;
            cursor: pointer;
            height: 70px;
            margin: $de-ui-wfloating-menu;
            padding: 0;
            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: 1px solid transparent;
            clear: initial;
            display: inline-block;
            height: auto;
            margin: 5px;
            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: 7px 10px;
            position: relative;
        }
        .e-de-list-item-size {
            font-size: 14px;
        }
        .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: 8px;
        }
        .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: 12px;
            @if $skin-name =='Material3' {
                width: 100px;
            }
            @else {
                width: 200px;
            }
        }
        .e-de-tbl-rtl-btn-div {
            font-size: 12px;
            margin-right: 14px;
            //width: 140px;
        }
        .e-de-tbl-rtl-btn-div.e-de-rtl {
            margin-left: 14px;
            margin-right: 0;
        }
        .e-de-tbl-ltr-btn-div {
            font-size: 12px;
            //width: 140px;
        }
        
        .e-de-disabledbutton {
            opacity: $de-paradialog-dir-div;
            pointer-events: none;
        }
        .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: 170px;
            }
            .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: 0px;
            }
            .e-de-toc-label-rtl {
                margin-left: 0px;
                margin-right: 0px;
            }
            .e-de-outline-rtl {
                width: 173px;
            }
            .e-de-rp-header {
                font-size: 16px;
                width: 75%;
            }
        }
        .e-de-restrict-format {
            margin-top: 16px;
        }
        .e-de-rp-format {
            font-size: $de-rp-format-font-size;
            @if $skin-name == 'FluentUI'{
              margin-bottom: 16px;
            } 
            @else {
              margin-bottom: 12px;
              opacity: 0.65;
            }
            font-weight: $de-header-font-weight;
        }
        .e-de-rp-checkbox {
            font-size: 12px;
        }
        .e-de-rp-border {
            margin-bottom: 12px;
            margin-top: 12px;
        }
        .e-de-rp-header {
            font-size: 15px;
            font-weight: $de-header-font-weight;
            opacity: 0.87;
            color: $de-op-title-clr;
            width: 75%;
        }
        @if $skin-name !='tailwind' {
            // .e-de-restrict-pane {
            //     .e-checkbox-wrapper .e-label {
            //         color: $de-checkbox-wrapper-color;
            //         font-size: 12px;
            //     }
            //     .e-checkbox-wrapper .e-frame {
            //         height: 16px;
            //         width: 16px;
            //     }
            //     .e-checkbox-wrapper {
            //         margin-bottom: 8px;
            //     }
            // }
            .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: 13px;
            }
            opacity: 0.87;
            border-radius: 2px;
            box-shadow: $de-rp-btn-enforce-bx-shadow;
            // @if $skin-name !='FluentUI' {
            //     height: 36px;
            // }
            @if $skin-name=='bootstrap4' {
                border-color: $de-cmt-separator;
                box-shadow: none;
                color: $de-cmt-pant-content-font;
                opacity: 1;
            }
        }
        .e-bigger .e-de-rp-btn-enforce {
            padding-left: $de-rp-btn-enforce-padding-big;
            padding-right: $de-rp-btn-enforce-padding-big;
        }
        .e-de-rp-nav-btn {
          //margin: $de-rp-nav-btn-mrgn;    
          width: auto;
        }
        .e-de-rp-btn-stop-enforce {
            @if $skin-name !='tailwind' {
                background: $de-rp-btn-bg-color;
                font-size: 13px;
                opacity: 0.87;
            }
            border-radius: 2px;
            box-shadow: $de-rp-btn-enforce-bx-shadow;
            // @if $skin-name !='FluentUI' {
            //     height: 36px;
            // }
            //margin: $de-rp-btn-enforce-prtct-margin;
            @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: 1px solid $de-list-view;
            padding: $de-rp-sub-div-padding;
        }
        .e-de-restrict-pane {
            padding-left: 0;
            padding-top: 0;
            padding-right: 0;
        }
        .e-de-rp-whole-header {
            padding: $de-rp-whole-header-padding;
        }
        .e-de-rp-user {
            background: $de-numbering-list-background-color;
            border: 1px solid $de-list-view;
            border-radius: 2px;
            font-size: 12px;
            height: 110px;
            //width: 238px;
        }
        .e-de-rp-enforce {
            padding: $de-rp-enforce-padding;
            // @if $skin-name=='bootstrap4' {
            //     text-align: center;
            // }
        }
        .e-de-rp-enforce-nav {
            margin: 0 12px 12px 12px;
        }
        .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;
            //margin-bottom: $de-enforce-btn-mrng-btm;
            width: 300px;
        }
        .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: 2px;
            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: 0;
            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: 1px solid $de-list-view;
            border-radius: 2px;
            height: 106px;
        }
        .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: 12px 12px 6px 12px;
            font-weight: 500;
            border-bottom: 1px solid #e0e0e0;
        }
        .e-de-rp-stop-div2 {
            padding: 12px 12px 24px;
        }
        // .e-de-rp-stop-div3 {
        //     padding: 0 0 12px 12px;
        // }
        .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: 100%;
            overflow: auto;
            overflow-x: hidden;
            width: $de-rp-width;
        }
        .e-de-rp-nav-lbl {
            font-size: 13px;
            margin: 0 12px;
        }
        .e-documenteditor-optionspane {
            height: 100%;
        }
        //Comment Implementation
        .e-de-cmt-pane {
            background-color: inherit;
            color: $de-cmt-pant-content-font;
        }
        .e-de-cp-whole-header {
            padding: 12px;
        }
        .e-de-cp-header {
            font-size: 13px;
            font-weight: 500;
            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: 1px solid $de-cmt-separator;
                border-radius: 2px;
            }
            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: 3px solid $de-cmt-selection;
            padding-left: $de-cmt-sub-container-padding-left;
        }
        .e-de-tc-outer {
            border-bottom: 1px 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: 8px;
            padding-right: 16px;
            padding-bottom: 8px;
        }
        .e-de-trckchanges-inner:hover {
            border-left: 2px solid $de-cmt-selection;
            cursor: default;
            margin: $de-trckchanges-inner-mrgn;
            padding-left: 6px;
            padding-right: 16px;
            padding-bottom: 8px;
        }
        .e-de-trckchanges-inner.e-de-trckchanges-inner-select {
            border-left: 3px solid $de-cmt-selection;
            cursor: default;
            margin: $de-trckchanges-inner-mrgn;
            padding-left: 5px;
            padding-right: 16px;
            padding-bottom: 8px;
        }
        .e-de-tc-no-chng {
            color: $de-input-color;
            font-size: 14px;
            opacity: 65%;
            margin: 60px 0;
            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;
        }
        .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: 5px $de-tc-btn-padding;
            text-transform: initial;
        }
        .e-btn.e-outline.e-de-track-accept-button:hover {
            min-width: 66px; 
            padding: 5px $de-tc-btn-padding;
            text-transform: initial;
        }
        .e-btn.e-outline.e-de-track-reject-button {
            min-width: 64px;
            padding: 5px 6px;
            margin-left: 8px;
            text-transform: initial;
        }
        .e-btn.e-outline.e-de-track-reject-button:hover {
            min-width: 64px; 
            padding: 5px 6px;
            margin-left: 8px;
            text-transform: initial;
        }
        .e-de-track-chngs-count {
            font-size: 12px;
            margin-left: 6px;
            opacity: 0.87;
            padding-top: 7px;
            white-space: nowrap;
        }
        .e-de-track-insert {
            color: $de-track-chngs-sucs-bg-color;
            font-size: 13px;
            opacity: 100%;
        }
        .e-de-track-delete {
            color: $de-track-chngs-rejct-bg-color;
            font-size: 13px;
            opacity: 100%;
        }
        @if $skin-name !='tailwind' {
            .e-de-track-toolbar {
                border-bottom: 1px solid #d8d8d8;
                border-top: 1px solid #d8d8d8;
                padding-bottom: $de-tc-tlbr-padding-btm;
            }
            .e-de-track-pane-drop-btn {
                padding-left: 0px;
                padding-right: 0px;
                @if $skin-name =='Material3' {
                    padding-top: 10px !important;
                }
                @else {
                    padding-top: 5px;
                }
                font-size: 13px;
                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: 4px;
            opacity: 0.67;
        }
        .e-de-track-usernme-div {
            justify-content: space-between;
            padding-top: 8px;
        }
        .e-de-track-user-nme {
            font-size: $de-cmt-author-nme-fnt-size;
            font-weight: 500;
            padding-left: 8px;
        }
        .e-de-track-chngs-text {
            line-height: 19.5px;
            overflow: hidden;
            word-wrap: break-word;
            text-overflow: ellipsis;
            font-size: $de-cmt-author-nme-fnt-size;
            min-height: 20px;
            padding-top: 8px;
            margin-bottom: 16px;
        }
        .e-de-track-chng-table {
            border-collapse: collapse;
            border-spacing: 0px;
            opacity: 70%;
            width: 100%;
        }
        .e-de-tc-tble-cell {
            border: 1px solid;
            height: 20px;
        }
        .e-de-tc-shrink-img {
            height: 30px;
            margin: 0 4px;
            vertical-align: middle;
            width: 50px;
        }
        .e-de-tc-field {
            background-color: rgb(206, 205, 205);
            margin: 0 2px;
        }
        .e-de-tc-pmark {
            font-size: 14px;
            font-family: Roboto-Regular;
            font-weight: 600;
            color: rgb(1, 22, 119);
            margin: 0 2px;
        }
        .e-de-cmt-sub-container:not(.e-de-cmt-selection):not(.e-de-cmt-reply):hover {
            border-left: 2px 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: 8px;
            }
        }
        .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: 0px;
            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: 0px;
            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: 4px;
            }
            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: 1px solid $de-cmt-separator;
            border-radius: 0px;
            margin: $de-rply-cmt-sub-container-margin;
            padding: 0px;
            .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: 13px;
            }
            line-height: normal;
            min-height: 30px;
            overflow: hidden;
            padding-top: $e-de-cmt-textarea-padding-top;
            resize: none;
        }
        .e-bigger .e-de-cmt-textarea.e-input {
            padding-top: $e-de-cmt-textarea-padding-top-big;
        }
        .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: 8px;
            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: 8px;
                text-align: right;
            }
        }
        .e-de-cmt-sub-container.e-de-cmt-resolved.e-de-cmt-selection {
            border-left: 3px 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: 2px solid $de-cmt-selection-rslv;
        }
        .e-de-lock-mark {
            cursor: default;
            color: $de-op-icon-color; 
            font-size: 13px;
            height: 13px;
            pointer-events: all;
            width: 13px;
        }
        .e-de-cmt-mark {
            cursor: default;
            color: $de-op-icon-color; 
            font-size: 13px;
            height: 13px;
            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: 6px;
            margin-top: 24px;
            font-size: 13px;
        }
        .e-de-cmt-drawer-cnt {
            font-size: 13px;
            height: 20px;
            margin-top: 8px;
        }
        .e-de-cmt-drawer {
            cursor: pointer;
            float: right;
            opacity: 0.54;
            margin-right: 4px;
            margin-top: 4px;
        }
        .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: 1px 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: 1px solid $de-cmt-separator;
                border-right: 3px 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: 1px solid $de-cmt-separator;
                border-right: 2px 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: 3px 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: 2px solid $de-cmt-selection-rslv;
            }
            .e-de-cmt-action-button {
                text-align: left;
            }
            .e-de-cmt-no-cmt {
                margin-left: auto;
                margin-right: 6px;
            }
            .e-de-cmt-drawer {
                float: left;
                margin-left: 8px;
                margin-right: auto;
            }
            .e-de-cmt-resolve-btn {
                text-align: left;
            }
        }
        .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: 12px;
                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: 56px;
                padding: 16px;
                padding-right: 8px;
            }
            .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: 12px;
                    @if $skin-name == 'tailwind' {
                        padding-bottom: $de-cmt-cancel-btn-padding-top-big;
                        padding-right: $de-cmt-cancel-btn-padding-left-big;
                    }
                }
            }
        }
        .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;
            //height: 26px;
            //width: 26px;
            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;
        }
        // Blazor
        .e-de-para-dlg-right-sub-container-blazor {
            top: $de-para-dlg-right-sub-container-top-margin;
        }
        .e-de-rp-mu-btn {
            margin-top: 3px;
        }
        .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-padding-bottom;
        }
        .e-de-table-border-icon-container {
            margin-top: 4px;
            margin-right: 4px;
        }
        .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: 0%;
                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: 0;
                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: 0;
            }
            .e-de-table-border-clr-left-container {
                padding-right: 0;
                padding-left: $de-border-dlg-clr-padding-right;
            }
            .e-de-table-border-preview-container {
                padding-right: $de-border-dlg-preview-padding-left;
                padding-left: 0;
            }
            .e-de-table-border-setting-genral {
                margin-right: 0;
                margin-left: $de-table-align-margin-right;
            }
            .e-de-table-border-icon-container {
                margin-right: 0;
                margin-left: 4px;
            }
            .e-de-table-border-preview {
                width: 23px;
              }
            .e-de-table-setting-labels-heading {
                margin-left: 0;
                margin-right: 10px;
            }
        }
        .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;
            }
            .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: 0%;
            }
            .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: 0%;
                    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;
                }
            }
        }
}

@include export-module('documenteditor-bootstrap5-icons') {
  .e-documenteditor {
    .e-close::before {
      color: $icon-color;
      content: '\e7e7';
      font-family: 'e-icons';
      font-size: 14px;
    }

    .e-de-op-search-icon::before {
      content: '\e754';
      font-family: 'e-icons';
    }

    .e-arrow-up::before {
      content: '\e87a';
      font-family: 'e-icons';
    }

    .e-arrow-down::before {
      content: '\e70d';
      font-family: 'e-icons';
    }

    .e-de-op .e-de-op-close-icon {
      height: $de-op-close-icon-width;
    }

    .e-de-op-close-icon::before {
      content: '\e7e7';
      font-family: 'e-icons';
    }

    .e-de-op-search-close-icon::before {
      color: $icon-color;
      content: '\e7e7';
      font-family: 'e-icons';
    }

    .e-de-new-cmt::before {
      content: '\e805';
      font-family: 'e-icons';
    }

    .e-de-menu-icon::before {
      content: '\e770';
      font-family: 'e-icons';
    }

    .e-de-cmt-mark-icon::before {
      color: $icon-color;
      content: '\e733';
      font-family: 'e-icons';
      font-size: 13px;
    }

    .e-de-multi-cmt-mark::before {
      color: $icon-color;
      content: '\e8bc';
      font-family: 'e-icons';
      font-size: 14px;
    }

    .e-de-cmt-post::before {
      content: '\e71d';
      font-family: 'e-icons';
    }

    .e-de-cmt-rply-icon::before {
      color: $icon-color;
      content: '\e85e';
      font-family: 'e-icons';
    }

    .e-de-cmt-cancel::before {
      content: '\e7e7';
      font-family: 'e-icons';
    }

    .e-de-cmt-delete::before {
      content: '\e820';
      font-family: 'e-icons';
    }

    .e-de-cmt-reopen::before {
      content: '\e782';
      font-family: 'e-icons';
    }

    .e-de-nav-up::before {
      content: '\e7dd';
      font-family: 'e-icons';
    }

    .e-de-nav-right-arrow::before {
      content: '\e748';
      font-family: 'e-icons';
    }

    .e-de-nav-left-arrow::before {
      content: '\e765';
      font-family: 'e-icons';
    }

    .e-de-save-icon::before {
      content: '\e774';
      font-family: 'e-icons';
    }

    .e-de-cancel-icon::before {
      content: '\e7e7';
      font-family: 'e-icons';
    }
  }

  .e-de-ctn-title-print::before {
    content: '\e75d';
  }

  .e-de-acceptchange::before {
    color: $icon-color;
    content: '\e7a8';
    font-family: 'e-icons';
  }

  .e-de-rejectchange::before {
    color: $icon-color;
    content: '\e815';
    font-family: 'e-icons';
  }

  .e-de-ctn-title-download::before {
    content: '\e7a1';
  }

  .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 {
    color: $icon-color;
    content: '\e7f6';
    font-size: $de-table-alignment-font-size;
  }

  .e-de-table-center-alignment::before {
    color: $icon-color;
    content: '\e7f1';
    font-size: $de-table-alignment-font-size;
  }

  .e-de-table-right-alignment::before {
    color: $icon-color;
    content: '\e703';
    font-size: $de-table-alignment-font-size;
  }

  .e-de-tablecell-top-alignment::before {
    color: $icon-color;
    content: '\e775';
    font-family: 'e-icons';
    font-size: $de-tablecell-alignment-font-size;
    margin: 2px;
  }

  .e-de-tablecell-center-alignment::before {
    color: $icon-color;
    content: '\e7e5';
    font-family: 'e-icons';
    font-size: $de-tablecell-alignment-font-size;
    margin: 2px;
  }

  .e-de-tablecell-bottom-alignment::before {
    color: $icon-color;
    content: '\e7d9';
    font-family: 'e-icons';
    font-size: $de-tablecell-alignment-font-size;
    margin: 2px;
  }

  .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 {
    color: $icon-color;
    content: '\e7eb';
    font-size: $de-border-none-setting-font-size;
    position: absolute;
  }

  .e-de-table-border-box-setting::before {
    color: $icon-color;
    content: '\e834';
    font-size: $de-border-setting-font-size;
    left: 2px;
    position: absolute;
    top: 2px;
  }

  .e-de-table-border-all-setting::before {
    color: $icon-color;
    content: '\e7e8';
    font-family: 'e-icons';
    font-size: $de-border-setting-font-size;
    left: 2px;
    position: absolute;
    top: 2px;
  }

  .e-de-table-border-custom-setting::before {
    color: $icon-color;
    content: '\e7d5';
    font-size: $de-border-setting-font-size;
    left: 2px;
    position: absolute;
    top: 2px;
  }

  .e-de-para-border-none-setting::before {
    color: $icon-color;
    content: '\e890';
    font-size: $de-border-none-setting-font-size;
    position: absolute;
  }

  .e-de-para-border-box-setting::before {
    color: $icon-color;
    content: '\e891';
    font-size: $de-border-setting-font-size;
    left: 2px;
    position: absolute;
    top: 2px;
  }

  .e-de-para-border-shadow-setting::before {
    color: $icon-color;
    content: '\e892';
    font-size: $de-border-setting-font-size;
    left: 2px;
    position: absolute;
    top: 2px;
  }

  .e-de-para-border-custom-setting::before {
    color: $icon-color;
    content: '\e88f';
    font-size: $de-border-setting-font-size;
    left: 2px;
    position: absolute;
    top: 2px;
  }

  .e-de-table-border-toptop-alignment::before {
    color: $icon-color;
    content: '\e7e0';
    font-family: 'e-icons';
    font-size: 16px;
    left: $de-td-table-border-left;
    position: absolute;
    top: $de-td-table-border-top;
  }

  .e-de-table-border-topcenter-alignment::before {
    color: $icon-color;
    content: '\e83b';
    font-size: 16px;
    left: $de-td-table-border-left;
    position: absolute;
    top: $de-td-table-border-top;
  }

  .e-de-table-border-topbottom-alignment::before {
    color: $icon-color;
    content: '\e766';
    font-size: 16px;
    left: $de-td-table-border-left;
    position: absolute;
    top: $de-td-table-border-top;
  }

  .e-de-table-border-diagionalup-alignment::before {
    color: $icon-color;
    content: '\e79d';
    font-size: 16px;
    left: $de-td-table-border-left;
    position: absolute;
    top: $de-td-table-border-top;
  }

  .e-de-table-border-diagionaldown-alignment::before {
    color: $icon-color;
    content: '\e784';
    font-size: 16px;
    left: $de-td-table-border-left;
    position: absolute;
    top: $de-td-table-border-top;
  }

  .e-de-table-border-bottomleft-alignment::before {
    color: $icon-color;
    content: '\e806';
    font-size: 16px;
    left: $de-td-table-border-left;
    position: absolute;
    top: $de-td-table-border-top;
  }

  .e-de-table-border-bottomcenter-alignment::before {
    color: $icon-color;
    content: '\e792';
    font-size: 16px;
    left: $de-td-table-border-left;
    position: absolute;
    top: $de-td-table-border-top;
  }

  .e-de-table-border-bottomright-alignment::before {
    color: $icon-color;
    content: '\e7ab';
    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: '\e82c';
  }

  .e-menu-item .e-de-cut::before {
    content: '\e7fb';
  }

  .e-menu-item .e-de-spellcheck::before {
    content: '\e7f0';
  }

  .e-menu-item .e-de-copy::before {
    content: '\e77c';
  }

  .e-menu-item .e-de-paste::before {
    content: '\e70b';
  }

  .e-menu-item .e-de-continue-numbering::before {
    content: '\e718';
  }

  .e-menu-item .e-de-restart-at::before {
    content: '\e715';
  }

  .e-menu-item .e-de-insertlink::before {
    content: '\e757';
  }

  .e-menu-item .e-de-open-hyperlink::before {
    content: '\e797';
  }

  .e-menu-item .e-de-copy-hyperlink::before {
    content: '\e745';
  }

  .e-menu-item .e-de-open-properties::before {
    content: '\e77e';
  }

  .e-menu-item .e-de-edit-hyperlink::before {
    content: '\e722';
  }

  .e-menu-item .e-de-remove-hyperlink::before {
    content: '\e80c';
  }

  .e-menu-item .e-de-fonts::before {
    content: '\e76f';
  }

  .e-menu-item .e-de-paragraph::before {
    content: '\e7b8';
  }

  .e-menu-item .e-de-table::before {
    content: '\e7d1';
  }

  .e-menu-item .e-de-insertabove::before {
    content: '\e836';
  }

  .e-menu-item .e-de-insertbelow::before {
    content: '\e801';
  }

  .e-menu-item .e-de-insertleft::before {
    content: '\e78b';
  }

  .e-menu-item .e-de-insertright::before {
    content: '\e70e';
  }

  .e-menu-item .e-de-delete-table::before {
    content: '\e811';
  }

  .e-menu-item .e-de-deleterow::before {
    content: '\e7f2';
  }

  .e-menu-item .e-de-deletecolumn::before {
    content: '\e714';
  }

  // .e-de-tablecell-top-alignment {
  //   padding: 4px;
  // }

  // .e-de-tablecell-center-alignment {
  //   padding: 4px;
  // }

  // .e-de-tablecell-bottom-alignment {
  //   padding-left: 4px;
  // }

  .e-de-bold::before {
    content: '\e737';
    font-family: 'e-icons';
  }

  .e-de-italic::before {
    content: '\e75a';
    font-family: 'e-icons';
  }

  .e-de-underline::before {
    content: '\e82f';
    font-family: 'e-icons';
  }

  .e-de-indent::before {
    content: '\e72a';
    font-family: 'e-icons';
  }

  .e-de-outdent::before {
    content: '\e810';
    font-family: 'e-icons';
  }

  .e-de-align-left::before {
    content: '\e7b8';
    font-family: 'e-icons';
  }

  .e-de-align-center::before {
    content: '\e813';
    font-family: 'e-icons';
  }

  .e-de-align-right::before {
    content: '\e719';
    font-family: 'e-icons';
  }

  .e-de-justify::before {
    content: '\e721';
    font-family: 'e-icons';
  }

  .e-de-single-spacing::before {
    content: '\e771';
    font-family: 'e-icons';
  }

  .e-de-double-spacing::before {
    content: '\e7c4';
    font-family: 'e-icons';
  }

  .e-de-one-point-five-spacing::before {
    content: '\e725';
    font-family: 'e-icons';
  }

  .e-de-before-spacing::before {
    content: '\e7b5';
    font-family: 'e-icons';
  }

  .e-de-after-spacing::before {
    content: '\e767';
    font-family: 'e-icons';
  }

  .e-de-icon-bullet-list-dot::before {
    content: '\e747';
    font-family: 'e-icons';
    font-size: 8px;
    line-height: 28px;
  }

  .e-de-icon-bullet-list-circle::before {
    content: '\e7d0';
    font-family: 'e-icons';
    font-size: 8px;
    line-height: 28px;
  }

  .e-de-icon-bullet-list-square::before {
    content: '\e7be';
    font-family: 'e-icons';
    font-size: 8px;
    line-height: 28px;
  }

  .e-de-icon-bullet-list-tick::before {
    content: '\e7fc';
    font-family: 'e-icons';
    font-size: 12px;
  }

  .e-de-icon-bullet-list-flower::before {
    content: '\e79b';
    font-family: 'e-icons';
    font-size: 12px;
  }

  .e-de-icon-bullet-list-arrow::before {
    content: '\e763';
    font-family: 'e-icons';
    font-size: 12px;
  }

  .e-de-icon-bullet-list-none::before {
    content: '\e7f3';
    font-family: 'e-icons';
    font-size: 24px;
  }

  .e-de-icon-autofit::before {
    content: '\e74a';
    font-family: 'e-icons';
  }

  .e-de-icon-fixed-columnwidth::before {
    content: '\e785';
    font-family: 'e-icons';
  }

  .e-de-icon-auto-fitwindow::before {
    content: '\e759';
    font-family: 'e-icons';
  }

  .e-item .e-de-paste-text::before {
    content: '\e70f';
    font-family: 'e-icons';
  }

  .e-item .e-de-paste-source::before {
    content: '\e842';
    font-family: 'e-icons';
  }

  .e-item .e-de-paste-merge::before {
    content: '\e752';
    font-family: 'e-icons';
  }

  .e-btn-icon .e-de-paste::before,
  .e-icon-btn .e-de-paste::before {
    content: '\e70b';
    font-family: 'e-icons';
  }

  .e-item .e-de-paste-column::before {
    content: '\e885';
  }

  .e-item .e-de-paste-row::before {
    content: '\e884';
  }

  .e-item .e-de-paste-overwrite-cells::before {
    content: '\e886';
  }

  .e-item .e-de-paste-nested-table::before {
    content: '\e883';
  }

  .e-item .e-de-paste-merge-table::before {
    content: '\e882';
  }

  .e-de-preset-container {
    width: 95px;
  }

  .e-de-preset-container.e-de-rtl {
    width: 85px;
  }
}


@include export-module('documenteditor-paragraph-dialog') {
  // Bigger
  .e-bigger {
    .e-de-para-dlg-container,
    .e-de-table-options-dlg {
      .e-checkbox-wrapper .e-label {
        font-size: 14px;
      }
    }

    /* stylelint-disable */
    .e-de-para-dlg-container .e-input-group {
      width: 192px !important;
    }
    /* stylelint-enable */

    .e-de-para-dlg-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-padding-half-bigger;
      //margin-top: $de-para-dlg-hdr-margin-top;
      @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 {
      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: 20px;
    }

    .e-de-para-dlg-spacing-div.e-de-rtl {
      margin-left: 0;
      margin-right: 20px;
    }

    .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: 16px;
      }
      @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: $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: 0;
    }
  }

  .e-de-para-dlg-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-para-dlg-sub-title-bottom-margin;
    //margin-top: $de-para-dlg-hdr-margin-top;
    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;
    //   bottom: $de-para-dlg-right-contaner-bottom;
  }

  .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;
    //margin-top: $de-para-dlg-sub-title-top-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;
  }
}

$de-ctnr-height: calc(100%) !default;
$de-ctnr-tlbr-height: 72px !default;
$de-ctnr-tlbt-height-big: 81px !default;
$de-tlbr-margin-first: 8px !default;
$de-tlbr-margin-first-big: 12px !default;
$de-tlbr-margin-right: 4px !default;
$de-tlbr-margin-right-big: 6px !default;
$de-ctrnr-tblr-separator-margin: 0 14px !default;
$de-ctrnr-tblr-separator-margin-big: 0 16px !default;
$de-ctnr-margin-bottom: 12px !default;
$de-ctnr-margin-bottom-big: 16px !default;
$de-group-btn-hgt: 31px !default;
$de-group-btn-hgt-big: 38px !default;
$de-ctnr-tlbr-width: calc(100% - 75px) !default;
$de-spellcheck-tlbr-width: 106px !default;
$de-spellcheck-tlbr-width-big: 145px !default;
$de-spellcheck-tlbr-height: 34px !default;
$de-spellcheck-tlbr-margin-left: 7.5px !default;
$de-zoom-tlbr-margin-left: calc(100% - 360px) !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;

// Subtract toolbar & statusbar height
$de-tool-ctnr-editor-height: calc(100% - 115px) !default;
$de-tool-ctnr-editor-height-big: calc(100% - 126px) !default;

// Subtract statusbar height
$de-ctnr-editor-height: calc(100% - 42px) !default;
$de-ctnr-editor-height-big: calc(100% - 46px) !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-prop-pane-margin: 16px;
$de-panel-header-size: $text-sm !default;
$de-table-prop-border-margin: 8px;
$de-toc-template-content1: 83px !default;
$de-toc-template-content2: 68px !default;
$de-toc-template-content3: 60px !default;
$de-img-span-top: 8px !default;
$de-img-span-left: 12px !default;
$de-toggle-btn-outline: none !default;
$de-toggle-btn-border: none !default;
$de-page-no-width-spellout: calc(100% - 155px) !default;
$de-page-no-width-spellout-big: calc(100% - 205px) !default;
$de-ctnr-status-bar-hgt: 36px !default;
$de-border-size-button-height-bg: 38px !default;
$de-border-size-button-width-bg: 95px !default;
$de-border-size-button-height: 31px !default;
$de-border-size-button-width: 99px !default;
$de-list-hover-bg: $primary !default;
$de-pane-margin-right: 12px;
$de-pane-margin-right-big: 16px;
$de-left-panel-width: 151px;
$de-left-panel-width-big: 169px;
$de-right-panel-width: 73px;
$de-text-pane-width: 260px;
$de-text-pane-width-big: 306px;
$de-btn-icon-margin: -2px !default;
$de-left-btn-width: 38.75px;
$de-left-btn-width-big: 44px;
$de-right-btn-width: 75px * .5;
$de-right-btn-width-big: 43px;
$de-border-btn-width-big: 44px;
$de-right-font-size-width-big: $text-8xl;
$de-img-span-top-big: 12px;
$de-bullet-icon-font-size: $text-xs;
$de-bullet-icon-line-height: 0;
$de-list-button-margin-right: 12px;
$de-list-button-margin-right-bigger: 16px;
$de-text-pane-style-width: auto;
$de-btn-font-size: $text-base;
$de-btn-font-size-bigger: $text-lg;
$de-ctnr-padding: 12px;
$de-prop-style-padding: 12px;
$de-prop-div-padding-top: 12px;
$de-prop-div-padding-bottom: 12px;
$de-layout-btn-font-size: $text-sm;
$de-layout-btn-bgr-font-size: $text-base;
$de-pagenumber-text-border-radius: 2px;
$de-pagenumber-text-margin-top: -3px;
$e-de-pagenumber-input-margin-left: -2px;
$e-de-ctnr-pg-no-spellout-padd-top: 8px;
$e-de-ctnr-pg-no-spellout-padd-top-big: 7px;
$e-de-status-bar-padding-top: 4px;
$e-de-status-bar-big-padding-top: 5px;
$e-de-review-pane-width: 440px;
$e-de-ctnr-linespacing-tick-icon: 8px;
$de-toolbar-font-size: $text-sm;
$de-toolbar-padding-bottom: 10px;
$de-toolbar-padding-bottom-bg: 10px;
$de-header-font-weight: $font-weight-medium;
$de-prop-sub-label-mrgn-btm: 4px;
$de-hdr-ftr-frst-div-mrgn-btm: 12px;
$de-hdr-ftr-top-div-mrgn-btm: 12px;
$de-ctnr-pg-no-spellout-fnt-size: $text-sm;
$de-ctnr-pg-no-spellout-fnt-size-bg: $text-base;
$de-status-br-lbl-fnt-weight: $font-weight-medium;
$de-status-br-left: 0 !default;
$de-status-br-top: 6px !default;
$de-status-br-top-big: 6px !default;
$e-de-btn-font-size: $text-sm;
$e-de-btn-font-icon-size: 16px;
$e-de-btn-font-size-big: $text-base;
$e-de-btn-font-icon-size-big: 18px;
$e-de-bzr-btn-font-size: $text-base;
$e-de-bzr-btn-font-size-big: $text-lg;
$e-de-bzr-button-hover-border-radius: 4px;
$e-de-bzr-button-hover-border: none;
$de-clr-pckr-width: 38px;
$de-page-number-margin-top: 3px;
$de-page-number-margin-top-big: 4px;
$de-hlt-clr-height: 20px;
$de-hlt-clr-height-bigger: 24px;

// Color variable
$de-pageweb-toggle-outline: $white 0 solid !default;
$de-title-bar-bg-clr: $primary !default;
$de-title-bar-font-clr: $primary-text-color !default;
$de-ctnr-bg-clr: $content-bg-color-alt1 !default;
$de-ctnr-prop-bg-clr: $content-bg-color-alt1 !default;
$de-prpty-btn-bg-clr: $content-bg-color-alt1 !default;
$de-prop-btn-icon-clr: $icon-color;
$de-toolbar-icon-clr: $icon-color;
$de-clr-picker-border-clr: $border;
$de-panel-border: $border-light !default;
$de-pane-separator: $border-light !default;
$de-list-thmbnail-border-clr: $border-light;
$e-de-statusbar-separator-color: $border-light;
$de-panel-header-color: $content-text-color-alt2 !default;
$de-panel-sub-label-color: $content-text-color-alt1 !default;
$de-header-line-color: 1px solid $border-light !default;
$de-toggle-bg-color: $content-bg-color-alt3 !default;
$de-font-color: $content-text-color-alt2 !default;
$de-prop-btn-border-color: $border-light !default;
$de-prop-btn-bg-color: $content-bg-color !default;
$de-toggle-btn-color: $icon-color !default;
$de-pageweb-toggle-color: $content-bg-color-alt3 !default;
$e-de-pagenumber-bg: $content-bg-color;
$de-toggle-border-color: darken($secondary-bg-color, 12.5%) !default;
$de-toggle-hover-color: darken($secondary-bg-color, 7.5%) !default;
$de-toggle-border-hover-color: darken($secondary-bg-color, 10%) !default;
$de-toggle-disabled-color: lighten($secondary-bg-color, 65%);

//Blazor
$e-de-bzr-button-border-color: $white !default;
$e-de-bzr-button-active-font-color: $white !default;
$de-white-color: $white !default;
$de-black-color: $black !default;
$e-de-bzr-button-bg-color: $content-bg-color-alt1 !default;
$e-de-bzr-button-hover-bg-color: $secondary-bg-color-hover !default;
$e-de-bzr-button-font-color: $content-text-color !default;
$e-de-bzr-button-hover-font-color: $content-text-color-selected !default;
$e-de-bzr-button-active-bg-color:  $secondary-bg-color-hover !default;
$e-de-bzr-button-active-border-color: $border !default;
$de-hover-bg: $content-bg-color-alt2 !default;

@include export-module('document-editor-container-layout') {
  .e-de-toolbar {
    height: 100%;
  }
  .e-documenteditorcontainer {
    display: block;
  }
  .e-de-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text .e-de-text-wrap {
    height: 0;
    @if $skin-name == 'tailwind' {
      line-height: 1;
    }
    @else if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
      line-height: .5;
    }
    @else {
      line-height: 0;
    }
  }

  .e-de-ctnr-file-picker {
    left: -110em;
    position: fixed;
  }

  .e-de-ctnr-rtl {
    direction: rtl;
  }

  .e-de-ctnr-hglt-btn {
    border: .5px solid transparent;
    display: inline-block;
    height: 25px;
    margin: 3px;
    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: 30px;
    padding-top: 1px;
    width: 157px;

    #{if(&, '&', '*')}:hover {
      background-color: $de-hover-bg;
      cursor: pointer;
    }
  }

  .e-de-ctnr-hglt-no-color {
    font-size: 12px;
    font-weight: normal;
    left: 40px;
    padding-top: 11px;
    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' {
    //Font color icons is smaller when comparing with other icons.
    .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-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;
      }
    }
  }
}


@include export-module('document-editor-container-theme') {
    /* stylelint-disable */
    .e-de-toolbar {
        height: 100%;
    }
    .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: 0px;
    }
    @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-bigger .e-de-ctn .e-de-bzr-button {
            line-height: 17px;
            padding-top: 12px;
        }
        .e-de-ctn .e-de-bzr-button {
            box-shadow: none !important;
        }
        .e-bigger .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-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;
            }
        }
        .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;
                    }
                }
            }
        }
    }
    .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: 0;
        box-shadow: none;
        float: right;
        @if $skin-name!='bootstrap5' and $skin-name!='tailwind' and $skin-name!='FluentUI' { 
            height: 33px;
            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=='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-bigger {
        @if $skin-name !='bootstrap5' and $skin-name !='tailwind' and $skin-name!='FluentUI'   { 
            .e-btn.e-de-statusbar-pageweb {
                padding: 0;
            }
        }
        .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;
            }
        }
    }
    .e-listview .e-list-icon {
        height: 24px;
        width: 16px;
        margin-right: $e-de-ctnr-break-listview-margin-right;
    }
    .e-de-listview-icon {
        height: auto;
        width: auto;
        line-height: 22px;
        margin-right: $e-de-ctnr-break-listview-margin-right;
    }
    .e-de-linespacing {
        margin-top: $e-de-ctnr-linespacing-tick-icon;
    }
    .e-de-statusbar-zoom {
        background: $de-ctnr-bg-clr;
        border: 0;
        color: $de-font-color;
        float: right;
        font-weight: 400;
        height: 33px;
        @if $skin-name =='bootstrap5' {
            box-shadow: none;
        }
    }
    .e-de-pagenumber-text {
        border: none !important;
        // height: 22px !important;
        // margin-top: $de-pagenumber-text-margin-top !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: 1px 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: 0px;
        text-align: center;
        width: 22px;
    }
    @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;
                //margin-top: $de-page-number-margin-top-big;
            }
        }
    }
    .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: 0;
        box-shadow: none;
        float: right;
        margin-left: $de-zoom-tlbr-margin-left;
    }
    @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;
        }
    }
    .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;
                }
            }
        }
    }
    @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-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-statusbar-separator {
        border-left: 1px solid $e-de-statusbar-separator-color;
        height: 16px;
        margin-left: $de-spellcheck-tlbr-margin-left;
        margin-right: $de-spellcheck-tlbr-margin-left;
        margin-top: $de-status-br-top;
    }
    .e-bigger .e-de-statusbar-separator {
        border-left: 1px solid $e-de-statusbar-separator-color;
        @if $skin-name == 'Material3' {
            height: 20px;
        } @else {
            height: 16px;
        }        
        margin-left: $de-spellcheck-tlbr-margin-left;
        margin-right: $de-spellcheck-tlbr-margin-left;
        margin-top: $de-status-br-top-big;
    }
    .e-de-statusbar-spellcheck {
        border-radius: 2px;
        font-weight: 400;
        
        @if $skin-name == 'Material3' {
            background: $de-ctnr-bg-clr;
        }
    }
    .e-de-ctn {
        background-color: $de-ctnr-bg-clr;
        border: 1px solid $de-panel-border;
        height: $de-ctnr-height;
        position: relative;
        width: 100%;
    }
    .e-bigger .e-de-statusbar-spellcheck {
        border-radius: 2px;
    }
    .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: 0;
    }
    .e-de-pane {
        border-left: 1px solid $de-panel-border;
        @if $skin-name == 'Material3' {
            background: $de-pane-background-color;
        }
    }
    .e-de-pane-rtl {
        border-right: 1px 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 {
        background: $de-ctnr-prop-bg-clr;
        border-bottom: 1px solid $de-panel-border;
        border-top: 1px 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-bigger {
            .e-de-ctnr-prop-label,
            .e-de-ctnr-segment {
                margin-bottom: 16px;
            }
            .e-de-property-div-padding {
                //padding-bottom: 16px;
                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-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;
        }
    }
    @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;
    }
    .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: 0;
    }
    .e-de-tlbr-wrapper {
        background-color: $de-prpty-btn-bg-clr;
        height: $de-ctnr-tlbr-height;
        width: $de-ctnr-tlbr-width;
    }
    .e-de-ctnr-prop-label {
        color: $de-panel-header-color;
        display: inline-block;
        font-size: $de-panel-header-size;
        font-weight: 500;
        @if $skin-name=='Material3' {
            letter-spacing: 0.3px;
        }
        @else {
            letter-spacing: 0.05px;
        }
        @if $skin-name=='tailwind' {
            line-height: 1.5;
        }
        margin-bottom: $de-ctnr-margin-bottom;
        opacity: 0.87;
    }
    .e-de-table-prop-label {
        margin-left: 12px;
    }
    .e-de-table-prop-label.e-de-rtl {
        margin-left: 0;
        margin-right: 12px;
    }
    .e-de-toolbar.e-toolbar {
        border-radius: 0;
        @if $skin-name =='FluentUI' {
            box-shadow: none;
        }
    }
    .e-de-ctnr-toolbar .e-toolbar-item.e-de-toolbar-btn-first {
        margin-left: 0;
        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: 0;
    }
    .e-bigger .e-de-ctnr-toolbar .e-toolbar-item.e-de-toolbar-btn-first {
        margin-left: 0;
        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: 0;
    }
    .e-de-ctnr-toolbar .e-toolbar-item.e-de-toolbar-btn-last {
        margin-left: $de-tlbr-margin-right;
        margin-right: 0;
    }
    .e-de-ctnr-toolbar.e-de-ctnr-rtl .e-toolbar-item.e-de-toolbar-btn-last {
        margin-left: 0;
        margin-right: $de-tlbr-margin-right;
    }
    .e-bigger .e-de-ctnr-toolbar .e-toolbar-item.e-de-toolbar-btn-last {
        margin-left: $de-tlbr-margin-right-big;
        margin-right: 0;
    }
    .e-bigger .e-de-ctnr-toolbar.e-de-ctnr-rtl .e-toolbar-item.e-de-toolbar-btn-last {
        margin-left: 0;
        margin-right: $de-tlbr-margin-right-big;
    }
    .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: 59px;
            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: 0;
            padding-bottom: $de-toolbar-padding-bottom;
            #{if(&, '&', '*')}:focus {
                padding: 0;
                padding-bottom: $de-toolbar-padding-bottom;
            }
            #{if(&, '&', '*')}:active {
                padding: 0;
                padding-bottom: $de-toolbar-padding-bottom;
            }
            #{if(&, '&', '*')}:hover {
                padding: 0;
                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-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;
            }
        }
    }
    .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text {
        padding: 0;
    }
    .e-de-overlay {
        height: 100%;
        opacity: 0.5;
        pointer-events: none;
        touch-action: none;
        width: 100%;
    }
    @if $skin-name=='bootstrap4' or $skin-name=='bootstrap5' {
        .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;
        }

        .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' {
                        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' {
                        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' {
                            border: 1px;
                        }
                        @if $skin-name!='bootstrap5' {
                            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' {
                    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-bigger {
            .e-de-ctnr-group-btn .e-btn-icon {
                color: $de-prop-btn-icon-clr;
            }
        }
        .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;
            // height: 22px !important;
            // margin-top: $de-pagenumber-text-margin-top !important;
        }

    }
    // .de-split-button>div:first-child {
    //     margin-right: $de-list-button-margin-right;
    // }
    .e-de-ctnr-properties-pane-btn {
        @if $skin-name == 'Material3' {
            width: 78px;
        }
        @else {
            width: 75px;
        }
    }
    .e-de-pane-enable-clr.e-de-ctnr-properties-pane-btn {
        .e-btn {
            color: $de-pane-color-border;
        }
    }
    .e-de-pane-disable-clr.e-de-ctnr-properties-pane-btn {
        .e-btn {
            color: $de-font-color;
        }
    }
    .e-de-ctnr-properties-pane-btn {
        .e-btn {
            background: $de-prpty-btn-bg-clr;
            border-radius: 0;
            box-shadow: none;
            color: $de-pane-color-border;
            min-height: 100%;
            min-width: 100%;
            #{if(&, '&', '*')}:focus {
                box-shadow: none;
            }
            #{if(&, '&', '*')}:active {
                box-shadow: none;
            }
            #{if(&, '&', '*')}:hover {
                box-shadow: none;
            }
        }
    }
    .e-de-showhide-btn {
        border: 0;
        height: $de-ctnr-tlbr-height;
    }
    .e-de-showhide-btn-rtl {
        border: 0;
        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;
        }
    }
    .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: 0;
        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: 0 !important;
        min-height: 16px;
    }
    .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: 100%;
        min-height: 200px;
        overflow: auto;
        width: $de-text-pane-width;
    }
    .e-de-review-pane {
        background: $de-ctnr-prop-bg-clr;
        border-left: 1px solid $de-op-border-clr;
        height: 100%;
        min-height: 200px;
        overflow: auto;
        width: $e-de-review-pane-width;
        @if $skin-name == 'FluentUI' {
            .e-toolbar {
              box-shadow: none;
            }
        }
    }
    .e-bigger {
        .e-de-cntr-pane-padding {
            @if $skin-name=='FluentUI' { 
                padding: 24px;
            }
            @else {
                padding: 16px;
            }
        }
        .e-de-prop-pane {
            height: 100%;
            min-height: 200px;
            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-de-property-div-padding {
        @if $skin-name=='Material3' {
            border-bottom: 1px solid $de-pane-separator;
        }
        @else {
            border-bottom: 0.5px solid $de-pane-separator;
        }
        //padding-bottom: $de-prop-div-padding-bottom;
        padding: $de-prop-div-padding-top;
    }
    .e-de-ctnr-dropdown-ftr {
        border-top: 1px solid $de-pane-separator;
        color: $de-panel-header-color;
        cursor: pointer;
        display: block;
        font-size: 12px;
        line-height: 40px;
        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;
    }
    .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;
        }
    }
    .e-de-panel-right-width {
        width: $de-right-panel-width;
    }
    @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-de-cntr-highlight-pane {
        border: 1px solid $de-panel-border;
    }

    .e-de-btn-hghlclr>button:first-child {
        padding: 1px !important;
    }
    .e-de-ctnr-hglt-color {
        font-size: 12px;
        font-weight: 400;
        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;
        }
    }

    .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-de-floating-menu.e-de-bullets-menu .e-de-floating-menuitem-md {
        height: 55px;
        padding: 4px !important;
        width: 60px;
    }
    .e-de-floating-menu.e-de-bullets-menu .e-de-floating-menuitem-md:hover {
        border: 3px solid $de-list-hover-bg;
        padding: 2px !important;
    }
    .e-de-floating-menu.e-de-bullets-menu .e-de-floating-bullet-menuitem-md {
        height: 38px;
        padding: 4px !important;
        width: 38px;
    }
    .e-de-floating-menu.e-de-bullets-menu .e-de-floating-bullet-menuitem-md:hover {
        border: 3px solid $de-list-hover-bg;
        padding: 2px !important;
    }
    .e-de-list-header-presetmenu {
        cursor: pointer;
        font-size: 11px;
        line-height: 14px;
        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: 14px;
        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: 14px;
            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: 42px;
    }
    .e-de-list-header-presetmenu .e-de-list-line {
        border-bottom: 1px solid $de-prop-btn-icon-clr !important;
        margin-left: 5px;
        width: 100%;
    }
    .e-de-toc-optionsdiv {
        margin-bottom: 11.5px;
        margin-left: 5.5px;
        margin-top: 15.5px;
    }
    .e-de-toc-optionsdiv.e-de-rtl {
        margin-right: 5.5px;
        margin-left: 0;
    }
    .e-de-list-header-presetmenu div span {
        //color: #aaa; 
        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: 70px;
        padding: 0 !important;
        margin: 0 5px 5px 0 !important;
        width: 70px;
    }
    .e-de-list-thumbnail .e-de-list-items {
        float: left;
    }
    .e-de-list-thumbnail .e-de-list-items {
        border: 1px solid $de-list-thmbnail-border-clr;
        @if $skin-name =='Material3' {
            border-radius: 4px;
        }
        clear: initial;
        display: inline-block;
        height: auto;
        margin: 5px;
        padding: 2px;
        text-align: center;
        width: auto;
    }
    .e-de-list-items {
        cursor: pointer;
        background: $de-ctnr-bg-clr;
        box-sizing: border-box;
        list-style: none;
        padding: 7px 10px 7px 10px;
        position: relative;
    }
    .e-de-list-item-size {
        font-size: 14px;
    }
    .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: 3px solid $de-title-bar-bg-clr;
        padding: 2px !important;
    }
    .e-de-floating-menu {
        padding: 10px 4px 5px 10px !important;
    }
    @if $skin-name !='tailwind' {
        .e-de-list-container {
            @if $skin-name !='Material3' {
                border: 1px solid #ccc;
                border-radius: 2px;
                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: 0;
            outline: 0;
			background: $de-ctnr-bg-clr;
            @if $skin-name =='Material3' {
                padding: 10px 0;
            }
            @else {
                padding: 5px 0;
            }
            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: 32px;
    }
    .e-de-img-prty-span {
        color: $de-font-color;
        left: $de-img-span-left;
        position: absolute;
        top: $de-img-span-top;
    }
    .e-btn-toggle {
        background-color: $de-toggle-bg-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 {
            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=='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: 1px solid $de-panel-border;
        color: $de-panel-header-color;
        @if $skin-name=='Material3' {
            height: 130px;
            width: 95px;
            margin-left: 80px;
        }
        @else {
            height: 129px;
            width: 94px;
            margin-left: 78px;
        }
        
        
    }
    .e-de-toc-template1.e-de-rtl {
        margin-left: 0;
        margin-right: 78px;
    }

    .e-de-toc-template1-content1 {
        font-size: 10px;
        @if $skin-name=='Material3' {
            height: 16px;
            margin-left: 8px;
            margin-top: 6px;
        }
        @else {
            height: 11px;
            margin-left: 5.4px;
            margin-top: 6.7px;
        }
        width: $de-toc-template-content1;
    }
    .e-de-toc-template1-content2 {
        font-size: 8px;
        height: 9px;
        @if $skin-name=='Material3' {
            margin-left: 23px;
            margin-top: 6px;
        }
        @else {
            margin-left: 20.4px;
            margin-top: 5.7px;
        }
        width: $de-toc-template-content2;
    }
    .e-de-toc-template1-content3 {
        font-size: 7px;
        height: 8px;
        @if $skin-name=='Material3' {
            margin-left: 30px;
            margin-top: 6px;
        }
        @else {
            margin-left: 28.4px;
            margin-top: 6.7px;
        }
        width: $de-toc-template-content3;
    }
    .e-de-prop-sub-label {
        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: 13px;
        }
        margin-bottom: $de-prop-sub-label-mrgn-btm;
        font-weight: $de-header-font-weight;
    }
    .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 {
        background: $de-ctnr-bg-clr;
        //border-bottom: 1px solid $de-panel-border;
        display: flex;
        @if $skin-name !='Material3' {
            padding-top: $e-de-status-bar-padding-top;
        }
        width: 100%;
    }
    .e-de-ctnr-pg-no {
        color: $de-font-color;
        display: inline-flex;
        font-size: $de-ctnr-pg-no-spellout-fnt-size;
        height: 100%;
        padding-top: $e-de-ctnr-pg-no-spellout-padd-top;

        span {
            border: 1px 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: 100%;
        padding-top: $e-de-ctnr-pg-no-spellout-padd-top;
        width: $de-page-no-width-spellout;

        span {
            border: 1px solid transparent;
        }
    }
    .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: 100%;
        padding-top: $e-de-ctnr-pg-no-spellout-padd-top-big;
        width: $de-page-no-width-spellout-big;
    }
    .e-de-statusbar-zoom-spell {
        @if $skin-name =='Material3' {
            background: $de-ctnr-bg-clr;
        } 
        @else {
            background-color: $de-ctnr-bg-clr;
        }
        border: 0;
        color: $de-font-color;
        float: right;
        height: 34px;
        margin-left: $de-zoom-tlbr-margin-left;
    }
    .e-bigger .e-de-statusbar-zoom-spell {
        @if $skin-name =='Material3' {
            background: $de-ctnr-bg-clr;
        } 
        @else {
            background-color: $de-ctnr-bg-clr;
        }
        border: 0;
        color: $de-font-color;
        float: right;
        height: 34px;
        margin-left: $de-zoom-tlbr-margin-left-big;
    }
    .e-de-btn-cancel {
        margin-left: 10px;
    }
    .e-de-btn-cancel-rtl {
        margin-left: 0;
        margin-right: 10px;
    }
    .e-de-prop-header-label {
        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: 13px;
        }
        font-weight: bold;
        letter-spacing: 0.05px;
        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: 0;
        padding-right: $de-prop-style-padding;
    }
    // .e-de-border-style-div {
    //     margin-left: 12px;
    // }
    // .e-de-border-style-div.e-de-rtl {
    //     margin-left: 0;
    //     margin-right: 12px;
    // }
    // .e-de-insert-del-cell {
    //     margin-left: 12px;
    // }
    // .e-de-insert-del-cell.e-de-rtl {
    //     margin-left: 0;
    //     margin-right: 12px;
    // }
    // .e-de-cell-margin {
    //     margin-left: 12px;
    // }
    // .e-de-align-text {
    //     margin-left: 12px;
    // }
    // .e-de-align-text.e-de-rtl {
    //     margin-left: 0;
    //     margin-right: 12px;
    // }
    .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-div {
    //     margin-left: $de-prop-style-padding;
    // }
    // .e-de-cell-div.e-de-rtl {
    //     margin-left: 0;
    //     margin-right: $de-prop-style-padding;
    // }
    .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: 0;
        }
    }
    .e-de-prop-fill-label {
        //margin-left: 10.3px;
        @if $skin-name =='Material3' {
            margin-right: 16px;
        }
        @else {
            margin-right: 8px;
        }
    }
    .e-de-prop-fill-label.e-de-rtl {
        @if $skin-name =='Material3' {
            margin-left: 16px;
        }
        @else {
            margin-left: 8px;
        }
        margin-right: 0;
    }

    .e-de-grp-btn-ctnr .e-de-ctnr-group-btn {
        height: 36px !important;
    }
    .e-bigger .e-de-grp-btn-ctnr .e-de-ctnr-group-btn {
        height: 42px !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: 38px;
        }   
    }
    .e-bigger .e-de-grp-btn-ctnr .e-de-ctnr-group-btn>button {
        height: 42px;
        width: $de-border-btn-width-big;
    }
    .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=='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-rtl {
        .e-listview .e-list-icon {
            height: 24px;
            width: 16px;
            margin-left: $e-de-ctnr-break-listview-margin-left;
        }
        .e-de-listview-icon {
            height: auto;
            width: auto;
            line-height: 22px;
            margin-left: $e-de-ctnr-break-listview-margin-left;
        }
    }
    .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: 0;
            margin-right: 9.8px;
        }
        .e-de-prop-fill-label.e-de-rtl {
            margin-left: 9.8px;
            margin-right: 0px;
        }
        // .e-de-cell-text-box {
        //     margin-right: 16px;
        // }
        .e-rtl {
            .e-de-cell-text-box {
                margin-left: 16px;
                margin-right: 0;
            }
        }
        .e-de-cell-div {
            //margin-left: 16px;
            @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: 16px;
        }
        .e-de-stylediv-rtl {
            padding-right: 16px;
        }
        .e-de-tool-ctnr-properties-pane {
            display: flex;
            height: $de-tool-ctnr-editor-height-big;
            min-height: 200px;
            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: 1px 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: 0;
        }
        .e-de-pane {
            border-left: 1px solid $de-panel-border;
        }
        .e-de-pane-rtl {
            border-right: 1px 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: 0;
        }
        .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: 500;
            letter-spacing: 0.05px;
            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: 14.5px;
        }
        .e-de-table-prop-label.e-de-rtl {
            margin-left: 0;
            margin-right: 14.5px;
        }
        .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: 0;
                padding-bottom: $de-toolbar-padding-bottom-bg;
                #{if(&, '&', '*')}:focus {
                    padding: 0;
                    padding-bottom: $de-toolbar-padding-bottom-bg;
                }
                #{if(&, '&', '*')}:active {
                    padding: 0;
                    padding-bottom: $de-toolbar-padding-bottom-bg;
                }
                #{if(&, '&', '*')}:hover {
                    padding: 0;
                    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: 0 !important;
        }
        .e-de-overlay {
            height: 100%;
            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: 0;
                box-shadow: none;
                min-height: 100%;
                min-width: 100%;
                #{if(&, '&', '*')}:focus {
                    box-shadow: none;
                }
                #{if(&, '&', '*')}:active {
                    box-shadow: none;
                }
                #{if(&, '&', '*')}:hover {
                    box-shadow: none;
                }
            }
        }
        .e-de-showhide-btn {
            border: 0;
            height: $de-ctnr-tlbt-height-big;
        }
        .e-de-showhide-btn-rtl {
            border: 0;
            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: 12px !important;
            }
            margin: $de-ctrnr-tblr-item-margin-big;
            padding: 0;
            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: 0;
        }
        .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;
            }
        }
        @if $skin-name !='tailwind' {
            .e-de-property-div-padding {
                border-bottom: 0.5px solid $de-pane-separator;
                @if $skin-name =='FluentUI' {
                    padding: 24px;
                }
                @else {
                    padding: 16px;
                }
            }
            .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: 1px solid $de-pane-separator;
            color: $de-panel-header-color;
            cursor: pointer;
            display: block;
            font-size: 12px;
            line-height: 40px;
            text-indent: 1.2em;
        }
        .e-de-char-fmt-btn>button {
            width: 38.5px;
        }
        .e-de-btn-hghlclr>button:first-child {
            padding: 0 6px !important;
        }
        .e-de-ctnr-hglt-color {
            font-size: 12px;
            font-weight: 400;
            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: 32px;
        }
        .e-de-img-prty-span {
            color: $de-font-color;
            left: 10px;
            position: absolute;
            top: $de-img-span-top-big;
        }
        .e-btn-toggle {
            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: 1px solid $de-panel-border;
            color: $de-panel-header-color;
            height: 129px;
            margin-left: 78px;
            width: 94px;
        }
        .e-de-toc-template1-content1 {
            font-size: 10px;
            height: 11px;
            margin-left: 5.4px;
            margin-top: 6.7px;
            width: $de-toc-template-content1;
        }
        .e-de-toc-template1-content2 {
            font-size: 8px;
            height: 9px;
            margin-left: 20.4px;
            margin-top: 5.7px;
            width: $de-toc-template-content2;
        }
        .e-de-toc-template1-content3 {
            font-size: 7px;
            height: 8px;
            margin-left: 28.4px;
            margin-top: 6.7px;
            width: $de-toc-template-content3;
        }
        .e-de-toc-optionsdiv {
            margin-bottom: 11.5px;
            margin-left: 5.5px;
            margin-top: 15.5px;
        }
        .e-de-toc-optionsdiv.e-de-rtl {
            margin-right: 5.5px;
            margin-left: 0;
        }
        @if $skin-name !='tailwind' {
            .e-de-prop-sub-label {
                font-size: 13px;
                margin-bottom: 8.5px;
            }
        }
        .e-de-btn-cancel {
            margin-left: 10px;
        }
        .e-de-status-bar {
            background: $de-ctnr-bg-clr;
            //border-bottom: 1px solid $de-panel-border;
            display: flex;
            @if $skin-name !='Material3' {
                padding-top: $e-de-status-bar-big-padding-top;
            }
            width: 100%;
        }
        .e-de-statusbar-zoom {
            border: 0;
            color: $de-font-color;
            float: right;
            @if $skin-name =='Material3' {
                height: 40px;
                background: $de-ctnr-bg-clr;
            }
            @else {
                height: 34px;
                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: 25px;
                @if $skin-name !='material' {
                    padding: 0 5px !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: 0;
                }
                @if $skin-name == 'material' {
                    height: 6px;
                }
                @if  $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
                    line-height: .5;
                }
                @else {
                    line-height: 0;
                }
                @if $skin-name =='Material3' {
                    line-height: 0.8;
                }
            }
        }
        .e-listview .e-list-icon {
            height: 24px;
            width: 16px;
            margin-right: $e-de-ctnr-break-listview-margin-right-big;
        }
        .e-de-listview-icon {
            height: auto;
            width: auto;
            line-height: 22px;
            margin-right: $e-de-ctnr-break-listview-margin-right-big;
        }
        .e-rtl {
            .e-listview .e-list-icon {
                height: 24px;
                width: 16px;
                margin-left: $e-de-ctnr-break-listview-margin-left-big;
            }
            .e-de-listview-icon {
                height: auto;
                width: auto;
                line-height: 22px;
                margin-left: $e-de-ctnr-break-listview-margin-left-big;
            }
        }
    }
}

.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: 12px;
        }
        @if $skin-name !='bootstrap4' and $skin-name !='bootstrap5' {
            font-weight: 400;
        }
        
        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: 100%;
        }
        @if $skin-name !='fabric'and $skin-name !='material' and $skin-name !='material-dark' {
            color: $e-de-bzr-button-font-color;
        }
    }
    
    @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' {
        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 =='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=='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' {  
                   padding-bottom: 4px !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;
            }
        }
    }
}

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


@include export-module('document-editor-container-bootstrap5-icons') {
  .e-de-ctnr-close::before {
    color: $icon-color;
    content: '\e7e7';
    font-size: 16px;
  }

  .e-de-ctnr-linespacing::before {
    content: '\e78d';
  }

  .e-de-ctnr-undo::before {
    content: '\e713';
  }

  .e-de-ctnr-find::before {
    content: '\e754';
  }

  .e-de-ctnr-lock::before {
    content: '\e7ff';
  }

  .e-de-ctnr-italic::before {
    content: '\e75a';
  }

  .e-de-selected-spellcheck-item::before {
    color: $icon-color;
    content: '\e774';
    font-family: 'e-icons';
    font-size: 10px;
  }

  .e-de-selected-underline-item::before {
    color: $icon-color;
    content: '\e774';
    font-family: 'e-icons';
    font-size: 10px;
  }

  .e-de-ctnr-link::before {
    content: '\e757';
  }

  .e-de-ctnr-table::before {
    content: '\e7d1';
  }

  .e-de-ctnr-download::before {
    color: $icon-color;
    content: '\e7a1';
  }

  .e-de-ctnr-justify::before {
    content: '\e721';
  }

  .e-de-ctnr-tableofcontent::before {
    content: '\e73d';
  }

  .e-de-ctnr-pagenumber::before {
    content: '\e77d';
  }

  .e-de-ctnr-highlight::before {
    content: '\e739';
  }

  .e-de-ctnr-new::before {
    content: '\e805';
  }

  .e-de-ctnr-paste::before {
    content: '\e70b';
  }

  .e-de-ctnr-bold::before {
    content: '\e737';
  }

  .e-de-ctnr-subscript::before {
    content: '\e80a';
  }

  .e-de-ctnr-aligncenter::before {
    content: '\e813';
  }

  .e-de-ctnr-fontcolor::before {
    content: '\e79f';
  }

  .e-de-ctnr-change-case::before {
    content: '\e7f5';
  }

  .e-de-ctnr-pagesetup::before {
    content: '\e794';
  }

  .e-de-ctnr-strokestyle::before {
    content: '\eb62';
  }

  .e-de-ctnr-strikethrough::before {
    content: '\e758';
  }

  .e-de-ctnr-image::before {
    content: '\e786';
  }

  .e-de-ctnr-redo::before {
    content: '\e755';
  }

  .e-de-ctnr-bookmark::before {
    content: '\e750';
  }

  .e-de-ctnr-increaseindent::before {
    content: '\e810';
  }

  .e-de-ctnr-header::before {
    content: '\e704';
  }

  .e-de-ctnr-backgroundcolor::before {
    content: '\eb6b';
  }

  .e-de-ctnr-open::before {
    content: '\e760';
  }

  .e-de-ctnr-underline::before {
    content: '\e82f';
  }

  .e-de-ctnr-superscript::before {
    content: '\e7a7';
  }

  .e-de-ctnr-alignleft::before {
    content: '\e7b8';
  }

  .e-de-ctnr-numbering::before {
    content: '\e7cb';
  }

  .e-de-ctnr-bullets::before {
    content: '\e77e';
  }

  .e-de-ctnr-borders::before {
    content: '\e893';
  }

  .e-de-ctnr-decreaseindent::before {
    content: '\e72a';
  }

  .e-de-ctnr-showhide::before {
    content: '\e71a';
    font-size: 16px;
  }

  .e-de-ctnr-print::before {
    content: '\e75d';
  }

  .e-de-ctnr-alignright::before {
    content: '\e719';
  }

  .e-de-ctnr-footer::before {
    content: '\e7bb';
  }

  .e-de-ctnr-clearall::before {
    content: '\e7cc';
  }

  .e-de-ctnr-outsideborder::before {
    content: '\e7ad';
  }

  .e-de-ctnr-allborders::before {
    content: '\e7d1';
  }

  .e-de-ctnr-insideborders::before {
    content: '\e78f';
  }

  .e-de-ctnr-leftborders::before {
    content: '\e806';
  }

  .e-de-ctnr-insideverticalborder::before {
    content: '\e792';
  }

  .e-de-ctnr-rightborder::before {
    content: '\e7ab';
  }

  .e-de-ctnr-topborder::before {
    content: '\e7e0';
  }

  .e-de-ctnr-insidehorizondalborder::before {
    content: '\e83b';
  }

  .e-de-ctnr-bottomborder::before {
    content: '\e766';
  }

  .e-de-ctnr-strokesize::before {
    content: '\e7bf';
  }

  .e-de-ctnr-highlightcolor::before {
    content: '\e739';
  }

  .e-de-ctnr-mergecell::before {
    content: '\e71e';
  }

  .e-de-ctnr-insertleft::before {
    content: '\e78b';
  }

  .e-de-ctnr-insertright::before {
    content: '\e70e';
  }

  .e-de-ctnr-insertabove::before {
    content: '\e836';
  }

  .e-de-ctnr-insertbelow::before {
    content: '\e801';
  }

  .e-de-ctnr-deleterows::before {
    content: '\e7f2';
  }

  .e-de-ctnr-deletecolumns::before {
    content: '\e714';
  }

  .e-de-ctnr-aligntop::before {
    content: '\e707';
  }

  .e-de-ctnr-alignbottom::before {
    content: '\e7a0';
  }

  .e-de-ctnr-aligncenter-table::before {
    content: '\e74f';
  }

  .e-de-ctnr-cellbg-clr-picker::before {
    content: '\e783';
  }

  .e-de-ctnr-bullet-none::before {
    color: $icon-color;
    content: '\e7f3';
    font-size: 20px;
    line-height: 28px;
  }

  .e-de-ctnr-bullet-dot::before {
    color: $icon-color;
    content: '\e747';
    font-size: 8px;
    line-height: 28px;
  }

  .e-de-ctnr-bullet-circle::before {
    color: $icon-color;
    content: '\e7d0';
    font-size: 8px;
    line-height: 28px;
  }

  .e-de-ctnr-bullet-square::before {
    color: $icon-color;
    content: '\e7be';
    font-size: 8px;
    line-height: 28px;
  }

  .e-de-ctnr-bullet-flower::before {
    color: $icon-color;
    content: '\e79b';
    line-height: 28px;
  }

  .e-de-ctnr-bullet-arrow::before {
    color: $icon-color;
    content: '\e763';
    line-height: 28px;
  }

  .e-de-ctnr-bullet-tick::before {
    color: $icon-color;
    content: '\e7fc';
    line-height: 28px;
  }

  .e-de-selected-item::before {
    color: $icon-color;
    content: '\e774';
  }

  .e-de-ctnr-break::before {
    content: '\e7bc';
  }

  .e-de-ctnr-page-break::before {
    content: '\e742';
  }

  .e-de-ctnr-section-break::before {
    content: '\e762';
  }

  .e-de-ctnr-upload::before {
    color: $icon-color;
    content: '\e712';
  }

  .e-de-flip {
    transform: scaleX(-1);
  }

  .e-de-cnt-cmt-add::before {
    content: '\e82c';
  }

  .e-de-cnt-track::before {
    content: '\e80b';
  }

  .e-de-printlayout::before {
    content: '\e73a';
  }

  .e-de-weblayout::before {
    content: '\e7d3';
  }

  .e-de-textform::before {
    color: $icon-color;
    content: '\e830';
    font-family: 'e-icons';
  }

  .e-de-formproperties::before {
    color: $icon-color;
    content: '\e83e';
    font-family: 'e-icons';
  }

  .e-de-clearform::before {
    color: $icon-color;
    content: '\e7f8';
    font-family: 'e-icons';
  }

  .e-de-dropdownform::before {
    color: $icon-color;
    content: '\e7a6';
    font-family: 'e-icons';
  }

  .e-de-formfield::before {
    content: '\e7cd';
    font-family: 'e-icons';
  }

  .e-de-checkbox-form::before {
    color: $icon-color;
    content: '\e7e4';
    font-family: 'e-icons';
  }

  .e-de-arrow-up::before {
    content: '\e776';
    font-family: 'e-icons';
  }

  .e-de-arrow-down::before {
    content: '\e729';
    font-family: 'e-icons';
  }

  .e-de-update-field::before {
    content: '\e828';
    font-family: 'e-icons';
  }

  .e-de-footnote::before {
    content: '\e7af';
    font-family: 'e-icons';
  }

  .e-de-endnote::before {
    content: '\e7af';
    font-family: 'e-icons';
  }

  .e-de-e-paragraph-mark::before{
    content: '\e844';
    font-family: 'e-icons';
  }

  .e-de-e-paragraph-style-mark::before{
    content: '\e844';
    font-family: 'e-icons';
  }

  .e-de-e-character-style-mark::before{
    content: '\e8bf';
    font-family: 'e-icons';
  }

  .e-de-e-linked-style-mark::before{
    content: '\e8c0';
    font-family: 'e-icons';
  }
  
  .e-de-ctnr-columns::before {
    content: '\e8b4';
    font-family: 'e-icons';
  }

  .e-de-ctnr-page-size::before {
    content: '\e89a';
    font-family: 'e-icons';
  }

  .e-de-ctnr-page-break-column::before {
    content: '\e8b6';
    font-family: 'e-icons';
  }

  .e-de-ctnr-page-break-text-wrapping::before {
    content: '\e89d';
    font-family: 'e-icons';
  }

  .e-de-ctnr-section-break-continuous::before {
    content: '\e8b5';
    font-family: 'e-icons';
  }
  
  .e-de-ctnr-section-break-even-page::before {
    content: '\e8b2';
    font-family: 'e-icons';
  }

  .e-de-ctnr-section-break-odd-page::before {
    content: '\e8b3';
    font-family: 'e-icons';
  }

  
  .e-de-ctnr-columns-one::before {
    content: '\e8b9';
    font-family: 'e-icons';
    font-size: $de-column-presets-font-size;
  }

  .e-de-ctnr-columns-two::before {
    content: '\e8ba';
    font-family: 'e-icons';
    font-size: $de-column-presets-font-size;
  }

  .e-de-ctnr-columns-three::before {
    content: '\e8bb';
    font-family: 'e-icons';
    font-size: $de-column-presets-font-size;
  }

  .e-de-ctnr-columns-right::before {
    content: '\e8b7';
    font-family: 'e-icons';
    font-size: $de-column-presets-font-size;
  }

  .e-de-ctnr-columns-left::before {
    content: '\e8b8';
    font-family: 'e-icons';
    font-size: $de-column-presets-font-size;
  }
}

//Layout Variables Start
$splitpane-font-size: $text-sm !default;
$splitpane-font-weight: $font-weight-normal !default;
$splitpane-font-family: $font-family !default;
$splitbar-icon-size: 14px !default;
$splitbar-icon-gap: 18px !default;
$bigger-splitbar-icon-gap: 20px !default;
$bigger-splitpane-font-size: $text-base !default;
$bigger-splitbar-icon-size: 16px !default;

//Layout Variables End

//Theme Variables Start
$navigation-arrow-background: $transparent !default;
$navigation-icon-background-hover: $primary !default;
$navigation-icon-border-hover: $primary !default;
$splitter-border-color: $border-light !default;
$splitter-background-color: $primary-text-color !default;
$splitpane-font-color: $content-text-color !default;
$splitbar-border-color: $border-light !default;
$splitbar-hover-border-color: $primary !default;
$resize-icon-hover-color: $splitbar-hover-border-color !default;
$splitbar-icon-color: $icon-color !default;
$collapse-icon-bg-color: $primary-text-color !default;
$resize-icon-bg-color: $content-bg-color !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;

//Theme Variables End

@include export-module('splitter-layout') {
  .e-splitter {

    &.e-splitter-horizontal,
    &.e-splitter-vertical {
      border-width: 1px;
      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-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: 50%;
                bottom: 20px;
                right: 22px;
              }

              &.e-arrow-down {
                border-radius: 50%;
                left: 22px;
                right: auto;
                top: 20px;

                &::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: 100%;
          position: absolute;
          width: 16px;
          z-index: 10;
        }

        .e-resize-handler {
          align-items: center;
          display: flex;
          height: $splitbar-icon-gap;
          justify-content: center;
          position: relative;
          width: 1px;

          &.e-hide-handler {
            visibility: hidden;
          }
        }

        // icons hovering and avtive state effect for horizontal mode of orientation
        .e-navigate-arrow:not(.e-arrow-right)::before,
        .e-navigate-arrow:not(.e-arrow-right)::after {
          left: 8px;
          right: 3px;
        }

        .e-navigate-arrow {
          border-image: none;
          border-width: 1px;
          cursor: pointer;
          display: flex;
          height: 26px;
          padding: 1px 12px;
          position: relative;

          &::before,
          &::after {
            border-radius: 16px;
            content: '';
            height: 8px;
            position: absolute;
            transform: rotate(0deg);
            width: 2px;
          }

          &::before {
            top: 5px;
            transform-origin: 1px 7px 0;
          }

          &::after {
            top: 11px;
            transform-origin: 1px 1px 0;
          }

          &:not(.e-arrow-right) {
            border-radius: 50%;
            right: 5px;
          }

          &.e-arrow-right {
            border-radius: 50%;
            left: 5px;
          }

          &.e-arrow-right::before,
          &.e-arrow-right::after {
            right: 8px;
          }
        }

        &.e-last-bar:not(.e-resizable-split-bar) {
          margin: 0 3px;
        }

        &:not(.e-resizable-split-bar) {
          margin: 0 0 0 3px;
        }
      }

      &.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: 16px;
          position: absolute;
          width: 100%;
          z-index: 12;
        }

        .e-resize-handler {
          align-items: center;
          display: flex;
          height: 1px;
          justify-content: center;
          width: $splitbar-icon-gap;

          &.e-hide-handler {
            visibility: hidden;
          }
        }

        // icons hovering and avtive state effect for vertical mode of orientation
        .e-navigate-arrow:not(.e-arrow-down)::before,
        .e-navigate-arrow:not(.e-arrow-down)::after {
          left: 10px;
        }

        .e-navigate-arrow {
          border-image: none;
          border-width: 0;
          cursor: pointer;
          display: flex;
          height: 26px;
          padding: 10px 3px 10px 18px;
          position: relative;
          width: 26px;

          &::before,
          &::after {
            border-radius: 16px;
            content: '';
            height: 8px;
            position: absolute;
            transform: rotate(90deg);
            width: 2px;
          }

          &:not(.e-arrow-down) {
            &::before {
              top: 3px;
              transform-origin: 2px 7px 0;
            }
          }

          &:not(.e-arrow-down) {
            &::after {
              left: 11px;
              top: 8px;
              transform-origin: 1px 1px 0;
            }
          }

          &.e-arrow-down {
            &::before {
              left: 12px;
              top: 8px;
              transform-origin: 1px 6px 0;
            }
          }

          &.e-arrow-down {
            &::after {
              left: 10px;
              top: 12px;
              transform-origin: 1px 2px 0;
            }
          }

          &:not(.e-arrow-down) {
            border-radius: 50%;
            bottom: 20px;
            left: 22px;
          }

          &.e-arrow-down {
            border-radius: 50%;
            right: 22px;
            top: 20px;
          }

          &.e-arrow-down::before,
          &.e-arrow-down::after {
            right: 10px;
          }
        }

        &.e-last-bar:not(.e-resizable-split-bar) {
          margin: 3px 0;
        }

        &:not(.e-resizable-split-bar) {
          margin: 3px 0 0;
        }
      }
    }
  }

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

      &.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: -2px;
        }

        .e-navigate-arrow {
          &.e-arrow-down::after {
            margin-top: 2px;
          }
        }
      }
    }
  }

  .e-rtl .e-splitter {
    &.e-splitter-horizontal {
      flex-direction: row-reverse;
    }
  }

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

      &.e-split-bar-vertical {
        .e-resize-handler {
          width: $bigger-splitbar-icon-gap;
        }
      }
    }
  }

  .e-content-placeholder.e-splitter.e-placeholder-splitter {
    background-size: 100px 110px;
    min-height: 110px;
  }

  .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-splitter.e-ie .e-navigate-arrow.e-arrow-left {
    margin-left: -26px;
  }

  .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 1px $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: 1px;
              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);
            }
          }
        }

        // left-arrow hover/active styles
        &.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: 1px;
              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-material-icons') {
  .e-splitter {
    .e-split-bar {
      &.e-split-bar-horizontal {
        .e-resize-handler::before {
          content: '\e7e3';
          font-family: 'e-icons';
          font-size: $splitbar-icon-size;
        }
      }

      &.e-split-bar-vertical {
        & .e-resize-handler::before {
          content: '\e7fd';
          font-family: 'e-icons';
          font-size: $splitbar-icon-size;
        }
      }
    }
  }

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

$grid-column-chosser-searchdiv-opactiy: .6 !default;
$grid-column-chosser-searchdiv-fopactiy: 1 !default;
$grid-columnchooser-search-border-color: $border-light !default;
$grid-columnchooser-search-border-fcolor: $primary !default;
$grid-columnchooser-footer-border-opacity: 1 !default;
$grid-columnchooser-cancel-icon-content-f-opactiy: 1 !default;
$grid-column-chooser-dlg-footer-padding: 8px !default;
$grid-xl-match-margin-left: 6px !default;
$grid-bigger-xl-match-margin-left: 8px !default;
$grid-xl-rtl-radio-padding-left: 0 !default;
$grid-xl-rtl-radio-padding-right: 25px !default;
$grid-columnchooser-footer-border-color: rgba($content-text-color-alt1, .12) !default;
$grid-column-chooser-searchdiv: 1px !default;
$grid-bigger-cc-checkbox-padding-left: 8px !default;
$grid-bigger-searchdiv-padding-left: 4px !default;
$grid-cc-checkbox-padding-left: 8px !default;
$grid-edit-checkbox-bigger-padding-left: 8px !default;
$grid-edit-checkbox-bigger-padding-top: 8px !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: $font-icon-13 !default;
$grid-xlfl-dlgfields-font-size: $font-icon-15 !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: $text-base !default;
$grid-bigger-xlfl-dlgfields-font-size: $text-lg !default;
$grid-bigger-xlfltd-radio-mtcase-padding: 10px !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: 10px !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-rtl-textwrap-column-menu-margin: -17px -13px -23px -25px !default;
$grid-bigger-checkbox-padding-topbottom: 9px !default;
$grid-column-chooser-footdiv: 1px 0 0 !default;
$grid-checkbox-padding-topbottom: 8px !default;
$grid-checkbox-content-padding-left: 6px !default;
$grid-rtl-checkbox-content-padding-left: 14px !default;
$grid-bigger-checkbox-content-padding-left: 7px !default;
$grid-rtl-bigger-checkbox-content-padding-left: 16px !default;
$grid-autofill-color: $primary !default;
$grid-filtered-color: $primary !default;
$sfgrid-xlfl-dlg-padding: 14px !default;
$grid-excel-filter-separator: 0 !default;
$grid-dialog-footer-color: $flyout-bg-color !default;
$grid-xlfl-dlg-content-top-padding: 12px !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: 13px !default;
$grid-bigger-xlfl-li-icon-margin-arrow-icon: 6.2px !default;
$grid-xl-radio-margin-top: 0 !default;
$grid-xlfl-skin: 'bootstrap5' !default;

@include export-module('excel-filter-layout') {

  /*! Excel-Filter layout */
  .sf-grid .e-excelfilter {
    .e-dlg-content {
      overflow: visible;
      padding: 0;
    }

    .e-searchcontainer {
      padding: $sfgrid-xlfl-dlg-padding;
      padding-top: 4px;
    }

    .e-contextmenu-container.e-sfcontextmenu .e-ul .e-menu-item .e-menu-icon {
      height: 26px;
      line-height: 26px;
    }

    .e-contextmenu-container.e-sfcontextmenu .e-ul .e-menu-item:not(.e-separator) {
      height: 26px;
      line-height: 26px;
    }

    .e-searchbox {
      padding-left: 0;
    }

    .e-contextmenu-container.e-sfcontextmenu .e-ul .e-separator {
      height: auto;
    }

    .e-contextmenu-container.e-sfcontextmenu .e-ul {
      position: absolute;
    }

    .e-contextmenu-container.e-sfcontextmenu {
      display: inline-block;
      position: relative;
      width: 100%;
    }
  }

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

    .e-xlfl-fieldset {
      font-size: $grid-xlfl-fieldset-font-size;
      padding-top: $grid-xlfl-fieldset-padding;
    }

    .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;
      padding-left: $grid-xl-radio-padding-left;
      padding-right: $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;
      }

      .e-frame {
        margin-bottom: 1px;
      }
    }

    .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 {
      padding-left: $grid-xlfl-dropdown-padding-right;
      padding-right: 0;
    }

    .e-radio + label .e-label {
      padding-left: $grid-xl-rtl-radio-padding-left;
      padding-right: $grid-xl-rtl-radio-padding-right;
    }

    .e-xlfl-radio-or {
      margin-left: 0;
      margin-right: 13px;
    }
  }

  .e-bigger #{&}.e-xlflmenu.e-rtl {
    .e-radio + label .e-label {
      padding-left: $grid-xl-rtl-radio-padding-left;
      padding-right: $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 {
      @if $grid-xlfl-skin == 'material3' {
        padding-top: 24px;
      }
    }

    .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 {
      padding-left: $grid-bigger-xl-radio-padding-left;
      padding-right: $grid-bigger-xl-radio-padding-right;
    }

    .e-checkbox-wrapper .e-frame + .e-label {
      margin-left: $grid-bigger-xl-match-margin-left;
    }

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

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

    .e-contextmenu-wrapper ul li,
    .e-contextmenu-container ul li {
      height: $grid-bigger-xlfl-li-height;
      line-height: $grid-bigger-xlfl-li-height;
    }

    .e-contextmenu-wrapper ul li .e-menu-icon,
    .e-contextmenu-container ul li .e-menu-icon {
      height: $grid-bigger-xlfl-li-height;
      line-height: $grid-bigger-xlfl-li-height;
      margin-right: $grid-bigger-xlfl-li-icon-margin-right;
    }

    .e-contextmenu-wrapper ul .e-menu-item .e-caret {
      height: $grid-bigger-xlfl-li-height;
      line-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;
      }
    }

    &.e-rtl .e-contextmenu-wrapper ul .e-menu-item .e-caret {
      margin-left: $grid-bigger-xlfl-li-icon-margin-arrow-icon;
    }

    &.e-dialog .e-dlg-content {
      padding-left: $grid-bigger-checkbox-content-padding-left;
    }

    .e-ftrchk,
    .e-searchbox {
      padding-left: $grid-bigger-checkbox-padding-topbottom;
    }

    &.e-rtl {
      .e-dlg-content {
        padding-left: $grid-rtl-bigger-checkbox-content-padding-left;
        padding-right: $grid-bigger-checkbox-content-padding-left;
      }

      .e-ftrchk,
      .e-searchbox {
        padding-left: 0;
        padding-right: $grid-bigger-checkbox-padding-topbottom;
      }
    }
  }

  #{&}.e-excelfilter {
    .e-checkboxlist {
      height: 200px;
      margin-top: 5px;
      min-height: 160px;
      overflow-y: auto;
    }

    .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,
    .e-contextmenu-wrapper ul {
      display: block;
    }

    .e-contextmenu-wrapper ul {
      padding-bottom: 4px;
      position: static;
    }

    .e-contextmenu-wrapper ul li,
    .e-contextmenu-container ul li {
      height: $grid-xlfl-li-height;
      line-height: $grid-xlfl-li-height;
    }

    .e-contextmenu-wrapper ul li .e-menu-icon,
    .e-contextmenu-container ul li .e-menu-icon {
      height: $grid-xlfl-li-height;
      line-height: $grid-xlfl-li-height;
      margin-right: $grid-xlfl-li-icon-margin-right;
    }

    &.e-rtl .e-contextmenu-wrapper ul li .e-menu-icon {
      margin-right: 0;
    }

    .e-contextmenu-wrapper ul .e-menu-item .e-caret {
      height: $grid-xlfl-li-height;
      line-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;
      padding-bottom: 4px;
      position: static;
    }

    .e-footer-content {
      border-style: solid;
      border-width: $grid-column-chooser-footdiv;
    }

    .e-excel-menu {
      z-index: 1000;
    }

    .e-dlg-content {
      @if $grid-xlfl-skin == 'material3' {
        background: $grid-dialog-footer-color;
      }
      @else {
        background-color: $grid-dialog-footer-color;
      }
      padding-top: 0;
    }

    .e-contextmenu-wrapper,
    .e-contextmenu-wrapper ul {
      display: block;
    }

    .e-contextmenu-wrapper ul {
      padding-bottom: 4px;
      position: static;
    }

    .e-contextmenu-wrapper ul li .e-contextmenu-container ul li {
      height: $grid-xlfl-li-height;
      line-height: $grid-xlfl-li-height;
    }

    .e-contextmenu-wrapper ul li .e-menu-icon,
    .e-contextmenu-container ul li .e-menu-icon {
      height: $grid-xlfl-li-height;
      line-height: $grid-xlfl-li-height;
      margin-right: $grid-xlfl-li-icon-margin-right;
    }

    &.e-rtl .e-contextmenu-wrapper ul li .e-menu-icon {
      margin-right: 0;
    }

    .e-contextmenu-wrapper ul .e-menu-item .e-caret {
      height: $grid-xlfl-li-height;
      line-height: $grid-xlfl-li-height;
      margin-right: $grid-xlfl-li-icon-margin-arrow-icon;
    }

    &.e-rtl .e-contextmenu-wrapper ul .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;
    }

    .e-excel-menu {
      z-index: 1000;
    }

    .e-dlg-content {
      padding-top: $grid-xlfl-dlg-content-top-padding;
    }

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

    .e-ftrchk,
    .e-searchbox {
      padding-left: $grid-checkbox-padding-topbottom;
    }

    &.e-rtl {
      .e-dlg-content {
        padding-left: $grid-rtl-checkbox-content-padding-left;
        padding-right: $grid-checkbox-content-padding-left;
      }

      .e-ftrchk,
      .e-searchbox {
        padding-left: 0;
        padding-right: $grid-checkbox-padding-topbottom;
      }
    }

    .e-searchbox {
      display: block;
    }
  }

  .e-ftrchk {
    padding-bottom: $grid-checkbox-padding-topbottom;
    padding-top: $grid-checkbox-padding-topbottom;
  }
}

.e-excel-menu.e-contextmenu.e-menu-parent {
  max-height: $grid-exlfltr-ctxtmnu-max-height;
  overflow-y: auto;
}

.e-bigger .e-excel-menu.e-contextmenu.e-menu-parent {
  max-height: $grid-bigger-exlfltr-ctxtmnu-max-height;
}


@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-dlg-content {
      padding-bottom: $grid-excel-filter-bottom-padding;
      @if $grid-xlfl-skin == 'material3' {
        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;
  }
}


@include export-module('excel-filter-bootstrap5-icons') {

  /*! component icons */

  .e-icon-check::before {
    content: '\e774';
  }

  #{&}.e-excelfilter {
    .e-icon-filter::before {
      content: '\e7f7';
    }

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

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

    .e-search-icon::before {
      content: '\e754';
    }

    .e-ccsearch-icon::before {
      content: '\e754';
    }

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

    .e-sortascending::before {
      content: '\e7a3';
    }

    .e-sortdescending::before {
      content: '\e7b6';
    }
  }
}

$grid-content-padding: 6px !default;
$grid-headecell-height: 32px !default;
$grid-font-size: $text-sm !default;
$grid-icon-color: $icon-color !default;
$grid-command-icon-color: $icon-color !default;
$grid-border-type: solid !default;
$grid-vertical-border-size: 1px !default;
$grid-horizontal-border-size: 1px !default;
$grid-font-family: $font-family !default;
$grid-maskedcell-virtual-background-color: rgba(0, 0, 0, .1) !default;
$grid-frozen-shadow-background-color: rgba(0, 0, 0, .12) !default;
$grid-frozen-row-shadow-background-color: rgba(0, 0, 0, .12) !default;

$grid-header-font-size: $text-sm !default;
$grid-bigger-header-font-size: $text-base !default;
$grid-header-icon-color: $icon-color !default;
$grid-sorted-header-color: $content-text-color !default;

$grid-popup-bg-color: $content-bg-color !default;

$grid-sortnumber-bg-color: $content-bg-color-alt3 !default;
$grid-sortnumber-color: $content-text-color-alt2 !default;
$grid-table-background-color: $content-bg-color !default;

$grid-row-selection-color: $icon-color-pressed !default;
$grid-cell-selection-color: $content-bg-color-selected !default;

$grid-drag-clone-color: $content-text-color-alt1 !default;

$group-droparea-hover-color: $black !default;

$grid-group-broder-color:  $border-light !default;
$grid-group-hover-broder-color: $border-hover !default;
$grid-group-text-line-height: 22px !default;
$grid-wrap-line-height: 3px !default;
$grid-wrap-margin-bottom: 2px !default;
$grid-wrap-margin-top: 0 !default;

$grid-header-bottom-padding: 8px !default;
$grid-header-top-padding: 8px !default;
$grid-headerconent-font-opacity: 1 !default;
$grid-conent-font-opacity: 1 !default;
$grid-filtercell-line-height: 27px !default;
$grid-group-captioncell-line-height: 22px !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: 18px !default;
$grid-bigger-headercelldiv-line-height: 20px !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-textwrap-srotnumber-rightalign-margin: 5px 2px 0 10px !default;
$grid-textwrap-srotnumber-margin: 5px 5px 0 2px !default;
$grid-textwrap-sorticon-margin: -9px 10px !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: 1px 0 0 !default;
$grid-column-chosser-searchdiv-opactiy: .6 !default;
$grid-column-chosser-searchdiv-fopactiy: 1 !default;
$grid-columnchooser-search-border-color: $border-light !default;
$grid-columnchooser-search-border-fcolor: $border-focus !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: $font-icon-15 !default;
$grid-columnchooser-btn-font-size: $text-sm !default;
$grid-columnchooser-toolbardiv-padding: 3px !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: 6px !default;
$grid-column-chooser-search-icon-padding: 6px 5px !default;
$grid-column-chooser-cancel-icon-padding: 5px 5px 6px !default;
$grid-columnchooser-input-padding-bottom: 6px !default;
$grid-columnchooser-input-padding-left: 4px !default;
$grid-columnchooser-ul-margin: 13px 0 !default;
$grid-column-chooser-dlg-footer-padding: 8px !default;
$grid-rtl-bigger-sortnumber-margin: 4px 0 0 -20px !default;
$grid-rtl-bigger-sortnumber-withfilter-margin: 2px 0 0 4px !default;
$grid-rtl-bigger-rightalign-sortnumber-margin: 3px 0 0 8px !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 2px !default;
$grid-rtl-headercell-both-border-width:  0 1px 0 0 !default;
$grid-rtl-textwrap-srotnumber-rightalign-margin: 3px 5px 0 2px !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: 10px !default;
$grid-bigger-grightarrow-icon-font-size: $text-base !default;
$group-bigger-sorticon-margin-right: 0 !default;
$grid-bigger-groupdroparea-padding: 15px 15px !default;
$grid-bigger-group-headercell-height: 38px !default;
$grid-bigger-ungroup-button-font-size: $font-icon-22 !default;
$grid-bigger-group-text-line-height: 24px !default;
$grid-bigger-groupcaption-line-height: 20px !default;
$grid-bigger-rtl-group-headercell-margin: 8px 8px 0 0 !default;
$grid-bigger-rtl-group-headercell-padding: 7px 6px 7px 9px !default;
$grid-bigger-device-rtl-group-headercell-padding: 7px 6px 7px 9px !default;
$grid-bigger-rtl-ungroup-icon-margin-right: -10px !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: 8px 0 !default;
$grid-bigger-columnchooser-toolbar-div-margin-top: 0 !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: 21px !default;
$grid-touch-device-hdrcell-ungroup-line-height: 20px !default;
$grid-device-groupsort-margin-top: 0;
$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: 3px solid !default;
$grid-fltrdiv-float: right !default;
$grid-fltrdiv-text-align: right !default;
$grid-fltrdiv-padding: 2px !default;
$grid-rtl-fltrdiv-padding: 2px !default;
$grid-flmenu-padding: 14px 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: -2px !default;
$grid-rtl-headercelldiv-fltricon-padding: 0 1.6em 0 10px !default;
$grid-sortnumber-filtericon-rightalign-margin: 8px 2px 0 5px !default;
$grid-xl-match-margin-left: 6px !default;
$grid-bigger-xl-match-margin-left: 8px !default;
$grid-rows-bg-color: $content-bg-color !default;
$grid-resize-border-width: 1px !default;
$grid-xl-rtl-radio-padding-left: 0 !default;
$grid-xl-rtl-radio-padding-right: 25px !default;
$grid-filterbarcell-input-padding: 0 26px 0 10px !default;
$grid-icon-default-color: $grid-icon-color !default;
$grid-resize-helper-color: $border-dark !default;
$grid-header-first-last-cell-padding: 8px !default;
$grid-header-bg-color: $content-bg-color !default;
$grid-header-color: $content-text-color !default;
$grid-headercell-both-border-width: 0 0 0 1px !default;
$grid-headercelldiv-margin: -7px -7px -7px -8px !default;
$grid-icon-font-size: 14px !default;
$grid-border-size: 1px !default;
$grid-header-padding: 8px !default;
$grid-header-wrap-sortfilter-div-margin: -20px 3px !default;
$grid-rtl-textwrap-sorticon-margin: -30px 5px !default;
$grid-rtl-textwrap-sorticon-rightalign-margin: -30px 17px !default;
$grid-headercelldiv-right-align-padding: 0 8px 0 20px !default;
$grid-headercell-line-height: 34px !default;
$grid-header-font-weight: $font-weight-bold !default;
$grid-filtercell-both-border-width: 1px 0 0 1px !default;
$grid-header-border-color: $border-light !default;
$grid-rowcell-line-height: 22px !default;
$grid-rowcell-autofill-top-line-height: 20px !default;
$grid-rowcell-autofill-top-bottom-line-height: 18px !default;
$grid-content-font-color: $content-text-color !default;
$grid-hover-content-font-color: $content-text-color-hover !default;
$grid-cell-border-color: $border-light !default;
$grid-content-bg-color: $content-bg-color !default;
$grid-row-selection-bg-color: $table-bg-color-selected !default;
$grid-cell-selection-bg-color: $table-bg-color-selected !default;
$grid-hover-bg-color: $table-bg-color-hover !default;
$grid-content-font-size: $text-sm !default;
$grid-header-height: 18px !default;
$grid-bigger-header-height: 20px !default;
$grid-rowcell-broder-width: 1px 0 0 !default;
$grid-content-right-padding: 8px !default;
$grid-first-last-rowcell-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: $text-sm !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: $text-base !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 !default;
$grid-responsive-toolbar-search-clear-icon-font-size: $text-base !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: $text-base !default;
$grid-res-toolbar-search-icon-font-size: 16px !default;
$grid-res-toolbar-search-wrapper-padding: 5px 25px 5px 0 !default;
$grid-res-toolbar-search-icon-padding-left: 0 !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: 1.2px !default;
$grid-bigger-command-column-padding-top: 1.2px !default;
$grid-summary-cell-font-size: $text-sm !default;
$grid-filterbarcell-border-width: 1px 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: 1px !default;
$grid-bottom-border-size: 1px !default;
$group-droparea-bg-color: $content-bg-color-alt1 !default;
$group-header-bg-color: $content-bg-color-alt3 !default;
$group-row-bg-color: $content-bg-color-alt1 !default;
$grid-summary-template-row-bg-color: '' !default;
$grid-summary-row-bg-color: $content-bg-color-alt1 !default;
$grid-sortdiv-width: 18px !default;
$grid-sortdiv-height: 18px !default;
$grid-sortnumber-margin: 2px 10px 1px 8px !default;
$grid-fltr-sortnumber-margin: 2px 8px 1px 8px !default;
$grid-fltr-sortnumber-rightalign-margin: 2px 8px 0 10px !default;
$grid-sortnumber-rightalign-margin: 2px 8px 0 10px !default;
$grid-sortnumer-line-height: 14px !default;
$grid-bigger-sortnumer-line-height: 16px !default;
$grid-sortdiv-right-align-margin: -10px 8px -12px -2px !default;
$grid-sortdiv-margin:  -10px -2px -12px 8px !default;
$grid-sortdiv-padding: 2px !default;
$grid-ungroup-button-line-height: 20px !default;
$grid-ungroup-button-font-size: $text-sm !default;
$grid-grouparea-first-cell-margin: 0 6px 0 12px !default;
$grid-grouparea-font-size: $grid-content-font-size !default;
$grid-grouparea-margin: 4px 0 0 5px !default;
$grid-group-headercell-line-height: 25px !default;
$grid-grouped-headercell-padding: 5px 0 !default;
$grid-grouped-headercell-span-padding: 0 8px !default;
$grid-group-unpgroupicon-padding-right: 8px !default;
$group-droparea-hover-bg-color: $content-bg-color !default;
$group-header-hover-bg-color: $border-light !default;
$grid-grouped-padding: 0 0 4px !default;
$group-area-padding: 9px 0 !default;
$grid-grouptext-margin-right: 0 !default;
$group-header-color: $content-text-color-alt1 !default;
$group-grouped-droparea-bg-color: $content-bg-color !default;
$group-border-width: 1px !default;
$grouped-text-font-size: $text-sm !default;
$group-header-border-radius: 0 !default;
$grid-hover-icon-color: $icon-color-hover !default;
$grid-headecell-span-height: 22px !default;
$grid-drag-clone-opacity: 1 !default;
$grouped-droparea-bg-color: $content-bg-color-alt1 !default;
$grid-drag-clone-border-color: $border-light !default;
$grid-drag-clone-bg-color: $content-bg-color-alt3 !default;
$group-caption-font-color: $content-text-color-alt1 !default;
$grid-group-down-arrow-icon-font-size: $text-sm !default;
$grid-group-down-arrow-icon-padding: 12px 7px 11px 8px !default;
$group-expand-icon-text-indent: 11px !default;
$group-droparea-color: $content-text-color-alt3 !default;
$group-sorticon-font-size: $text-sm !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: $text-sm !default;
$grid-group-right-arrow-icon-padding: 11px 7px 12px 8px !default;
$grid-group-unpgroupicon-padding-top: 2px !default;
$grid-summary-cell-line-height: 14px !default;
$grid-batch-updated-bg-color: $success-light !default;
$grid-val-error-color: $danger !default;
$grid-val-error-bg-color: $danger-light !default;
$grid-edit-input-padding-bottom: 1px !default;
$grid-edit-input-padding-top: 2px !default;
$grid-edit-input-margin: 1px !default;
$grid-edit-cell-padding: 2px !default;
$grid-group-height: 36px !default;
$grid-ungroup-rtl-padding-top: 2px !default;
$grid-bigger-ungroup-rtl-padding-top: $grid-ungroup-rtl-padding-top !default;
$grid-rtl-group-headercell-margin-right: 5px !default;
$grid-rtl-group-headercell-margin-left: 0 !default;
$grid-fltr-rtl-sortnumber-margin: 1px 0 0 12px !default;
$grid-rtl-sortnumber-margin: 1px 0 0 -10px !default;
$grid-fltr-rtl-sortnumber-rightalign-margin: 1px 0 0 12px !default;
$grid-rtl-sortnumber-rightalign-margin: 1px 0 0 10px !default;
$grid-rtl-sortcelldiv-margin: -10px 8px -12px -2px !default;
$grid-rtl-sortcelldiv-right-align-margin: -10px 8px -12px -2px !default;
$grid-rtl-bigger-sortcelldiv-right-align-margin: -12px 4px -12px -2px !default;
$grid-rtl-bigger-sortcelldiv-margin: -12px 4px -12px -4px !default;
$grid-rtl-grouped-headercell-padding: 5px 0 !default;
$grid-rtl-group-text-margin-left: 0 !default;
$grid-rtl-group-sorticon-margin-right: -7px !default;
$grid-rtl-headercell-border-width: 0 !default;
$grid-rtl-headercelldiv-padding: 0 .4em 0 2.8em !default;
$grid-rtl-headercelldiv-chkbox-padding: 0 .45em 0 .5em !default;
$grid-bigger-rtl-headercelldiv-chkbox-padding: 0 .45em 0 .5em !default;
$grid-ungroup-rtl-padding-right: -9px !default;
$grid-headercelldiv-padding: 0 20px 0 5px !default;
$grid-headercell-div-padding: 0 .4em !default;
$grid-group-text-width: auto !default;
$grid-grouptopleftcell-border-top: 2px solid !default;
$grid-group-caption-font-size: $text-sm !default;
$grid-group-caption-header-padding: .5em !default;
$group-sorticon-margin-left: -6px !default;
$group-sorticon-margin-top: -.5px !default;
$grid-bigger-headercell-line-height: 40px !default;
$grid-bigger-rhandler-height: $grid-bigger-headercell-line-height !default;
$grid-bigger-rowcell-line-height: 24px !default;
$grid-bigger-rowcell-autofill-top-line-height: 22px !default;
$grid-bigger-rowcell-autofill-top-bottom-line-height: 20px !default;
$grid-bigger-font-size: $text-base !default;
$group-unpgrouicon-margin-left: -10px !default;
$grid-group-ungroupicon-margin-left: -12px !default;
$grid-group-clone-text-align: left !default;
$grid-clone-padding: 2px 8px 1px !default;
$grid-bigger-first-last-rowcell-padding: 8px !default;
$grid-bigger-content-padding: 8px !default;
$grid-bigger-group-line-height: round($grid-group-height*1.5) !default;
$grid-bigger-content-right-padding: 12px !default;
$grid-bigger-headercell-font-size: $text-base !default;
$grid-bigger-content-font-size: $text-base !default;
$grid-filterbar-border-radius: 4px !default;
$grid-bigger-sorticon-margin-top: 1px !default;
$grid-device-group-sorticon-margin-top: 0 !default;
$grid-header-border-width: 0 !default;
$grid-bigger-groupedcell-padding: 0 0 8px !default;
$grid-bigger-group-headercell-margin: 8px 0 0 8px !default;
$grid-bigger-group-headercell-padding: 7px 0 !default;
$grid-device-group-headercell-padding: 0 !default;
$grid-bigger-grouptext-marign: 0 !default;
$grid-bigger-headercell-padding: 12px !default;
$grid-bigger-icons-font-size: $text-base !default;
$group-collapse-icon-text-indent: 11px !default;
$grid-bigger-grouparea-font-size: $grid-bigger-content-font-size !default;
$grid-bigger-grouped-headercell-border-radius: 0 !default;
$grid-bigger-groupedcell-icons-marign-left: -6px !default;
$grid-bigger-ungroupbutton-icons-font-size: $text-base !default;
$grid-bigger-groupcell-span-padding: 0 8px !default;
$grid-device-grouped-headercell-span-padding: 0 8px !default;
$grid-bigger-ungroupbutton-icon-margin-left: -10px !default;
$grid-bigger-ungroupbutton-icon-margin-top: 1px !default;
$grid-device-ungroupbutton-icon-margin-top: 0 !default;
$grid-bigger-groupcell-span-line-height: 24px !default;
$grid-bigger-groupcell-span-height: $grid-bigger-groupcell-span-line-height !default;
$grid-bigger-gdownarrow-icon-font-size: $text-base !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($border-light, .12) !default;
$grid-column-chooser-searchdiv: 1px !default;
$grid-bigger-columnchooser-toolbartxt-padding: 0 !default;
$grid-columnchooser-toolbartxt-padding: 0 !default;
$grid-bigger-header-first-last-cell-padding: 8px !default;
$grid-columnchooser-content-padding: 14px 14px 14px 14px !default;
$grid-bigger-columnchooser-content-padding: 16px 16px 16px 16px !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: 1px !default;
$grid-columnchooser-content-margin: 40px 0 0 !default;
$grid-bigger-columnchooser-content-margin: 40px 0 0 !default;
$grid-bigger-columnchooser-btn-font-size: $text-base !default;
$grid-bigger-sortdiv-rightalign-margin: -12px 4px -12px -2px !default;
$grid-bigger-sortdiv-margin: -12px -2px -12px 4px !default;
$grid-bigger-header-icons-font-size: $font-icon-22 !default;
$grid-bigger-grouptext-width: auto !default;
$grid-edit-input-margin-top: 1px !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: 7px 0 !default;
$grid-edit-input-bigger-margin: 2px !default;
$grid-device-ungroupbutton-line-height: 24px !default;
$grid-device-groupheadercell-span-line-height: 24px !default;
$frozen-border-color: $border-light !default;
$grid-frozenborder-disabled-color: $content-bg-color !default;
$grid-freezeline-right-border: rgba($primary-light, 1) !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 $primary inset !default;
$grid-cell-focus-border-color: $primary !default;
$grid-headercelldiv-fltricon-margin: -5px 20px -5px -5px !default;
$grid-headercelldiv-rightalign-fltricon-margin: -5px 20px -5px 8px !default;
$grid-rtl-headercelldiv-fltricon-margin: -5px !default;
$grid-rtl-headercelldiv-rightalign-fltricon-margin: -5px !default;
$grid-filtered-color: $primary !default;
$grid-autofill-color: $primary !default;
$grid-e-firstrow-dragborder-bcolor: $primary !default;
$grid-checkbox-padding-topbottom: 8px !default;
$grid-checkbox-content-padding-left: 6px !default;
$grid-rtl-checkbox-content-padding-left: 14px !default;
$grid-bigger-checkbox-padding-topbottom: 9px !default;
$grid-bigger-checkbox-content-padding-left: 7px !default;
$grid-rtl-bigger-checkbox-content-padding-left: 16px !default;
$grid-fltrdiv-margin: -12px -2px -12px 8px !default;
$grid-rtl-fltrdiv-margin: -12px 8px -12px -2px !default;
$grid-rtl-bigger-fltrdiv-margin: -14px 4px -14px -2px !default;
$grid-bigger-rtl-headercelldiv-fltricon-padding: -5px -10px -5px 0 !default;
$grid-bigger-fltrdiv-margin: -14px -2px -14px 4px !default;
$grid-sortdiv-filtericon-margin: -12px 24px -12px 8px !default;
$grid-sortdiv-filtericon-rightalign-margin: -12px 8px -12px 13px !default;
$grid-rtl-sortdiv-filtericon-rightalign-margin: -12px 8px -12px 24px !default;
$grid-rtl-sortdiv-filtericon-margin: -12px 8px -13px 24px !default;
$grid-bigger-fltricon-sortdiv-rightalign-margin: -14px 4px -14px -2px !default;
$grid-bigger-fltricon-sortdiv-margin: -14px 22px -14px 4px !default;
$grid-rtl-bigger-fltricon-sortdiv-margin: -14px 4px -14px 24px !default;
$grid-rtl-bigger-fltricon-sortdiv-rightalign-margin: -14px 4px -14px 22px !default;
$grid-column-menu-sub-menu-box-shadow: $shadow !default;
$grid-bigger-checkbox-filter-min-height: 360px !default;
$grid-checkbox-filter-min-height: 307px !default;
$grid-column-menu-margin: -13px -18px -12px 8px !default;
$grid-column-menu-padding: 2px !default;
$grid-textwrap-column-menu-margin: -19px -20px -20px -20px !default;
$grid-bigger-column-menu-margin: -12px -18px -12px 8px !default;
$grid-bigger-device-column-menu-margin: -16px -16px !default;
$grid-column-menu-top-touch: 21px !default;
$grid-column-menu-bottom-touch: 23px !default;
$grid-column-menu-right-touch: 23px !default;
$grid-selection-font-weight: $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: $font-weight-normal !default;
$grid-content-batch-font-color: $success !default;
$grid-bigger-group-headercell-hover-padding: $grid-bigger-group-headercell-padding !default;

$grid-header-wrap-rightalign-sortfilter-div-margin: -20px -5px !default;
$grid-header-wrap-filtericon-sortfilter-div-margin: -20px 20px -29px 14px !default;
$grid-bigger-wrap-sortdiv-margin: -31px 8px !default;
$grid-bigger-wrap-rightalign-sortdiv-margin: -30px -5px !default;
$grid-bigger-wrap-rightalign-fltricon-sortdiv-margin: -26px -20px 0 0 !default;
$grid-bigger-wrap-fltricon-sortdiv-margin: -30px 28px -31px 0 !default;
$grid-header-wrap-filtericon-rightalign-sortfilter-div-margin: -20px 14px !default;
$grid-drag-font-size: $text-sm !default;
$grid-drag-icon-font-weight: $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 $primary-border-color !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: $border-light !default;
$grid-drap-drop-icon-color: $icon-color !default;
$grid-clone-dropitemscount-bg-color: $primary !default;
$grid-clone-dropitemscount-color: $content-text-color-alt2 !default;
$grid-clone-row-border-color: $border-light !default;
$grid-dropitemscount-color: $white !default;
$grid-clone-prop-box-shadow: $shadow !default;
$grid-drag-icon-opacity: .54 !default;
$grid-clone-dropitemscount-border: $border-light !default;
$grid-clone-dragdrop-bg-color: $content-bg-color-alt3 !default;
$grid-group-clone-box-shadow: $shadow !default;
$grid-unboundcelldiv-margin: 0 4px !default;
$grid-bigger-flmenu-padding: 16px 0 0 !default;
$grid-rowcell-wrap-height: 21px !default;
$grid-rowcell-autofill-top-height: 19px !default;
$grid-rowcell-autofill-top-bottom-height: 17px !default;
$grid-rowcell-wrap-max-height: 36px !default;
$grid-bigger-fltr-sortnumber-rightalign-margin: 2px 4px 0 -6px !default;
$grid-bigger-sortnumber-rightalign-margin: 2px 4px 0 6px !default;
$grid-bigger-columnmenu-bottom: 13px !default;
$grid-bigger-sortnumber-margin: 2px 4px 0 4px !default;
$grid-bigger-fltr-sortnumber-margin: 2px 4px 0 -6px !default;
$grid-rtl-searchclear: 0 !default;
$grid-column-chosser-searchdiv-top: -41px !default;
$grid-reorderarrow-font-size: $text-xxs !default;
$grid-bigger-wrap-line-height: 24px !default;
$grid-bigger-wrap-autofill-top-line-height: 22px !default;
$grid-bigger-wrap-autofill-top-bottom-line-height: 20px !default;
$grid-bigger-clone-padding: 3px 0 0 8px !default;
$grid-bigger-draganddrop-clone-padding: 0 !default;
$grouped-bigger-text-font-size: $text-base !default;
$grid-bigger-ungroupbutton-icon-margin-right: 0 !default;
$grid-bigger-ungroupbutton-icon-padding-top: 0 !default;
$grid-bigger-font-size: $text-base !default;
$grid-rtl-bigger-rightalign-fltrdiv-margin: -14px 4px -14px -2px !default;
$grid-bigger-rtl-ungroup-icon-margin-left: -8px !default;
$grid-grouparea-font-weight: $font-weight-normal !default;
$grid-ungroup-rtl-margin-left: 0 !default;
$grid-rtl-group-sorticon-margin-left: -5px !default;
$grid-rtl-column-menu-left: 23px !default;
$grid-checkboxfiltertext-width: 150px !default;
$grid-rtl-column-menu-margin: -12px 8px -12px -20px !default;
$grid-rtl-textwrap-column-menu-margin: -17px -13px -23px -25px !default;
$grid-filter-checkbox-width: 0 !default;
$grid-filter-checkbox-white-space: nowrap !default;

// group animator
$grid-group-animator-bigger-cell-margin: 15px 0 15px 0 !default;
$grid-group-animator-bigger-drop-height: 54px !default;
$grid-animator-bigger-area-margin: 22px !default;
$grid-group-animator-drop-height: 48px !default;
$grid-group-animator-cell-margin: 12px 0 12px 0 !default;
$grid-animtor-border-bottom-width: 1px !default;
$grid-animator-area-padding: 0 !default;
$grid-animtor-area-border-width: 1px !default;
$grid-animator-area-border: 0 !default;
$grid-animator-area-margin: 9px !default;
$grid-animator-chips-display: inline-block !default;
$grid-animator-drag-icon: 24px !default;
$grid-animator-drag-icon-line-height: 19px !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: $text-xs !default;
$grid-animator-opacity: 1 !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: 15px !default;
$grid-filterbar-dropdown: 30px !default;

$grid-responsive-close-icon-margin: 9px 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: 0 !default;
$grid-responsive-search-padding-right: 18px !default;
$grid-responsive-search-padding-left: 18px !default;
$grid-responsive-header-background: $content-bg-color !default;
$grid-bigger-res-dlg-hdr-padding: 16px !default;
$grid-responsive-header-search: 0 !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: $content-text-color-alt3 !default;
$grid-responsive-res-apply-btn-font-size: $text-base !default;
$grid-responsive-res-apply-btn-margin-top: 0 !default;
$grid-responsive-sort-clear-btn-font-size: $text-base !default;
$grid-responsive-sort-clear-margin-top: 0 !default;
$grid-responsive-icon-filter-clear: $grid-bigger-icons-font-size !default;
$grid-responsive-icon-filter-clear-bottom: 10px !default;
$grid-responsive-btn-icon-font-size: $grid-bigger-icons-font-size !default;
$grid-responsive-back-btn-bottom: 12px !default;
$grid-responsive-header-padding-top: 6px !default;
$grid-responsive-search-place-holder-margin-top: 0 !default;
$grid-responsive-search-width: 0 !default;
$grid-responsive-search-left-padding: 0 !default;
$grid-responsive-filter-clear-margin: 6px !default;
$grid-responsive-toolbar-filter-font-size: $grid-bigger-icons-font-size !default;
$grid-responsive-tbar-btn-bgr-padding: 0 !default;
$grid-responsive-btn-top: -10px !default;
$grid-responsive-apply-btn-top: 4px !default;

$grid-rtl-headercelldiv-left-align-margin: 10px !default;
$grid-rtl-filtermenudiv-left-align-margin: -2px !default;
$grid-rtl-sort-num-left-align-margin: 2px 8px 0 0 !default;
$grid-frozen-mac-scrollbar-background: rgba(0, 0, 0, .5) !default;
$grid-rowcell-color: $content-text-color !default;
$grid-header-text-transform: none !default;
$grid-headerclone-font-size: $grid-content-font-size !default;
$grid-filter-icon-color: $icon-color !default;
$grid-group-drop-area-border: dashed !default;
$grid-group-drop-area-border-width: 1px !default;
$grid-group-drop-area-hover-border-color: $border-dark !default;
$grid-adatptive-apply-btn-disable: $primary-bg-color-disabled !default;
$grid-sortnumber-font-size: $text-sm !default;
$grid-reorderarrow-margin-top: -7px !default;
$grid-reorderdownarrow-margin-top: 4px !default;
$grid-reorder-arrow-top-margin: 0 !default;
$grid-reorder-downarrow-top-margin: -2px !default;
$grid-reorder-virtualarrow-top-margin: -1px !default;
$grid-reorder-virtualdownarrow-top-margin: -1px !default;
$grid-bigger-toolbar-icon-size: $grid-bigger-icons-font-size !default;
$grid-reorderarrow-margin-left: -3px !default;
$grid-column-chooser-cancel-icon-size: $text-sm !default;

// bootstrap 5 support
$grid-outter-border: $border-light !default;
$grid-btn-disabled-bgcolor: $secondary-bg-color-disabled !default;
$grid-sort-number-size: 16px !default;
$grid-bigger-sort-number-size: 18px !default;
$grid-sort-number-font-size: $text-base !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-bigger-sort-margin: -10px 2px !default;
$grid-bigger-sort-right-margin: 1px 8px 0 0 !default;
$grid-skin: 'bootstrap5' !default;
$grid-biggerreorderarrow-font-size: $text-sm !default;
$grid-bigger-drag-count-padding: 3px 8px 4px !default;
$grid-bigger-drag-count-top: -14px !default;
$grid-bigger-check-select-all-font-size: $text-xxs !default;
$grid-adaptive-sort-clear-button-padding: 4px !default;
$grid-cc-margin-top: 4px !default;
$grid-bigger-rtl-cm-margin: -12px 4px -12px -22px !default;
$grid-bigger-device-rtl-cm-margin: -16px 4px -12px -22px !default;
$grid-bigger-rtl-group-span-padding: 0 8px !default;
$grid-device-rtl-grouped-headercell-span-padding: $grid-device-grouped-headercell-span-padding !default;
$grid-rtl-group-span-padding: 0 8px !default;
$grid-ungroup-rtl-padding-left: 8px !default;
$grid-column-reorder-icon-color: $primary !default;
$grid-bigger-headercell-top-padding: 10px !default;
$grid-bigger-icon-font-size: $text-base !default;
$grid-rtl-mselect-dd-indicator-left: -6px !default;
$grid-toolbar-text-opacity: .6 !default;
$grid-toolbar-searchbar-text-opacity: 1 !default;
$grid-dropitems-count-margin-left: -4px !default;

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

    .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-toolbar-items .e-toolbar-item.e-search-wrapper {
      padding-bottom: $grid-bigger-toolbar-search-wrapper-padding-bottom;
      padding-top: $grid-bigger-toolbar-search-wrapper-padding-top;

      & .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 {
        margin: $grid-bigger-toolbar-search-clear-icon-margin;
        min-width: $grid-bigger-toolbar-search-clear-icon-min-width;
        padding: $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 {
        margin: $grid-rtl-bigger-toolbar-search-clear-icon-margin;
        min-width: $grid-rtl-bigger-toolbar-search-clear-icon-min-width;
        padding: $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-flmenu-valuediv {
      padding: $grid-bigger-flmenu-padding;
    }

    .e-headercell {
      height: $grid-bigger-headercell-line-height;
      padding: $grid-bigger-headercell-top-padding $grid-bigger-headercell-padding $grid-bigger-headercell-bootom-padding;
    }

    .e-headercelldiv {
      font-size: $grid-bigger-header-font-size;
      height: $grid-bigger-header-height;
      line-height: $grid-bigger-headercelldiv-line-height;
    }

    .e-headercell,
    .e-detailheadercell {
      font-size: $grid-bigger-header-font-size;
    }

    .e-icons {
      font-size: $grid-bigger-icons-font-size;
    }

    .e-gridheader thead .e-icons {
      font-size: $grid-bigger-header-icons-font-size;
    }

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

    .e-gridheader {
      & tr th:last-child {
        padding-right: $grid-bigger-header-first-last-cell-padding;
      }

      & tr th:last-child.e-filterbarcell {
        padding-left: $grid-filterbarcell-first-last-child-padding-left;
      }

      & tr th:first-child {
        padding-left: $grid-bigger-header-first-last-cell-padding;
      }

      & tr th:first-child.e-filterbarcell {
        padding-left: $grid-filterbarcell-first-last-child-padding-left;
      }
    }

    .e-headercelldiv {
      font-size: $grid-bigger-headercell-font-size;
    }

    .e-rowcell,
    .e-summarycell,
    .e-groupcaption {
      font-size: $grid-bigger-content-font-size;
      padding: $grid-bigger-content-padding $grid-bigger-content-right-padding;
    }

    .e-rowcell .e-checkbox-wrapper,
    .e-rowcell .e-css.e-checkbox-wrapper {
      @if $grid-skin == 'material3' {
        height: 18px;
      }
    }

    .e-rowcell:first-child,
    .e-summarycell:first-child {
      padding-left: $grid-bigger-first-last-rowcell-padding;
    }

    .e-rowcell:last-child,
    .e-summarycell:last-child {
      padding-right: $grid-bigger-first-last-rowcell-padding;
    }

    .e-filterbarcell,
    .e-filterbarcelldisabled {
      height: $grid-bigger-headercell-line-height;
      @if $grid-skin == 'material3' {
        padding: 0 $grid-bigger-headercell-padding 5px;
      }
      @else {
        padding: 0 $grid-bigger-headercell-padding;
      }
    }

    .e-filterbarcell input {
      height: $grid-bigger-filterbarcell-text-input;
    }

    .e-ftrchk {
      padding-bottom: $grid-bigger-checkbox-padding-topbottom;
      padding-top: $grid-bigger-checkbox-padding-topbottom;
      @if $grid-skin == 'material3' {
        margin-left: -4px;
      }
    }

    .e-columnmenu {
      bottom: $grid-column-menu-top-touch;
      top: $grid-column-menu-bottom-touch;
    }

    &.e-device.e-noselect {
      user-select: none;
    }

    .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-checkboxfilter {
      & .e-dlg-content {
        padding-left: $grid-bigger-checkbox-content-padding-left;
      }

      & .e-ftrchk,
      & .e-searchbox {
        padding-left: $grid-bigger-checkbox-padding-topbottom;
      }
    }

    &.e-rtl .e-checkboxfilter {
      & .e-dlg-content {
        padding-left: $grid-rtl-bigger-checkbox-content-padding-left;
        padding-right: $grid-bigger-checkbox-content-padding-left;
      }

      & .e-ftrchk,
      & .e-searchbox {
        padding-left: 0;
        padding-right: $grid-bigger-checkbox-padding-topbottom;
      }
    }

    .e-filtermenudiv {
      margin: $grid-bigger-fltrdiv-margin;
    }

    .e-sortfilterdiv {
      margin: $grid-bigger-sortdiv-margin;
    }

    .e-gridheader .e-fltr-icon .e-sortfilterdiv {
      margin: $grid-bigger-fltricon-sortdiv-margin;
    }

    .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
      @if $grid-skin == 'fluent' {
        padding-left: 4px;
      }
    }

    &.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
      padding: $grid-bigger-rtl-headercelldiv-chkbox-padding;
    }

    .e-gridheader .e-columnheader.e-wrap .e-sortfilterdiv,
    .e-wrap .e-sortfilterdiv {
      margin: $grid-bigger-wrap-sortdiv-margin;
    }

    .e-gridheader .e-columnheader.e-wrap .e-rightalign .e-sortfilterdiv .e-wrap .e-rightalign .e-sortfilterdiv {
      margin: $grid-bigger-wrap-rightalign-sortdiv-margin;
    }

    .e-gridheader .e-columnheader.e-wrap .e-fltr-icon .e-sortfilterdiv .e-wrap .e-fltr-icon .e-sortfilterdiv {
      margin: $grid-bigger-wrap-fltricon-sortdiv-margin;
    }

    .e-gridheader .e-columnheader.e-wrap .e-rightalign.e-fltr-icon .e-sortfilterdiv,
    .e-wrap .e-rightalign.e-fltr-icon .e-sortfilterdiv {
      margin: $grid-bigger-wrap-rightalign-fltricon-sortdiv-margin;
    }

    &.e-wrap {
      & .e-rowcell,
      & .e-columnheader .e-stackedheadercelldiv,
      & .e-columnheader .e-headercelldiv {
        line-height: $grid-bigger-wrap-line-height;
      }
    }

    .e-gridheader .e-rightalign .e-sortfilterdiv {
      margin: $grid-bigger-sortdiv-rightalign-margin;
    }

    .e-gridheader .e-sortfilter .e-rightalign .e-headercelldiv,
    .e-gridheader .e-rightalign .e-stackedheadercelldiv {
      @if $grid-skin == 'material3' {
        margin-left: 12px;
      }
    }

    .e-gridheader .e-rightalign.e-fltr-icon .e-sortnumber {
      float: left;
      margin: $grid-bigger-fltr-sortnumber-rightalign-margin;
    }

    .e-gridheader .e-rightalign .e-sortnumber {
      float: left;
      margin: $grid-bigger-sortnumber-rightalign-margin;
    }

    .e-sortnumber {
      border-radius: $grid-sortnumber-border-radius;
      display: inline-block;
      float: right;
      font-size: $grid-sort-number-font-size;
      height: $grid-bigger-sort-number-size;
      line-height: $grid-bigger-sortnumer-line-height;
      margin: $grid-bigger-sortnumber-margin;
      text-align: center;
      width: $grid-bigger-sort-number-size;

      @if $grid-skin == 'fluent' {
        font-size: 14px;
      }
    }

    .e-gridheader .e-fltr-icon .e-sortnumber {
      margin: $grid-bigger-fltr-sortnumber-margin;
    }

    .e-gridheader .e-rightalign.e-fltr-icon .e-sortfilterdiv {
      margin: $grid-bigger-fltricon-sortdiv-rightalign-margin;
    }

    &.e-rtl .e-headercell.e-leftalign .e-sortfilterdiv{
      @if $grid-skin == 'material3' {
        margin: -16px 2px;
      }
    }
  
    &.e-rtl .e-headercell .e-sortfilterdiv,
    &.e-rtl .e-detailheadercell .e-sortfilterdiv {
      margin: $grid-rtl-bigger-sortcelldiv-margin;
    }

    &.e-rtl .e-gridheader .e-rightalign .e-sortfilterdiv {
      margin: $grid-rtl-bigger-sortcelldiv-right-align-margin;
    }

    &.e-rtl .e-gridheader .e-fltr-icon .e-sortfilterdiv {
      margin: $grid-rtl-bigger-fltricon-sortdiv-margin;
    }

    &.e-rtl .e-gridheader .e-leftalign .e-sortfilterdiv {
      @if $grid-skin == 'tailwind' {
        margin-bottom: -14.5px;
        margin-top: -14.5px;
      }
      @else if $grid-skin == 'bootstrap5' {
        margin-bottom: -12px;
        margin-top: -14px;
      }
    }

    &.e-rtl .e-gridheader .e-fltr-icon.e-leftalign .e-sortfilterdiv {
      @if $grid-skin == 'tailwind' {
        margin-right: -6px;
      }
    }

    &.e-rtl .e-gridheader .e-rightalign.e-fltr-icon .e-sortfilterdiv {
      margin: $grid-rtl-bigger-fltricon-sortdiv-rightalign-margin;
    }

    &.e-rtl .e-filtermenudiv {
      margin: $grid-rtl-bigger-fltrdiv-margin;
    }

    &.e-rtl .e-rightalign .e-filtermenudiv {
      margin: $grid-rtl-bigger-rightalign-fltrdiv-margin;
    }

    &.e-rtl .e-headercell .e-headercelldiv .e-sortnumber,
    &.e-rtl .e-detailheadercell .e-headercelldiv .e-sortnumber {
      margin: $grid-rtl-bigger-sortnumber-margin;
    }

    &.e-rtl .e-headercell.e-rightalign .e-headercelldiv .e-sortnumber,
    &.e-rtl .e-detailheadercell.e-rightalign .e-headercelldiv .e-sortnumber {
      margin: $grid-rtl-bigger-rightalign-sortnumber-margin;
    }

    &.e-rtl .e-headercell.e-leftalign.e-headercell.e-fltr-icon .e-headercelldiv .e-sortnumber,
    &.e-rtl .e-detailheadercell.e-leftalign.e-headercell.e-fltr-icon .e-headercelldiv .e-sortnumber {
      @if $grid-skin == 'tailwind' {
        margin: 0 0 0 6px;
      }
    }

    &.e-rtl .e-headercell.e-fltr-icon .e-headercelldiv .e-sortnumber {
      margin: $grid-rtl-bigger-sortnumber-withfilter-margin;
      @if $grid-skin == 'tailwind' {
        margin-left: 0;
      }
    }

    .e-rowcell,
    .e-summarycell,
    .e-emptyrow td,
    .e-frozencontent table tr td:first-child:empty,
    .e-movablecontent table tr td:first-child:empty,
    &: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 .e-icons {
      @if $grid-skin == 'material3' {
        border-radius: 8px;
      }
    }

    .e-groupdroparea {
      font-size: $grid-bigger-grouparea-font-size;
      min-height: $grid-bigger-group-line-height;
      padding: $grid-bigger-groupdroparea-padding;
    }

    .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-rtl .e-groupdroparea.e-hover {
      @if $grid-skin == 'tailwind' {
        right: 3.4px;
      }
    }

    .e-cloneproperties {
      padding: $grid-bigger-clone-padding;
    }

    .e-cloneproperties.e-draganddrop {
      & .e-rowcell {
        @if $grid-skin == 'material3' {
          padding-top: 10px;
          padding-bottom: 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;
    }

    .e-dropitemscount {
      @if $grid-skin == 'tailwind' {
        margin-left: 1px;
      }
    }

    &.e-rtl .e-dropitemscount {
      @if $grid-skin == 'tailwind' {
        margin-left: -8px;
      }
    }

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

    .e-frozenheader table tr td.e-rowcell {
      height: $grid-bigger-rowcell-line-height + $grid-bigger-content-padding + $grid-bigger-content-padding -6;
    }

    /* stylelint-disable */
    .e-frozencontent table tr td:first-child:empty,
    .e-movablecontent table tr td:first-child:empty,
    .e-frozenhdrcont table tr td:first-child:empty,
    &: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-columnmenu {
      bottom: $grid-bigger-columnmenu-bottom;
      margin: $grid-bigger-column-menu-margin;
    }

    &.e-device .e-columnmenu {
        margin: $grid-bigger-device-column-menu-margin;
    }

    .e-columnmenu {
      right: $grid-column-menu-right-touch;
    }

    .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-device .e-groupheadercell {
      padding: $grid-device-group-headercell-padding;
    }

    .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;
      line-height: $grid-bigger-groupcell-span-line-height;
      padding: $grid-bigger-groupcell-span-padding;
    }

    .e-groupheadercell .e-ungroupbutton {
      font-size: $grid-bigger-ungroup-button-font-size;
    }

    .e-groupheadercell .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-row .e-input-focus .e-input.e-field {
      font-family: $grid-font-family;
      font-size: $grid-bigger-font-size;
      padding-bottom: $grid-edit-input-bigger-padding-bottom;
      padding-top: $grid-edit-input-bigger-padding-top;
    }

    &.e-device .e-row .e-input-group .e-input.e-field,
    &.e-device .e-row .e-input-focus .e-input.e-field {
      padding-bottom: $grid-edit-input-bigger-device-padding-bottom;
      padding-top: $grid-edit-input-bigger-device-padding-top;
    }

    .e-row .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-headercell {
      padding: $grid-device-headercell-padding;
    }

    &.e-device .e-headercell:first-child {
      padding: $grid-device-headercell-fistchild-padding;
    }

    &.e-device .e-headercell:last-child {
      padding: $grid-device-headercell-lastchild-padding;
    }

    &.e-device .e-groupheadercell span {
      line-height: $grid-device-groupheadercell-span-line-height;
      padding: $grid-device-grouped-headercell-span-padding;
    }

    &.e-device .e-rowcell,
    &.e-device .e-summarycell {
      padding: $grid-device-rowcell-padding;
    }

    &:not(.e-row-responsive).e-device .e-rowcell:first-child,
    &:not(.e-row-responsive).e-device .e-summarycell:first-child {
      padding: $grid-device-rowcell-firstchild-padding;
    }

    &:not(.e-row-responsive).e-device .e-rowcell:last-child,
    &:not(.e-row-responsive).e-device .e-summarycell:last-child {
      padding: $grid-device-rowcell-lastchild-padding;
    }

    &.e-device .e-filterbarcell {
      padding: $grid-device-filterbarcell-padding;
    }

    &.e-device .e-filterbarcell:first-child {
      padding: $grid-device-filterbarcell-firstchild-padding;
    }

    &.e-device .e-filterbarcell:last-child {
      padding: $grid-device-filterbarcell-lastchild-padding;
    }

    &.e-device .e-groupheadercell .e-ungroupbutton {
      line-height: $grid-device-ungroupbutton-line-height;
    }

    &.e-device .e-normaledit .e-rowcell {
      padding-bottom: 0;
      padding-top: 0;
    }

    &.e-device .e-editedbatchcell.e-rowcell {
      padding-bottom: 0;
      padding-top: 0;
    }

    .e-unboundcell,
    .e-editedrow .e-normaledit .e-unboundcell,
    .e-addedrow .e-normaledit .e-unboundcell {
      padding-bottom: $grid-bigger-command-column-padding-bottom;
      padding-top: $grid-bigger-command-column-padding-top;
    }

    .e-grouptext {
      margin-right: $grid-bigger-grouptext-marign;
      width: $grid-bigger-grouptext-width;
    }

    .e-gridheader table th[rowspan],
    &.e-device .e-gridheader table th[rowspan] {
      padding-bottom: $grid-device-gridheader-row-span-padding;
    }

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

    &.e-device span.e-ungroupbutton.e-icons {
      margin-top: $grid-device-ungroupbutton-icon-margin-top;
      @if $grid-skin == 'bootstrap4' {
        padding-top: 0;
      }
    }

    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-device span.e-groupsort.e-icons {
      margin-top: $grid-device-group-sorticon-margin-top;
    }
    
    &.e-rtl 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-rtl .e-groupheadercell,
    &.e-rtl .e-groupheadercell:hover {
      margin: $grid-bigger-rtl-group-headercell-margin;
      padding: $grid-bigger-rtl-group-headercell-padding;
    }

    &.e-rtl.e-device .e-groupheadercell {
      padding: $grid-bigger-device-rtl-group-headercell-padding;
    }

    &.e-rtl 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-groupcaption {
      line-height: $grid-bigger-groupcaption-line-height;
    }

    .e-ccdlg {
      .e-dlg-content {
        margin: $grid-bigger-columnchooser-content-margin;
        padding: $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;
      }
    }

    .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-frozen-right-cursor,
    .e-rowcell .e-frozen-left-cursor,
    .e-gridheader .e-headercell .e-frozen-right-cursor,
    .e-gridheader .e-headercell .e-frozen-left-cursor,
    .e-gridheader .e-filterbarcell .e-frozen-right-cursor,
    .e-gridheader .e-filterbarcell .e-frozen-left-cursor {
      cursor: move;
      height: 100%;
      position: absolute;
      top: 0;
      width: 4px;
    }

    .e-rowcell .e-frozen-left-cursor,
    .e-gridheader .e-headercell .e-frozen-left-cursor,
    .e-gridheader .e-filterbarcell .e-frozen-left-cursor {
      right: 0;
    }

    .e-rowcell .e-frozen-right-cursor,
    .e-gridheader .e-headercell .e-frozen-right-cursor,
    .e-gridheader .e-filterbarcell .e-frozen-right-cursor {
      left: 0;
    }

    .e-gridheader .e-headercell .e-frozen-left-cursor.e-frozen-resize-cursor,
    .e-gridheader .e-filterbarcell .e-frozen-left-cursor.e-frozen-resize-cursor,
    .e-rowcell .e-frozen-left-cursor.e-frozen-resize-cursor {
      right: 3px;
    }

    .e-gridheader .e-headercell .e-frozen-right-cursor.e-frozen-resize-cursor:not(.e-frozen-default-cursor),
    .e-gridheader .e-filterbarcell .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-groupdroparea.e-group-animate .e-drag.e-icon-drag {
      @if $grid-skin == 'material3' {
        font-size: 16px;
        height: 30px;
        line-height: 31px;
        margin-right: -12px;
      }
    }

    &.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-gridheader .e-headercontent .e-reorderdownarrow,
    .e-gridheader .e-headercontent .e-reorderuparrow-virtual,
    .e-gridheader .e-headercontent .e-reorderdownarrow-virtual {
      @if $grid-skin == 'material3' {
        margin-left: -4px;
      }
    }

    .e-gridheader .e-headercontent .e-reorderuparrow,
    .e-gridheader .e-headercontent .e-reorderuparrow-virtual {
      @if $grid-skin == 'material3' {
        margin-top: -9px;
      }
    }

    .e-gridheader .e-headercontent .e-reorderdownarrow,
    .e-gridheader .e-headercontent .e-reorderdownarrow-virtual {
      @if $grid-skin == 'material3' {
        margin-top: 2px;
      }
    }

    &.e-rtl {
      .e-gridheader .e-headercontent .e-reorderuparrow,
      .e-gridheader .e-headercontent .e-reorderdownarrow,
      .e-gridheader .e-headercontent .e-reorderuparrow-virtual,
      .e-gridheader .e-headercontent .e-reorderdownarrow-virtual {
        @if $grid-skin == 'material3' {
          margin-left: -3px;
        }
      }
    }
  }

  #{&}.e-grid {
    border-radius: $grid-border-radius;
    border-style: none $grid-border-type $grid-border-type;
    border-width: $grid-border-size;
    display: block;
    font-family: $grid-font-family;
    font-size: $grid-font-size;
    height: auto;
    position: relative;

    .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,
    .e-ccdlg.e-sticky {
      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;
      background-color: $grid-e-firstrow-dragborder-bcolor;
      height: 2px;
      position: absolute;
      z-index: 5;
    }

    .e-frozenrow-border {
      background-color: $frozen-border-color;
      height: 2px;
      position: relative;
      z-index: 5;
    }

    .e-frozenrow-border.e-frozenrow-empty {
      height: 0;
    }

    &.e-top-shadow .e-frozenrow-border {
      height: 4px;
      margin-top: -4px;
      background-color: transparent !important;
      box-shadow: 0px 4px 8px $grid-frozen-row-shadow-background-color;
      clip-path: inset(0px 0px -15px 0px)
    }

    .e-grid-relative {
      position: relative;
    }

    .e-dropitemscount {
      border: 1px solid $grid-clone-dropitemscount-border;
      border-radius: 17px;
      box-sizing: content-box;
      font-size: 13px;
      line-height: normal;
      margin-left: $grid-dropitems-count-margin-left;
      @if $grid-skin == 'tailwind' {
        margin-left: -7px;
      }
      min-width: 12px;
      padding: $grid-bigger-drag-count-padding;
      position: absolute;
      text-align: center;
      top: $grid-bigger-drag-count-top;
      z-index: 5;
    }

    &.e-rtl .e-dropitemscount {
      left: $grid-rtl-mselect-dd-indicator-left !important;
    }

    &.e-rtl .e-toolbar .e-toolbar-item.e-search-wrapper{
      & .e-sicon.e-clear-icon {
          padding: $grid-rtl-toolbar-search-clear-icon-padding;
          margin: $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 {
        z-index: $grid-dragborder-z-index;
        }
    }

    .e-gridcontent, .e-gridheader,
    &.e-rtl .e-gridcontent,
    &.e-rtl .e-gridheader {
        & 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 {
        z-index: 6;
        }
    }

    .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 {
        box-shadow: $grid-dragborder-box-shadow;
        }
    }

    .e-gridcontent, .e-gridheader,
    &.e-rtl .e-gridcontent,
    &.e-rtl .e-gridheader {
        & 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) {
        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;
      font-size: $grid-drag-font-size;
      font-weight: $grid-drag-icon-font-weight;
      color: $grid-drap-drop-icon-color;
      opacity: $grid-drag-icon-opacity;
    }

    .e-row .e-icon-rowdragmoveicon::before {
      font-size: $grid-drag-font-size;
      font-weight: $grid-drag-icon-font-weight;
    }

    .e-row .e-icon-rowdragmoveicon {
      padding-left: $grid-drag-move-icon;
    }

    .e-draganddrop .e-rowcell, &.e-rtl .e-draganddrop .e-rowcell {
      padding-left: 6px;
      padding-right: 6px;
    }

    .e-gridcontent .e-rowdragdrop,
    .e-gridheader .e-rowdragdrop {
      border-style: $grid-dragcell-border-style;
      border-width: $grid-dragicon-cell-border;
      border-color: $grid-dragcell-border-color;
    }

    .e-gridcontent .e-rowdragdrop.e-lastrowcell,
    .e-gridcontent .e-recordpluscollapse.e-lastrowcell,
    .e-gridcontent .e-indentcell.e-lastrowcell,
    .e-gridcontent .e-groupcaption.e-lastrowcell {
      border-bottom-width: $grid-border-bottom-width;
    }

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

    .e-res-toolbar {
      border-bottom: 1px solid;
      border-bottom-color: $grid-header-border-color;
      & .e-toolbar-items {
          min-height: initial;

          & .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 {
            background: none;
            & .e-icons {
              @if $grid-skin == 'bootstrap5' or $grid-skin == 'bootstrap4' {
                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: calc(100% - 50px);

            & .e-search-wrapper {
              & .e-input-group::before,
              & .e-input-group::after {
                background: none;
              }
            }
          }

          & .e-toolbar-right {
            & .e-search-wrapper {
              width: 100%;
              padding-left: $grid-responsive-search-padding-left;
              padding-right: $grid-responsive-search-padding-right;

              & .e-search-icon {
                font-size: $grid-res-toolbar-search-icon-font-size;
                margin-top: $grid-responsive-header-search;
              }

              & .e-input-group {
                border: 0;
                opacity: 1;
                padding: $grid-responsive-tbar-btn-bgr-padding;
                padding-right: $grid-responsive-search-icon-right;
                width: 100%;

                & .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-responsive-right {
            & .e-search-wrapper {
                padding-left: 0;
            }
          }
        }
      }

      &.e-bigger .e-res-toolbar {
        & .e-toolbar-items {
          & .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-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 {
      padding-bottom: $grid-toolbar-search-wrapper-padding-bottom;
      padding-top: $grid-toolbar-search-wrapper-padding-top;

      & .e-search:focus {
        opacity: $grid-toolbar-searchbar-text-opacity;
      }

      & .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-bigger & .e-group-animator .e-groupheadercell,
    .e-bigger & .e-group-animator .e-groupheadercell:hover {
        margin: $grid-group-animator-bigger-cell-margin;
        border-bottom-width: $grid-animtor-border-bottom-width;
    }

    & .e-groupdroparea.e-group-animate.e-grouped {
        height: $grid-group-animator-bigger-drop-height;
    }

    .e-bigger & .e-group-animate.e-groupdroparea .e-nextgroup {
        margin-top: $grid-animator-bigger-area-margin;
    }

    .e-bigger &.e-rtl .e-group-animate.e-groupdroparea .e-nextgroup {
      @if $grid-skin == 'material3' {
        margin-top: 18px;
      }
    }

    & .e-group-animator .e-groupheadercell,
    & .e-group-animator .e-groupheadercell:hover {
        margin: $grid-group-animator-cell-margin;
        border-bottom-width: $grid-animtor-border-bottom-width;
    }

    & .e-group-animator:last-child .e-nextgroup.e-icons.e-icon-next {
        display: none;
    }

    & .e-groupdroparea.e-group-animate.e-grouped {
        overflow: hidden;
        padding: $grid-animator-area-padding;
        height: $grid-group-animator-drop-height;
        border-bottom-width: $grid-animator-area-border;
    }

    &.e-rtl .e-group-animator {
        float: right;
    }

    &.e-rtl .e-group-animate .e-groupheadercell, &.e-rtl .e-group-animate .e-groupheadercell:hover {
        margin-right: 0;
        margin-left: 0;
    }

    &.e-rtl .e-group-animate.e-groupdroparea .e-nextgroup {
        transform: rotate(180deg);
        margin-top: $grid-animator-margin-top-rtl;
    }

    &.e-rtl .e-group-animator:first-child .e-groupheadercell {
        margin: $grid-animator-rtl-first-group;
    }

    & .e-group-animator:first-child .e-groupheadercell {
        margin: $grid-animator-first-group;
    }

    .e-group-animate.e-groupdroparea .e-nextgroup {
        margin-top: $grid-animator-area-margin;
    }

    .e-groupdroparea.e-group-animate .e-drag.e-icon-drag {
        display: $grid-animator-chips-display;
        height: $grid-animator-drag-icon;
        font-size: $grid-animator-font-size-drag;
        line-height: $grid-animator-drag-icon-line-height;
        padding: $grid-animator-area-border;
        vertical-align: $grid-columnchooser-toolbar-icon-vertical-align;
    }

    .e-groupdroparea.e-group-animate .e-drag.e-icon-drag:hover {
      @if $grid-skin == 'material3' {
        background: none;
      }
    }
    
    .e-group-animator .e-icon-drag.e-icons {
        margin-left: $grid-animator-drag-margin-left;
        @if $grid-skin == 'material3' {
          margin-right: -8px;
        }
    }

    &.e-rtl .e-group-animator .e-icon-drag.e-icons {
      @if $grid-skin == 'material3' {
        margin-right: $grid-animator-drag-margin-left;
        margin-left: -8px;
      }
    }

    .e-groupdroparea.e-group-animate span.e-drag.e-icons.e-icon-drag {
        cursor: move;
    }

    .e-group-animate .e-drag.e-icon-drag::before {
        opacity: $grid-animator-opacity;
    }

    .e-group-animate span.e-nextgroup.e-icons.e-icon-next {
        display: $grid-animator-chips-display;
        float: $grid-rtlfltrdiv-float;
        height: $grid-animator-drag-icon;
        line-height: $grid-animator-line-height-next;
        padding: $grid-animator-area-border;
        vertical-align: $grid-columnchooser-toolbar-icon-vertical-align;
    }

    .e-group-animate span.e-nextgroup.e-icons.e-icon-next:hover {
      @if $grid-skin == 'material3' {
        background-color: $transparent;
      }
    }

    .e-groupdroparea.e-grouped {
      padding: $grid-grouped-padding;
    }

    .e-groupdroparea.e-grouped.e-hover {
      @if $grid-skin == 'tailwind' {
        padding: 0 1px 1px 1px;
      }
      @else if $grid-skin == 'fluent' {
        padding-bottom: 0;
      }
    }

    &.e-default .e-gridheader.e-stackedfilter .e-grouptopleftcell,
    &.e-default.e-horizontallines .e-gridheader.e-stackedfilter .e-grouptopleftcell {
      border-top: 0;
    }

    &.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-bottom: 1px solid;
    }

    &.e-default.e-verticallines .e-gridheader.e-stackedfilter tr:first-child th.e-grouptopleftcell,
    &.e-default.e-hidelines .e-gridheader.e-stackedfilter tr:first-child th.e-grouptopleftcell {
      border-bottom: 0;
    }

    &.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 {
      border-top: 1px solid;
    }

    &.e-default.e-hidelines .e-gridheader.e-stackedfilter tr:last-child th.e-grouptopleftcell,
    &.e-default.e-verticallines .e-gridheader.e-stackedfilter tr:last-child th.e-grouptopleftcell {
      border-top: 0;
    }

    &.e-default .e-grouptopleftcell {
      border-top: $grid-grouptopleftcell-border-top;
    }

    &.e-default .e-gridheader .e-headercell.e-firstheader,
    &.e-default.e-horizontallines .e-headercell.e-firstheader {
      border-left: 1px solid;
    }

    &.e-default.e-hidelines .e-headercell.e-firstheader {
      border-left: 0;
    }

    &.e-default.e-verticallines .e-grouptopleftcell,
    &.e-default.e-bothlines .e-grouptopleftcell,
    &.e-default.e-hidelines .e-grouptopleftcell {
      border-top-width: 0;
    }

    &.e-default.e-verticallines,
    &.e-default.e-hidelines {
      & .e-detailrowcollapse,
      & .e-detailrowexpand,
      & .e-rowdragdrop {
        border-top-width: 0;
      }
    }

    &.e-default.e-horizontallines .e-grouptopleftcell {
      border-top: 1px solid;
    }

    & .e-gridheader .e-headercell .e-rhandler,
    & .e-gridheader .e-headercell .e-rsuppress {
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
      width: 4px;
    }

    & .e-gridheader .e-frozenheader .e-headercell:last-child .e-rhandler:last-of-type,
    & .e-gridheader .e-frozenheader .e-headercell:last-child .e-rsuppress:last-of-type {
      border-right: 0;
    }

    & .e-gridheader .e-headercell.e-leftfreeze.e-freezeleftborder .e-rhandler {
      border-right: 0;
    }

    &.e-rtl .e-gridheader .e-headercell.e-leftfreeze.e-freezeleftborder .e-rhandler {
      border-left: 0;
    }

    & .e-gridheader .e-frozenheader.e-frozen-right-header .e-headercell .e-rhandler,
    & .e-gridheader .e-frozenheader.e-frozen-right-header .e-headercell .e-rsuppress {
      left: 0;
    }

    &.e-device .e-gridheader .e-headercell .e-rhandler {
      width: 14px;
    }

    &.e-rtl .e-gridheader .e-headercell .e-rhandler,
    &.e-rtl .e-gridheader .e-headercell .e-rsuppress {
      left: 0;
      right: auto;
    }

    &.e-resize-lines .e-gridheader th.e-headercell.e-lastcell .e-rhandler {
      border-right-width: 0;
    }

    &.e-resize-lines .e-gridheader .e-frozen-right-header th.e-headercell .e-rhandler {
        border-right-width: 0;
    }

    &.e-rtl .e-gridheader .e-frozenheader.e-frozen-right-header .e-headercell .e-rhandler,
    &.e-rtl .e-gridheader .e-frozenheader.e-frozen-right-header .e-headercell .e-rsuppress {
      right: 0;
    }

    &.e-rtl.e-resize-lines .e-gridheader .e-frozen-right-header th.e-headercell .e-rhandler {
        border-right-width: 1px;
        border-left-width: 0;
    }

    & .e-rhelper {
      position: absolute;
      width: $grid-resize-border-width;
    }

    & .e-virtual-rhandler {
      z-index: 5;
    }

    &.e-device .e-ricon::before {
      border-bottom: 6px solid transparent;
      border-right: 6px solid ;
      border-top: 6px solid transparent;
      content: '';
      display: block;
      height: 0;
      position: absolute;
      right: 4px;
      top: 4px;
      width: 20px;
    }

    &.e-device .e-ricon::after {
      border-bottom: 6px solid transparent;
      border-left: 6px solid;
      border-top: 6px solid transparent;
      content: '';
      display: block;
      height: 0;
      left: 4px;
      position: absolute;
      top: 4px;
      width: 20px;
      z-index: 3;
    }

    &.e-rcursor,
    & .e-gridheader .e-stackedheadercell.e-rcursor,
    & .e-gridheader .e-rcursor {
      cursor: col-resize;
    }

    &.e-editing .e-gridheader .e-rcursor {
      cursor: default;
    }

    .e-table {
      border-collapse: separate;
      table-layout: fixed;
      width: 100%;
    }

    .e-tableborder {
      border-right: 1px solid;
    }

    .e-virtualtable {
      will-change: transform;
      z-index: 1;
    }

    .e-headercelldiv {
      border: 0 none;
      display: block;
      font-size: $grid-header-font-size;
      font-weight: $grid-header-font-weight;
      height: $grid-header-height;
      line-height: $grid-headercelldiv-line-height;
      margin: $grid-headercelldiv-margin;
      overflow: hidden;
      padding: $grid-headercell-div-padding;
      text-align: left;
      text-transform: $grid-header-text-transform;
      user-select: none;
    }

    .e-headercelldiv.e-headerchkcelldiv {
      overflow: visible;
    }

    .e-gridheader .e-headercontent .e-rightalign .e-headercelldiv.e-headerchkcelldiv {
      padding: 0 .6em;
    }

    .e-gridheader .e-headercontent .e-centeralign .e-headercelldiv.e-headerchkcelldiv {
      padding: 0 .6em;
    }

    .e-headercell,
    .e-headercell.e-stackedheadercell,
    .e-headercell.e-defaultcursor {
      cursor: default;
    }

    .e-headercell.e-mousepointer,
    .e-headercell.e-stackedheadercell.e-mousepointer {
      cursor: pointer;
    }

    .e-gridheader .e-headercell,
    .e-gridheader .e-detailheadercell {
      user-select: none;
    }

    &: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 th {
        border-top: 0 none;
      }

      & tr th:last-child.e-filterbarcell  {
        padding-right:  $grid-filterbarcell-first-last-child-padding-left;
      }

      & tr th:last-child  {
        padding-right:  $grid-header-first-last-cell-padding;
      }

      & tr th:first-child  {
        padding-left: $grid-header-first-last-cell-padding;
      }

      & 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;
      border-top-style: $grid-border-type;
      border-top-width: $grid-border-size;
    }

    .e-frozenhdrcont,
    .e-frozenhdr {
      border-bottom-width: 0;
    }

    .e-frozenhdrcont table tr:not(.e-editedrow):first-child td:not(.e-xlsel-top-border) {
      border-top-style: $grid-border-type;
      border-top-width: $grid-bottom-border-size;
    }

    &.e-bothlines .e-filterbarcell,
    &.e-bothlines .e-filterbarcelldisabled {
      border-width: $grid-filtercell-both-border-width;
    }

    .e-headercell,
    .e-detailheadercell {
      border-style: $grid-border-type;
      border-width: $grid-header-border-width;
      font-size: $grid-header-font-size;
      font-weight: $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-device .e-headercell:first-child {
      padding: $grid-device-headercell-fistchild-padding;
    }

    &.e-device .e-headercell:last-child {
      padding: $grid-device-headercell-lastchild-padding;
    }

    .e-rowcell {
      border-style: $grid-border-type;
      border-width: $grid-rowcell-broder-width;
      display: table-cell;
      font-size: $grid-content-font-size;
      line-height: $grid-rowcell-line-height;
      overflow: hidden;
      padding: $grid-content-padding $grid-content-right-padding;
      vertical-align: middle;
      white-space: nowrap;
      width: auto;
    }

    &.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) {
      line-height: $grid-rowcell-autofill-top-line-height;
      border-width : 1.5px;
    }

    &.e-rtl.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-rtl.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;
    }

    &.e-rtl.e-default.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-rtl.e-default.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;
    }

    &.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),
    &.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;
    }

    &.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),
    &.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;
    }

    .e-frozenheader table .e-insertedrow td.e-rowcell,
    .e-frozencontent table .e-insertedrow td.e-rowcell,
    .e-movableheader table .e-insertedrow td.e-rowcell,
    .e-movablecontent table .e-insertedrow td.e-rowcell,
    &: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-input-group input.e-input,
    .e-editedrow .e-input-group.e-control-wrapper input.e-input,
    .e-addedrow .e-input-group input.e-input,
    .e-addedrow .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,
    &:not(.e-grid-min-height) .e-gridcontent tr.e-row .e-rowcell:empty {
      height: $grid-rowcell-line-height + $grid-content-padding + $grid-content-padding;
    }

    &.e-afenabled,
    &.e-enabledboxbdr {
        .e-movablecontent,
        .e-frozencontent,
        .e-movableheader,
        .e-frozenheader,
        .e-headercontent {
      position: relative;
      }
    }

    .e-rowcell:first-child,
    .e-summarycell:first-child {
      padding-left: $grid-first-last-rowcell-padding;
    }

    .e-rowcell:last-child,
    .e-summarycell:last-child {
      padding-right: $grid-first-last-rowcell-padding;
    }

    .e-unboundcell,
    .e-editedrow .e-normaledit .e-unboundcell,
    .e-addedrow .e-normaledit .e-unboundcell {
      padding-bottom: 4px;
      padding-top: 4px;
    }

    .e-unboundcelldiv > button {
      margin: $grid-unboundcelldiv-margin;
      @if $grid-skin == 'material3' {
        border-radius: 8px;
      }
    }

    .e-unboundcelldiv {
      margin: 0 -3.5px;
    }

    .e-summarycell {
      border-style: solid;
      border-width: 1px 0 0;
      font-size: $grid-summary-cell-font-size;
      font-weight: $grid-header-font-weight;
      height: auto;
      line-height: $grid-summary-cell-line-height;
      padding: $grid-content-padding $grid-content-right-padding;
      @if $grid-skin == 'tailwind' {
        padding: $grid-group-caption-header-padding $grid-content-right-padding;
      }
      white-space: normal;
      word-wrap: break-word;
    }

    .e-summarycontent {
        display: flex;
      & .e-frozenfootercontent {
        float: left;
        width: min-content;
      }

      & .e-frozen-right-footercontent {
          float: right;
          & .e-firstsummarycell {
            border-left: 1px solid;
            border-color: $grid-cell-border-color;
          }
      }

      & .e-movablefootercontent {
        height: inherit;
        overflow: hidden;
        flex: 1;
      }

      & .e-indentcell {
        border-width: 1px 0 0;
      }

      & .e-detailindentcelltop {
        border-width: 1px 0 0;
      }
    }

    &.e-device .e-rowcell,
    &.e-device .e-summarycell {
      padding: $grid-device-rowcell-padding;
    }

    &.e-device .e-rowcell:first-child,
    &.e-device .e-summarycell:first-child {
      padding: $grid-device-rowcell-firstchild-padding;
    }

    &.e-device .e-rowcell:last-child,
    &.e-device .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;
    }

    td.e-rowcell.e-checkbox input[type='checkbox'] {
      margin-top: $grid-td-checkbox-margin-top;
    }

    &.e-default .e-rowcell.e-lastrowcell:not(.e-xlsel-bottom-border) {
      border-bottom-width: 1px;
    }

    &.e-default .e-detailrowcollapse.e-lastrowcell {
        border-bottom-width: 1px;
    }

    &.e-default .e-detailrow .e-lastrowcell {
        border-bottom: 1px solid;
        border-bottom-color: $grid-header-border-color;
    }

    &.e-bothlines .e-rowcell.e-lastrowcell:not(.e-xlsel-bottom-border) {
      border-bottom-width: 1px;
    }

    &.e-bothlines .e-rowcell {
      border-width: $grid-rowcell-both-border-width;
    }

    .e-gridheader table th[rowspan],
    &.e-device .e-gridheader table th[rowspan] {
      padding-bottom: $grid-stackedheadercell-botttom-padding;
      vertical-align: bottom;
    }

    .e-emptyrow td {
      line-height: $grid-rowcell-line-height;
      padding: .7em;
    }

    &.e-responsive .e-rowcell,
    &.e-responsive .e-headercelldiv {
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &.e-responsive .e-rowcell.e-gridchkbox,
    &.e-responsive .e-rowcell.e-gridchkbox-cell,
    &.e-responsive .e-headercelldiv.e-headerchkcelldiv {
      text-overflow: clip;
    }

    &.e-default .e-headercell,
    &.e-default .e-detailheadercell {
      border-width: $grid-header-border-width;
    }

    [aria-selected] + tr .e-detailindentcell {
      border-top-style: $grid-border-type;
      border-top-width: $grid-border-size;
    }

    &.e-default.e-verticallines .e-headercell,
    &.e-default.e-verticallines .e-detailheadercell {
      border-width: 0 0 0 $grid-border-size;
    }

    &.e-default.e-verticallines .e-headercell.e-stackedheadercell {
      border-bottom: $grid-border-size solid;
    }

    &.e-default .e-stackedheadercell {
      border-width: $grid-stackedheadercell-border-size;
    }

    &.e-default .e-stackedheadercell.e-leftfreeze.e-freezeleftborder {
      border-right-width: 2px;
    }

    &.e-default .e-stackedheadercell.e-rightfreeze.e-freezerightborder {
      border-left-width: 2px;
    }

    &.e-default .e-stackedheadercell.e-fixedfreeze.e-freezeleftborder {
      border-left-width: 1px;
    }

    &.e-default .e-stackedheadercell.e-fixedfreeze.e-freezerightborder {
      border-right-width: 1px;
    }

    &.e-default.e-verticallines tr th:first-child:not(.e-firstcell) {
      border-left-width: 0;
    }

    &.e-default.e-bothlines .e-headercell,
    &.e-default.e-bothlines .e-detailheadercell {
      border-width: $grid-headercell-both-border-width;
    }

    &.e-default table th[rowspan]  {
      border-width: $grid-headercell-both-border-width;
    }

    &.e-default table th[rowspan].e-leftfreeze.e-freezeleftborder {
      border-right-width: 2px;
    }
  
    &.e-default table th[rowspan].e-rightfreeze.e-freezerightborder {
      border-left-width: 2px;
    }
  
    &.e-default table th[rowspan].e-fixedfreeze.e-freezeleftborder {
      border-left-width: 1px;
    }
      
    &.e-default table th[rowspan].e-fixedfreeze.e-freezerightborder {
      border-right-width: 1px;
    }
  
    &.e-default.e-verticallines tr th:first-child:not(.e-firstcell) {
      border-left-width: 0;
    }

    tr  th.e-firstcell {
      border-left-style: $grid-border-type;
      border-left-width: $grid-border-size;
    }

    &.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),
        & th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
        & th.e-filterbarcell:first-child:not(.e-filterbarcell.e-frozen-left-border) {
            border-left-width: 0;  
        }
    }

    &.e-default .e-gridheader th.e-firstcell.e-movablefirst{
      border-left-width: 0;
    }

    .e-hide {
      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 {
      float: right;
      height: $grid-sortdiv-height;
      margin: $grid-sortdiv-margin;
      padding: $grid-sortdiv-padding;
      width: $grid-sortdiv-width;
    }

    .e-gridheader .e-rightalign .e-sortfilterdiv {
      float: left;
      margin: $grid-sortdiv-right-align-margin;
    }

    .e-gridheader .e-sortfilter .e-rightalign .e-headercelldiv,
    .e-gridheader .e-rightalign .e-stackedheadercelldiv {
      padding: $grid-headercelldiv-right-align-padding;
      @if $grid-skin == 'material3' {
        margin-left: 8px;
      }
    }

    .e-gridheader .e-sortfilter .e-rightalign.e-fltr-icon .e-headercelldiv {
      margin: $grid-headercelldiv-rightalign-fltricon-margin;
    }


    .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv {
      margin: $grid-headercelldiv-fltricon-margin;
    }

    .e-gridheader .e-sortfilter .e-headercelldiv,
    .e-gridheader .e-stackedheadercelldiv {
      padding: $grid-headercelldiv-padding;
    }

    .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
      @if $grid-skin == 'bootstrap5' {
        padding-left: 8px;
      }
      @else if $grid-skin == 'fluent' {
        padding-left: 5px;
        margin-bottom: -6px;
      }
      @else {
        padding: $grid-headercelldiv-padding;
      }
    }

    &.e-rtl .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
      padding: $grid-rtl-headercelldiv-chkbox-padding;
    }

    .e-filtermenudiv {
      float: $grid-fltrdiv-float;
      margin: $grid-fltrdiv-margin;
      padding: $grid-fltrdiv-padding;
      text-align: $grid-fltrdiv-text-align;
    }

    .e-filtermenudiv:hover {
      cursor: pointer;
    }

    &.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-flmenu-valuediv {
      padding: $grid-flmenu-padding;
    }

    .e-flbldcontent {
      padding: $grid-flmenu-boolean-content-padding;
    }

    .e-flblbtn {
      width: $grid-flmenu-boolean-button-width;
    }


    .e-sortnumber {
      border-radius: $grid-sortnumber-border-radius;
      display: inline-block;
      float: right;
      font-size: $grid-sortnumber-font-size;
      height: $grid-sort-number-size;
      line-height: $grid-sortnumer-line-height;
      margin: $grid-sortnumber-margin;
      text-align: center;
      width: $grid-sort-number-size;
    }

    .e-gridheader .e-fltr-icon .e-sortnumber {
      margin: $grid-fltr-sortnumber-margin;
    }

    .e-gridheader .e-rightalign.e-fltr-icon .e-sortnumber {
      float: left;
      margin: $grid-fltr-sortnumber-rightalign-margin;
    }

    .e-gridheader .e-rightalign .e-sortnumber {
      float: left;
      margin: $grid-sortnumber-rightalign-margin;
    }

    .e-gridheader .e-fltr-icon .e-sortfilterdiv {
      margin: $grid-sortdiv-filtericon-margin;
    }

    .e-gridheader .e-rightalign.e-fltr-icon .e-sortfilterdiv {
      margin: $grid-sortdiv-filtericon-rightalign-margin;
    }


    &.e-wrap .e-gridheader .e-rightalign .e-sortnumber {
      margin: $grid-textwrap-srotnumber-rightalign-margin;
    }

    &.e-wrap .e-gridheader .e-sortnumber {
      margin: $grid-textwrap-srotnumber-margin;
    }

    &.e-wrap .e-gridheader .e-sortfilterdiv {
      margin: $grid-textwrap-sorticon-margin;
    }

    .e-movableheader .e-editcell.e-normaledit,
    .e-frozenheader .e-editcell.e-normaledit {
      border-top-color: transparent;
    }

    .e-columnmenu {
      position: absolute;
      right: 23px;
      float: right;
      margin: $grid-column-menu-margin;
      padding: $grid-column-menu-padding;
    }

    &.e-wrap .e-columnmenu {
      line-height: $grid-wrap-line-height;
    }

    &.e-rtl .e-columnmenu {
      left: $grid-rtl-column-menu-left;
      right: auto;
      margin: $grid-rtl-column-menu-margin;
      @if $grid-skin == 'tailwind' {
        margin: -13px 4px -13px -18px;
      }
    }

    &.e-wrap {
      &.e-rtl  .e-columnmenu {
        line-height: $grid-wrap-line-height;
      }
    }

    [class^='e-'] {
      box-sizing: border-box;
    }

    .e-rowdragdropcell {
      border-style: $grid-border-type;
      border-width: $grid-rowcell-broder-width;
    }

    .e-detailrowcollapse,
    .e-detailrowexpand {
      border-style: $grid-border-type;
      border-width: $grid-rowcell-broder-width;
      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 {
      border-top-style: $grid-border-type;
      border-top-width: $grid-border-size;
      padding: .3em;
      font-weight: normal;
      text-align: left;
    }

    th.e-detailcell .e-rowcell,
    th.e-detailcell .e-gridpager {
      text-align: left;
    }

    &.e-rtl th.e-detailcell .e-rowcell,
    &.e-rtl th.e-detailcell .e-gridpager,
    th.e-detailcell .e-rtl .e-rowcell,
    th.e-detailcell .e-rtl .e-gridpager {
      text-align: right;
    }

    &.e-verticallines .e-rowcell,
    &.e-verticallines .e-filterbarcell {
      border-width: 0 0 0 $grid-border-size;
    }

    &.e-hidelines .e-rowcell,
    &.e-horizontallines .e-headercell,
    &.e-hidelines .e-headercell,
    &.e-horizontallines .e-detailheadercell,
    &.e-hidelines .e-detailheadercell,
    &.e-hidelines tr th.e-firstcell,
    &.e-hidelines .e-filterbarcell {
      border-width: 0;
    }

    &.e-horizontallines .e-headercell.e-stackedheadercell {
      border-width: 0 0  $grid-border-size  $grid-border-size;
    }

    &.e-horizontallines .e-rowcell {
      border-width: $grid-border-size 0 0;
    }

    &.e-horizontallines .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-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;
    }

    /* stylelint-enable */
    .e-filterbarcell,
    .e-filterbarcelldisabled {
      border-collapse: collapse;
      border-style: $grid-border-type;
      border-width: $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;
      border-style: $grid-border-type;
      border-width: $grid-filterbarcell-border-width;
    }

    .e-filterbarcell input {
      border-radius: $grid-filterbar-border-radius;
      border-style: solid;
      border-width: $grid-filterbar-input-border-width;
      font-size: $grid-font-size;
      font-weight: 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-device .e-filterbarcell:first-child {
      padding: $grid-device-filterbarcell-firstchild-padding;
    }

    &.e-device .e-filterbarcell:last-child {
      padding: $grid-device-filterbarcell-lastchild-padding;
    }

    .e-searchclear {
      float: right;
      position: relative;
    }

    &.e-rtl .e-searchclear {
      float: left;
      position: relative;
    }

    .e-checkboxlist {
      height: 200px;
      margin-top: 5px;
      min-height: 160px;
      overflow-y: auto;
    }

    .e-checkfltrnmdiv {
      height: 60px;
      padding: 23px;
      text-align: center;
    }

    .e-checkboxlist > span {
      padding-left: $grid-checkbox-padding-topbottom;
    }

    .e-chk-hidden {
      -moz-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
      height: 1px;
      opacity: 0;
      width: 1px;
    }

    .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-dialog.e-checkboxfilter,
    .e-dialog.e-flmenu {
      min-width: 250px;

      & .e-dlg-content {
        border-radius: $grid-filter-border-radius;
      }
    }

    .e-dialog.e-checkboxfilter {
      min-height: $grid-checkbox-filter-min-height;
    }

    .e-checkboxfilter .e-searchbox {
      display: block;
    }

    .e-checkboxfilter {
      & .e-dlg-content {
        padding-left: $grid-checkbox-content-padding-left;
        @if $grid-skin == 'material3' {
          padding-top: 16px;
          padding-right: 16px;
        }
      }

      & .e-ftrchk,
      & .e-searchbox {
        padding-left: $grid-checkbox-padding-topbottom;
      }
    }

    .e-ftrchk {
      padding-bottom: $grid-checkbox-padding-topbottom;
      padding-top: $grid-checkbox-padding-topbottom;
      @if $grid-skin == 'material3' {
        margin-left: -4px;
      }
    }

    .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-gridpopup .e-content {
      border-radius: 4px;
      border-style: solid;
      border-width: $grid-border-size;
      font-size: 14px;
      padding: 4px;
    }

    .e-footerpadding .e-lastsummarycell {
      border-left: none;
      border-right: 1px solid;
    }

    &.e-rtl .e-footerpadding tr.e-summaryrow {
      & td.e-lastsummarycell:last-child {
        border-right: none;
        border-left: 1px solid $grid-cell-border-color;
      }
    }

    .e-footerpadding {
      padding-left: 0;
      padding-right: 14px; //need to consider from javascript
    }

    &.e-rtl .e-footerpadding {
      padding-left: 14px; //need to consider from javascript
      padding-right: 0;
    }

    .e-gridpopup span {
      border: 1px solid transparent;
      cursor: pointer;
      display: inline-block;
      height: 26px;
      padding: 4px;
      width: 26px;
    }

    .e-gridpopup .e-tail::before,
    .e-gridpopup .e-tail::after {
      border: 10px solid transparent;
      content: '';
      height: 0;
      @if $grid-skin == 'material3' {
        left: 12px;
      }
      @else {
        left: 8px;
      }
      position: absolute;
      width: 0;
    }

    .e-gridpopup .e-downtail::after {
      top: 34px;
    }

    .e-gridpopup .e-uptail::after {
      top: -17px;
    }

    .e-gridpopup .e-uptail::before {
      top: -19px;
    }

    .e-gridpopup .e-sortdirect,
    .e-gridpopup .e-rowselect {
      @if $grid-skin == 'material3' {
        font-size: 20px;
        padding: 2px 6px;
        line-height: 20px;
        width: 34px;
      }
      @else {
        line-height: 18px;
      }
      text-indent: $grid-rowselect-text-indent;
    }

    .e-cloneproperties {
      border-style: solid;
      border-width: $grid-border-size;
      box-shadow: $grid-group-clone-box-shadow;
      font-size: $grid-header-font-size;
      font-weight: $grid-drag-clone-font-weight;
      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: 4px;
      }
      user-select: none;
      vertical-align: middle;
      white-space: nowrap;
      z-index: 10;
    }

    .e-cloneproperties.e-draganddrop {
      border-spacing: 0;
      font-size: $grid-header-font-size;
      font-weight: normal;
      overflow: visible;
    }

    .e-cloneproperties.e-draganddrop table {
      border-spacing: 0;
    }

    .e-defaultcur {
      cursor: default;
    }

    .e-notallowedcur {
      cursor: not-allowed;
    }

    .e-grabcur {
      cursor: grabbing;
    }

    .e-cloneproperties.e-headerclone table {
      border-spacing: 0;
    }

    .e-headerclone {
      border-radius: $group-header-border-radius;
      font-size: $grid-header-font-size;
      font-weight: $grid-drag-clone-font-weight;
      line-height: 29px;
    }

    .e-draganddrop {
      border-width: 0 1px 1px;
      font-weight: normal;
      padding: 0;
    }

    .e-draganddrop .e-rowcell {
      opacity: .95;
    }

    &.e-default .e-gridheader th.e-firstcell,
    &.e-default .e-gridheader th.e-laststackcell {
      border-left-style: $grid-border-type;
      border-left-width: $grid-border-size;
    }

    &.e-bothlines .e-gridheader th.e-stackedheadercell {
      border-bottom-style: $grid-border-type;
      border-bottom-width: $grid-border-size;
      border-left-style: $grid-border-type;
      border-left-width: $grid-border-size;
    }

    &.e-default.e-hidelines .e-gridheader th.e-firstcell {
      border-left-width: 0;
    }

    .e-gridheader .e-headercontent .e-reorderuparrow,
    .e-gridheader .e-headercontent .e-reorderdownarrow,
    .e-gridheader .e-headercontent .e-reorderuparrow-virtual,
    .e-gridheader .e-headercontent .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-rtl {
      .e-gridheader .e-headercontent .e-reorderuparrow,
      .e-gridheader .e-headercontent .e-reorderdownarrow,
      .e-gridheader .e-headercontent .e-reorderuparrow-virtual,
      .e-gridheader .e-headercontent .e-reorderdownarrow-virtual {
        @if $grid-skin == 'material3' {
          margin-left: -1.3px;
        }
      }
    }

    .e-gridheader .e-headercontent .e-reorderuparrow {
      margin-top: $grid-reorderarrow-margin-top;
    }

    .e-gridheader .e-headercontent .e-reorderdownarrow {
      margin-top: $grid-reorderdownarrow-margin-top;
    }

    td.e-active {
      font-weight: $grid-selection-font-weight;
    }

    &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
    td.e-cellselectionbackground {
      font-weight: $grid-selection-font-weight;
      @if $grid-skin == 'material3' {
        border: 1px solid rgba($content-text-color);
        padding-bottom: 7px;
        padding-left: 7.5px;
        padding-right: 7.5px;
      }
    }

    &.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,
    .e-bigger &.e-bothlines.e-rtl td.e-rowcell.e-cellselectionbackground,
    &.e-bothlines.e-bigger.e-rtl td.e-rowcell.e-cellselectionbackground,
    &.e-rtl td.e-rowcell.e-cellselectionbackground,
    .e-bigger &.e-rtl td.e-rowcell.e-cellselectionbackground,
    &.e-bigger.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 {
      @if $grid-skin == 'material3' {
        padding-top: 7px;
      }
    }

    .e-bigger &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
    .e-bigger & td.e-cellselectionbackground,
    &.e-bigger:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
    &.e-bigger td.e-cellselectionbackground {
      @if $grid-skin == 'material3' {
        padding-bottom: 13px;
        padding-left: 11.5px;
        padding-right: 11.5px;
      }
    }

    .e-bigger &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
    &.e-bigger:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground {
      @if $grid-skin == 'material3' {
        padding-top: 13px;
      }
    }

    .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-ungroupdrag .e-groupdroparea,
    &.e-rowdrag .e-columnheader,
    &.e-rowdrag .e-groupdroparea {
      cursor: not-allowed;
    }

    .e-groupdroparea,
    &.e-ungroupdrag .e-gridcontent,
    &.e-rowdrag .e-gridcontent {
      cursor: default;
    }

    .e-groupdroparea {
      border-style: solid none;
      border-width: 1px 0 0;
    }

    .e-groupdroparea {
      border-top-width: $grid-border-size;
      font-size: $grid-grouparea-font-size;
      font-weight: $grid-grouparea-font-weight;
      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;
      font-size: $grouped-text-font-size;
      font-weight: normal;
      height: $grid-headecell-height;
      margin: $grid-grouparea-margin;
      overflow: hidden;
      @if $grid-skin != 'material3' {
        padding: $grid-grouped-headercell-padding;
      }
      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;
      line-height: $grid-group-headercell-line-height;
      padding: $grid-grouped-headercell-span-padding;
      vertical-align: middle;
    }

    .e-groupheadercell .e-grouptext {
      line-height: $grid-group-text-line-height;
      @if $grid-skin == 'bootstrap4' {
        padding-top: 3px;
      }
    }

    .e-groupheadercell .e-ungroupbutton {
      font-size: $grid-ungroup-button-font-size;
      line-height: $grid-ungroup-button-line-height;
    }

    &.e-device .e-groupheadercell span {
      line-height: $grid-touch-device-hdrcell-span-line-height;
    }

    &.e-device .e-groupheadercell .e-ungroupbutton {
      line-height: $grid-touch-device-hdrcell-ungroup-line-height;
    }

    &.e-device .e-groupheadercell .e-groupsort {
      margin-top: $grid-device-groupsort-margin-top;
    }

    .e-groupheadercell .e-cancel {
      padding-right: $group-sorticon-font-size;
    }

    .e-groupheadercell .e-icons::before {
      display: inline;
    }

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

    .e-icon-gdownarrow {
      font-size: $grid-group-down-arrow-icon-font-size;
      padding: $grid-group-down-arrow-icon-padding;
      text-decoration: none;
    }

    .e-icon-grightarrow {
      font-size: $grid-group-right-arrow-icon-font-size;
      padding: $grid-group-right-arrow-icon-padding;
      text-decoration: none;
    }

    .e-recordplusexpand {
      padding-top: 5px;
    }

    .e-indentcell {
      border-style: $grid-border-type;
      border-width: 0 $grid-border-size 0 0;

      &.e-indentcelltop,
      &.e-detailindentcelltop {
        border-width: $grid-border-size 0 0;
      }
    }

    .e-recordplusexpand,
    .e-recordpluscollapse {
      border-style: $grid-border-type;
      border-width: $grid-border-size 0 0;
      cursor: pointer;
      @if $grid-skin == 'material3' {
        padding-top: 6px;
      }
    }

    .e-disablepointer {
      cursor: default;
    }

    .e-groupcaption {
      border-style: $grid-border-type;
      border-width: $grid-border-size 0 0;
      display: table-cell;
      font-size: $grid-group-caption-font-size;
      @if $grid-skin == 'material3' {
        font-weight: 500;
      }
      line-height: $grid-group-captioncell-line-height;
      overflow: hidden;
      padding: $grid-group-caption-header-padding;
      text-overflow: ellipsis;
      vertical-align: middle;
      white-space: nowrap;
      width: auto;
    }

    .e-virtualtable .e-groupcaption {
      line-height: $grid-rowcell-line-height;
      padding: $grid-content-padding $grid-content-right-padding;
    }

    .e-autofill {
      border: 1px solid;
      height: 8px;
      position: absolute;
      user-select: none;
      width: 8px;
    }

    .e-headercontent {
      border-style: solid;
      border-width: 0;
    }

    .e-stackedheadercell {
      border-width: $grid-stackedheadercell-border-size;
      white-space: nowrap;
    }

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

    .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-edit-dialog .e-dlg-content {
      position: relative;
    }

    .e-edit-dialog {
      min-height: 350px;
    }

    /* stylelint-disable */
    .e-griderror label {
      display: inline !important;
    }
    /* stylelint-enable */

    .e-tooltip-wrap.e-griderror {
      z-index: 1000;
    }

    .e-tooltip-wrap.e-griderror .e-arrow-tip.e-tip-top {
      left: 44%;
    }

    .e-normaledit .e-rowcell {
      padding-bottom: 0;
      padding-top: 0;
    }

    &.e-device .e-normaledit .e-rowcell {
      padding-bottom: $grid-edit-cell-padding;
      padding-top: $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-normaledit {
      border-top: 0;
      padding: 0;
    }

    .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 {
      padding-bottom: 0;
      padding-top: 0;
    }

    .e-editedbatchcell,
    td.e-boolcell {
      padding-left: $grid-content-right-padding;
      padding-right: $grid-content-right-padding;
    }

    td.e-boolcell input {
      margin: 3px 3px 3px 4px;
    }

    td.e-boolcell.e-rowcell {
      padding-bottom: 5px;
      padding-top: 5px;
    }

    .e-dialog .e-gridform .e-rowcell {
      border: 0;
      padding: 0;
    }
    .e-row .e-input-group .e-input.e-field,
    .e-row .e-input-focus .e-input.e-field {
      font-family: $grid-font-family;
      font-size: $grid-font-size;
      padding-bottom: $grid-edit-input-padding-bottom;
      padding-top: $grid-edit-input-padding-top;
    }

    .e-row .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-dlg-content .e-defaultcell.e-ralign:focus {
      padding-right: 0;
    }

    .e-hiddenrow {
      display: none;
    }

    .e-columnchooserdiv {
      float: right;
      margin: -12px;
    }

    .e-bigger & .e-ccdlg .e-checkbox-wrapper span.e-label,
    &.e-bigger .e-ccdlg .e-checkbox-wrapper span.e-label {
      @if $grid-skin == 'material3' {
        font-size: $text-base;
      }
    }

    .e-ccdlg {

      .e-dlg-content {
        margin: $grid-columnchooser-content-margin;
        overflow: visible;
        padding: $grid-columnchooser-content-padding;
      }

      .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 {
        margin: $grid-columnchooser-ul-margin;
        padding: $grid-columnchooser-ul-padding;
      }

      li.e-cclist {
        padding: $grid-columnchooser-li-padding;
      }

      .e-checkbox-wrapper .e-frame {
        margin-left: 0;
      }

      label.e-cc {
        margin: 0;
      }

      .e-footer-content {
        border-style: solid;
        border-width: $grid-column-chooser-footdiv;
      }

      .e-cc-contentdiv {
        height: 196px;
        overflow-y: auto;
      }

      .e-cc-searchdiv {
        border-style: solid;
        border-width: $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 {
        height: 60px;
        padding: 23px;
        text-align: center;
      }

      .e-checkbox-wrapper .e-label {
        text-overflow: ellipsis;
      }

      .e-cc-chbox {
        margin: 3px;
        vertical-align: middle;
      }

      .e-cc-lab-name {
        padding: 7px;
        text-overflow: ellipsis;
        vertical-align: middle;
      }

      .e-cc.e-input,
      .e-cc.e-input:focus {
        border: $grid-columnchooser-input-border;
        padding-bottom: $grid-columnchooser-input-padding-bottom;
        padding-left: $grid-columnchooser-input-padding-left;
        padding-top: $grid-columnchooser-input-padding-top;
      }
    }

    .e-checkboxfiltertext {
      width: $grid-checkboxfiltertext-width;
      word-break: normal;
      /* stylelint-disable */
      @if $grid-skin == 'fluent' {
        margin-left: 12px !important;
      }
      /* stylelint-enable */
    }

    .e-frozenhdrcont .e-headercontent > .e-table,
    .e-frozenhdrcont .e-frozenheader > .e-table,
    .e-frozenhdrcont .e-movableheader > .e-table,
    .e-frozenhdrcont .e-headercontent .e-virtualtable > .e-table {
      border-bottom: $frozen-border;
    }

    .e-frozenheader > .e-table,
    .e-frozencontent > .e-table,
    .e-frozenheader .e-virtualtable > .e-table,
    .e-frozencontent .e-virtualtable > .e-table {
      border-left: 0;
      border-right: $frozen-border;
    }

    .e-frozenheader.e-frozen-right-header > .e-table,
    .e-frozencontent.e-frozen-right-content > .e-table,
    .e-rowcell .e-frozen-default-cursor,
    .e-gridheader .e-headercell .e-frozen-default-cursor,
    .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-leftfreeze,
    .e-rightfreeze {
      position: sticky;
      z-index: 2;
    }

    .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-xlsel-bottom-border.e-xlsel-top-border {
        line-height: $grid-rowcell-autofill-top-height;
      }
      .e-xlsel-bottom-border {
        line-height: $grid-rowcell-autofill-top-bottom-height;
      }
    }

    &.e-rtl.e-wrap {
      .e-xlsel-bottom-border.e-xlsel-top-border {
        line-height: $grid-rowcell-autofill-top-height;
      }
      .e-xlsel-bottom-border {
        line-height: $grid-rowcell-autofill-top-bottom-height;
      }
    }

    .e-xlsel-bottom-border.e-xlsel-top-border {
      line-height: $grid-rowcell-autofill-top-bottom-line-height;
    }

    &.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-leftfreeze.e-freezeleftborder {
      border-right-width: 2px;
    }

    &.e-left-shadow .e-leftfreeze.e-freezeleftborder:not(.e-dragborder) {
      clip-path: inset(0 -15px 0 0);
      box-shadow: 4px 0 8px $grid-frozen-shadow-background-color;
    }

    &.e-left-shadow .e-leftfreeze.e-freezeleftborder:not(.e-xlsel-right-border) {
      border-right-color: transparent;
    }

    &.e-left-shadow .e-leftfreeze.e-freezeleftborder.e-dragborder {
      box-shadow: $grid-dragborder-box-shadow, 4px 0 8px $grid-frozen-shadow-background-color;
    }

    &.e-rtl.e-left-shadow .e-leftfreeze.e-freezeleftborder:not(.e-dragborder) {
      clip-path: inset(0 0 0 -15px);
      box-shadow: -4px 0 8px $grid-frozen-shadow-background-color;
    }

    &.e-rtl.e-left-shadow .e-leftfreeze.e-freezeleftborder:not(.e-xlsel-left-border) {
      border-left-color: transparent;
    }

    &.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-rightfreeze.e-freezerightborder {
      border-left-width: 2px;
    }

    &.e-right-shadow .e-rightfreeze.e-freezerightborder:not(.e-dragborder) {
      clip-path: inset(0 0 0 -15px);
      box-shadow: -4px 0 8px $grid-frozen-shadow-background-color;
    }

    &.e-right-shadow .e-rightfreeze.e-freezerightborder:not(.e-xlsel-left-border) {
      border-left-color: transparent;
    }

    &.e-right-shadow .e-rightfreeze.e-freezerightborder.e-dragborder {
      box-shadow: $grid-dragborder-box-shadow, -4px 0 8px $grid-frozen-shadow-background-color;
    }

    &.e-rtl.e-right-shadow .e-rightfreeze.e-freezerightborder:not(.e-dragborder) {
      clip-path: inset(0 -15px 0 0);
      box-shadow: 4px 0 8px $grid-frozen-shadow-background-color;
    }

    &.e-rtl.e-right-shadow .e-rightfreeze.e-freezerightborder:not(.e-xlsel-right-border) {
      border-right-color: transparent;
    }

    &.e-rtl.e-right-shadow .e-rightfreeze.e-freezerightborder.e-dragborder {
      box-shadow: $grid-dragborder-box-shadow, 4px 0 8px $grid-frozen-shadow-background-color;
    }

    .e-fixedfreeze.e-freezeleftborder {
      border-left-width: 1px;
    }

    .e-fixedfreeze.e-freezerightborder {
      border-right-width: 1px;
    }

    .e-frozenheader {
      float: left;
      width: min-content;
    }

    .e-frozenheader.e-frozen-right-header {
      float: right;
    }

    &.e-rtl .e-frozenheader > .e-table,
    &.e-rtl .e-frozencontent > .e-table,
    &.e-rtl .e-frozenheader .e-virtualtable > .e-table,
    &.e-rtl .e-frozencontent .e-virtualtable > .e-table {
      border-left: $frozen-border;
      border-right: 0;
    }

    &.e-rtl .e-frozenheader.e-frozen-right-header > .e-table,
    &.e-rtl .e-frozencontent.e-frozen-right-content > .e-table {
      border-left: 0;
      border-right: $frozen-border;
    }

    &.e-rtl .e-frozenheader {
      float: right;
    }

    &.e-rtl .e-frozenheader.e-frozen-right-header {
      float: left;
    }

    &.e-rtl .e-frozencontent {
      float: right;
    }

    &.e-rtl .e-frozen-right-content {
      float: left;
    }

    &.e-rtl .e-frozenfootercontent {
      float: right;
    }

    &.e-rtl .e-frozen-right-footercontent {
      float: left;
    }

    .e-movableheader {
      overflow: hidden;
    }

    .e-frozenhdrcont {
      -ms-touch-action: none; /* stylelint-disable-line property-no-vendor-prefix */
    }

    .e-frozencontent {
      -ms-touch-action: none; /* stylelint-disable-line property-no-vendor-prefix */
      border-bottom-width: $grid-border-size;
      float: left;
      width: min-content;
    }

    .e-frozen-right-content {
      float: right;
    }

    .e-movablecontent {
      // Internet Explorer 10+
      -ms-overflow-style: none; /* stylelint-disable-line property-no-vendor-prefix */
      flex: 1;
      overflow-x: auto;
      overflow-y: hidden;
    }

    // Safari and Chrome
    &:not(.sf-grid) .e-movablecontent::-webkit-scrollbar { /* stylelint-disable-line property-no-vendor-prefix */
      display: none;
    }

    // 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: 4px;
    }

    .e-frozenscrollbar {
      border-top: 1px solid $grid-cell-border-color;
    }

    .e-movablescrollbar {
      flex: 1;
      overflow: hidden;
      overflow-x: scroll;
    }

    .e-columnchooser::before {
      line-height: $grid-columnchooser-toolbar-icon-line-height;
    }

    .e-toolbar .e-ccdiv .e-columnchooser.e-cctbn-icon {
      font-size: $grid-columnchooser-toolbar-icon-font-size;
      vertical-align: $grid-columnchooser-toolbar-icon-vertical-align;
    }

    .e-toolbar .e-ccdiv {
      margin-top: $grid-columnchooser-toolbar-div-margin-top;
      padding: $grid-columnchooser-toolbar-div-padding;
    }

    &.e-rtl {
      .e-tableborder {
        border-left: 1px solid;
        border-right: 0;
      }

      .e-checkboxfilter {
        & .e-dlg-content {
          padding-left: $grid-rtl-checkbox-content-padding-left;
          padding-right: $grid-checkbox-content-padding-left;
        }

        & .e-ftrchk,
        & .e-searchbox {
          padding-left: 0;
          padding-right: $grid-checkbox-padding-topbottom;
        }
      }

      .e-leftfreeze.e-freezeleftborder {
        border-left-width: 2px;
      }
    
      .e-rightfreeze.e-freezerightborder {
        border-right-width: 2px;
      }
  
      .e-fixedfreeze.e-freezeleftborder {
        border-right-width: 1px;
      }
  
      .e-fixedfreeze.e-freezerightborder {
        border-left-width: 1px;
      }

      & .e-headercell,
      & .e-detailheadercell {
        border-width: $grid-rtl-headercell-border-width;
        text-align: right;

        &.e-fltr-icon {
          & .e-headercelldiv,
          .e-headercelldiv.e-headerchkcelldiv {
            padding: $grid-rtl-headercelldiv-padding;
            text-align: right;

            & .e-sortnumber {
              float: left;
              margin: $grid-fltr-rtl-sortnumber-margin;
            }
          }
        }

        & .e-headercelldiv,
        .e-headercelldiv.e-headerchkcelldiv {
          padding: $grid-rtl-headercelldiv-padding;
          text-align: right;

          & .e-sortnumber {
            float: left;
            margin: $grid-rtl-sortnumber-margin;
          }
        }

        & .e-filterbarcell input {
          border-width: $grid-filterbar-input-border-width;
        }

        & .e-sortfilterdiv {
          float: left;
          margin: $grid-rtl-sortcelldiv-margin;
        }

        &.e-leftalign.e-headercell.e-fltr-icon {
          & .e-headercelldiv {
            margin-left: $grid-rtl-headercelldiv-left-align-margin;

            & .e-sortnumber {
              margin: $grid-rtl-sort-num-left-align-margin;
              @if $grid-skin == 'bootstrap4' {
                margin: 4px -2px 0 0;
              }
            }
          }

          & .e-filtermenudiv {
            margin-left: $grid-rtl-filtermenudiv-left-align-margin;
          }
        }

        &.e-leftalign {
          & .e-sortfilterdiv {
            float: right;
            margin: $grid-bigger-sort-margin;
            @if $grid-skin == 'tailwind' {
              margin-bottom: -13px;
              margin-top: -13px;
            }
          }

          & .e-headercelldiv {
            padding: 0 25px 0 .7em;

            & .e-sortnumber {
              float: right;
              margin: $grid-bigger-sort-right-margin;
            }
          }
        }

        &.e-fltr-icon.e-rightalign {
          & .e-sortnumber {
            float: left;
            margin: $grid-fltr-rtl-sortnumber-rightalign-margin;
          }
        }

        &.e-rightalign {
          & .e-sortnumber {
            float: left;
            margin: $grid-rtl-sortnumber-rightalign-margin;
          }
        }
      }

      .e-rowcell:first-child,
      .e-summarycell:first-child {
        padding-right: $grid-header-first-last-cell-padding;
      }

      .e-rowcell:last-child,
      .e-summarycell:last-child {
        padding-left: $grid-header-first-last-cell-padding;
      }

      &.e-wrap .e-gridheader .e-rightalign .e-sortnumber {
        margin: $grid-rtl-textwrap-srotnumber-rightalign-margin;
      }

      &.e-wrap .e-gridheader .e-sortnumber {
        margin: $grid-rtl-textwrap-srotnumber-margin;
      }

      &.e-wrap .e-gridheader .e-sortfilterdiv {
        margin: $grid-rtl-textwrap-sorticon-margin;
      }

      &.e-wrap .e-gridheader .e-rightalign .e-sortfilterdiv {
        margin: $grid-rtl-textwrap-sorticon-rightalign-margin;
      }

      & .e-gridheader .e-fltr-icon .e-sortfilterdiv {
        margin: $grid-rtl-sortdiv-filtericon-margin;
      }

      & .e-gridheader .e-fltr-icon.e-leftalign .e-sortfilterdiv {
        @if $grid-skin == 'tailwind' {
          margin-right: -5px;
        }
      }

      & .e-gridheader .e-rightalign.e-fltr-icon .e-sortfilterdiv {
        margin: $grid-rtl-sortdiv-filtericon-rightalign-margin;
      }

      & .e-gridheader .e-sortfilter .e-rightalign.e-fltr-icon .e-headercelldiv {
        margin: $grid-rtl-headercelldiv-rightalign-fltricon-margin;
      }

      &.e-wrap .e-columnheader .e-rightalign.e-fltr-icon .e-headercelldiv,
      & .e-columnheader.e-wrap .e-rightalign.e-fltr-icon .e-headercelldiv{
        height: auto;
        margin-bottom: $grid-wrap-margin-bottom;
        margin-top: $grid-wrap-margin-top;
      }

      & .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv {
        margin: $grid-rtl-headercelldiv-fltricon-margin;
      }

      &.e-verticallines .e-grouptopleftcell,
      &.e-bothlines .e-grouptopleftcell,
      &.e-hidelines .e-grouptopleftcell {
        border-top: 0;
      }

      & .e-grouptopleftcell {
        border-top: $grid-grouptopleftcell-border-top;
      }

      & .e-groupheadercell 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;
        }
      }

      .e-bigger & .e-groupheadercell span.e-grouptext {
        @if $grid-skin == 'material3' {
          padding-right: 12px;
          margin-left: -8px;
        }
      }

      & .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-rowcell.e-leftfreeze.e-freezeleftborder {
        border-left-width: 2px;
      }

      & .e-rowcell.e-rightfreeze.e-freezerightborder {
        border-right-width: 2px;
      }

      & .e-rowcell.e-fixedfreeze.e-freezeleftborder:not(.e-xlsel-right-border) {
        border-right-width: 1px;
      }

      & .e-rowcell.e-fixedfreeze.e-freezerightborder:not(.e-xlsel-left-border) {
        border-left-width: 1px;
      }

      & .e-stackedheadercell.e-leftfreeze.e-freezeleftborder {
        border-left-width: 2px;
      }
  
      & .e-stackedheadercell.e-rightfreeze.e-freezerightborder {
        border-right-width: 2px;
      }
  
      & .e-stackedheadercell.e-fixedfreeze.e-freezeleftborder {
        border-right-width: 1px;
      }
  
      & .e-stackedheadercell.e-fixedfreeze.e-freezerightborder {
        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-gridheader .e-rightalign .e-sortfilterdiv {
        margin: $grid-rtl-sortcelldiv-right-align-margin;
      }

      & .e-cloneproperties {
        border-width: $grid-border-size $grid-border-size 3px;
      }

      & 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),
        & th:first-child {
          border-left-width: 1px;
        }
      }

      &.e-default.e-bothlines tr td:first-child.e-detailrowcollapse,
      &.e-default.e-bothlines tr td:first-child.e-detailrowexpand {
        border-left-width: 0;
      }

      &.e-default {
        & tr td:last-child:not(.e-xlsel-left-border),
        & .e-gridheader table tr th:last-child {
          border-left: 0;
        }
      }

      &.e-default.e-verticallines tr th:last-child {
        border-left: 1px solid;
      }

      &.e-default .e-gridheader {
        & tr th:last-child  {
          padding-left: $grid-header-first-last-cell-padding;
          padding-right: $grid-header-first-last-cell-padding;
        }

        & tr th:first-child  {
          padding-left: $grid-header-first-last-cell-padding;
          padding-right: $grid-header-first-last-cell-padding;
        }
      }

      &.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-default.e-verticallines .e-rowcell,
      &.e-default.e-verticallines .e-filterbarcell,
      &.e-default.e-verticallines .e-detailheadercell,
      &.e-default.e-verticallines .e-gridheader th.e-firstcell {
        border-width: 0 0  0 $grid-border-size;
      }

      &.e-default.e-verticallines tr th:first-child:not(.e-firstcell) {
        border-left-width: $grid-border-size;
      }

      &.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-headercell.e-firstheader,
      &.e-default.e-horizontallines .e-headercell.e-firstheader {
        border-left: 0;
      }

      &.e-default.e-hidelines .e-gridheader th.e-firstcell {
        border-left: 0;
        border-right: 0;
      }

      &.e-default .e-gridheader .e-headercell.e-firstheader,
      &.e-default.e-horizontallines .e-gridheader .e-headercell.e-firstheader {
        border-right: 1px solid;
      }

      &.e-default.e-verticallines .e-gridheader .e-headercell.e-firstheader {
        border-right: 0;
      }

      &.e-default.e-verticallines .e-gridheader .e-headercell.e-firstheader,
      &.e-default.e-verticallines .e-gridheader th.e-grouptopleftcell.e-lastgrouptopleftcell {
        border-left: 1px solid;
      }

      &.e-default.e-verticallines .e-headercell.e-stackedheadercell {
        border-bottom: 1px solid;
      }

      &.e-default .e-detailcell,
      &.e-default.e-bothlines .e-detailcell {
        border-right-style: solid;
        border-right-width: 1px;
        text-align: right;
      }

      & .e-cc-searchdiv span.e-ccsearch-icon.e-icons {
        float: left;
      }

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

      &.e-default.e-bothlines .e-headercell,
      &.e-default.e-bothlines .e-detailheadercell {
        border-width: $grid-headercell-both-border-width;
      }

      &.e-default.e-bothlines .e-dragheadercell,
      &.e-default.e-bothlines .e-rowdragheader,
      &.e-default.e-bothlines .e-cloneproperties.e-draganddrop td.e-rowdragdrop,
      &.e-default.e-verticallines .e-cloneproperties.e-draganddrop td.e-rowdragdrop {
        border-left: 1px solid $grid-header-border-color;
        padding-left: 3px;
      }

      & .e-cloneproperties.e-draganddrop .e-row .e-icon-rowdragicon::before {
        left: 4px;
        position: relative;
      }

      &.e-default 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-default.e-bothlines .e-gridheader .e-headercell.e-firstheader,
      &.e-default.e-bothlines .e-gridheader th.e-grouptopleftcell.e-lastgrouptopleftcell {
        border-left: 1px solid;
        border-right: 0;
      }

      &.e-bothlines .e-gridheader th.e-stackedheadercell {
        border-bottom-style: $grid-border-type;
        border-bottom-width: $grid-border-size;
      }

      &.e-bothlines .e-filterbarcell,
      &.e-bothlines .e-filterbarcelldisabled {
        border-width: $grid-filtercell-both-border-width;
      }

      &.e-bothlines .e-rowcell,
      &.e-bothlines .e-rowcell.e-lastrowcell {
        border-width: $grid-rowcell-both-border-width;
      }

      &.e-verticallines .e-rowcell,
      &.e-verticallines .e-filterbarcell {
        border-width: 1px 0 0 $grid-border-size;
      }

      &.e-hidelines .e-rowcell,
      &.e-hidelines .e-headercell,
      &.e-hidelines .e-detailheadercell,
      &.e-hidelines .e-filterbarcell {
        border-width: 0;
      }

      &.e-horizontallines .e-rowcell {
        border-width: $grid-border-size 0 0;
      }

      &.e-horizontallines .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;
        }
      }

      & .e-groupheadercell .e-icons::before {
        display: inline-block;
      }

      & .e-groupheadercell .e-cancel {
        padding-left: 23px;
        padding-right: 0;
        padding-top: 2px;
      }

      & .e-groupheadercell,
      & .e-groupheadercell:hover {
        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-groupheadercell,
      & .e-groupheadercell:hover {
        float: right;
      }

      & .e-groupdroparea {
        text-align: $grid-groupdroparea-rtl-text-align;
      }

      & .e-ungroupbutton {
        float: left;
      }

      & .e-gridcontent table tr:not(.e-summaryrow) td.e-indentcell {
        border-style: $grid-border-type;
        border-width: 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 {
        border-left-style: $grid-border-type;
        border-left-width: $grid-border-size;
        border-right-width: 0;
      }

      & .e-filtermenudiv {
        float: $grid-rtlfltrdiv-float;
        margin: $grid-rtl-fltrdiv-margin;
        padding: $grid-rtl-fltrdiv-padding;
      }
    }

    &.e-wrap {
      & .e-rowcell,
      & .e-columnheader .e-stackedheadercelldiv,
      & .e-columnheader .e-headercelldiv,
      & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
        height: Auto;
        line-height: $grid-rowcell-wrap-height;
        overflow-wrap: break-word;
        text-overflow: clip;
        white-space: normal;
        word-wrap: break-word;
      }

      & .e-stackedheader .e-columnheader .e-stackedheadercelldiv,
      & .e-stackedheader .e-columnheader .e-headercelldiv {
        max-height: $grid-rowcell-wrap-max-height;
      }
    }

    &.e-wrap .e-columnheader .e-headercelldiv,
    &.e-wrap .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv,
    & .e-columnheader.e-wrap .e-headercelldiv,
    & .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv {
      margin-bottom: $grid-wrap-margin-bottom;
      margin-top: $grid-wrap-margin-top;
    }

    &.e-wrap .e-columnheader .e-filtermenudiv,
    &.e-wrap .e-columnheader .e-sortfilterdiv .e-filtermenudiv  {
      line-height: $grid-wrap-line-height;
    }

    & .e-columnheader.e-wrap .e-filtermenudiv,
    & .e-columnheader.e-wrap .e-sortfilterdiv .e-filtermenudiv {
      line-height: $grid-wrap-line-height;
    }

    & .e-columnheader.e-wrap .e-headercelldiv,
    & .e-columnheader.e-wrap .e-headercell.e-fltr-icon .e-headercelldiv,
    & .e-columnheader.e-wrap .e-stackedheadercelldiv,
    & .e-gridcontent.e-wrap .e-rowcell,
    & .e-frozenhdrcont.e-wrap .e-rowcell {
      height: Auto;
      line-height: $grid-rowcell-wrap-height;
      overflow-wrap: break-word;
      text-overflow: clip;
      white-space: normal;
      word-wrap: break-word;
    }

    & .e-frozenhdrcont.e-wrap  {
      .e-xlsel-bottom-border.e-xlsel-top-border {
        line-height: $grid-rowcell-autofill-top-bottom-height;
      }
      .e-xlsel-bottom-border {
        line-height: $grid-rowcell-autofill-top-height;
      }
    }

    & .e-stackedheadercelldiv {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    & .e-columnheader.e-wrap .e-sortfilterdiv,
    &.e-wrap .e-columnheader .e-sortfilterdiv {
      margin: $grid-header-wrap-sortfilter-div-margin;
    }

    & .e-columnheader.e-wrap .e-rightalign .e-sortfilterdiv,
    &.e-wrap .e-columnheader .e-rightalign .e-sortfilterdiv {
      margin: $grid-header-wrap-rightalign-sortfilter-div-margin;
    }

    & .e-columnheader.e-wrap .e-fltr-icon .e-sortfilterdiv,
    &.e-wrap .e-columnheader .e-fltr-icon .e-sortfilterdiv {
      margin: $grid-header-wrap-filtericon-sortfilter-div-margin;
    }

    & .e-columnheader.e-wrap .e-fltr-icon.e-rightalign .e-sortfilterdiv,
    &.e-wrap .e-columnheader .e-fltr-icon.e-rightalign .e-sortfilterdiv {
      margin: $grid-header-wrap-filtericon-rightalign-sortfilter-div-margin;
    }

    & .e-columnheader.e-wrap .e-icon-group::before,
    &.e-wrap .e-columnheader .e-icon-group::before {
      display: inline-block;
    }

    &.e-responsive .e-rowcell.e-gridclip,
    &.e-responsive .e-gridclip .e-headercelldiv,
    &.e-responsive .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;
      }

      &.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,
      & tr.e-columnheader th.e-lastcell .e-rhandler.e-rcursor,
      & tr.e-columnheader th.e-laststackcell .e-rhandler.e-rcursor {
        border-left: 0;
      }

      &.e-default table th[rowspan] {
        border-right: 0;
      }
    }

    & .e-mask {
      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;
      }
    }

    &.sf-grid {
      span.e-ungroupbutton.e-icons {
        margin-left: $grid-group-ungroupicon-margin-left;
        @if $grid-skin == 'material3' {
          margin-left: $group-unpgrouicon-margin-left;
        }
      }

      .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-frozen-right-cursor,
      .e-rowcell .e-frozen-left-cursor,
      .e-gridheader .e-headercell .e-frozen-right-cursor,
      .e-gridheader .e-headercell .e-frozen-left-cursor,
      .e-gridheader .e-filterbarcell .e-frozen-right-cursor,
      .e-gridheader .e-filterbarcell .e-frozen-left-cursor {
        cursor: move;
        height: 100%;
        position: absolute;
        top: 0;
        width: 4px;
      }

      .e-rowcell .e-frozen-left-cursor,
      .e-gridheader .e-headercell .e-frozen-left-cursor,
      .e-gridheader .e-filterbarcell .e-frozen-left-cursor {
        right: 0;
      }

      .e-rowcell .e-frozen-right-cursor,
      .e-gridheader .e-headercell .e-frozen-right-cursor,
      .e-gridheader .e-filterbarcell .e-frozen-right-cursor {
        left: 0;
      }

      .e-gridheader .e-headercell .e-frozen-left-cursor.e-frozen-resize-cursor,
      .e-gridheader .e-filterbarcell .e-frozen-left-cursor.e-frozen-resize-cursor,
      .e-rowcell .e-frozen-left-cursor.e-frozen-resize-cursor {
        right: 3px;
      }

      .e-gridheader .e-headercell .e-frozen-right-cursor.e-frozen-resize-cursor:not(.e-frozen-default-cursor),
      .e-gridheader .e-filterbarcell .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-gridheader .e-headercontent .e-reorderuparrow-virtual {
        margin-top: $grid-reorder-virtualarrow-top-margin;
      }

      .e-gridheader .e-headercontent .e-reorderdownarrow {
        margin-top: $grid-reorder-downarrow-top-margin;
      }
      .e-gridheader .e-headercontent .e-reorderdownarrow-virtual {
        margin-top: $grid-reorder-virtualdownarrow-top-margin;
      }

      .e-masked-cell.e-rowcell .e-virtualcell {
        background-color: $grid-maskedcell-virtual-background-color;
        display: inline-block;
        height: 10px;
        width: 80%;
      }

      .e-movablecontent {
        height: inherit;
        overflow-x: auto;
        scrollbar-width: none; /* firefox */
      }

      .e-movablecontent::-webkit-scrollbar {
        display: none; /* safari, chrome and edge */
      }

      .e-frozencontent {
        border-bottom-style: $grid-border-type;
        height: inherit;
      }

      .e-gridcontent .e-content,
      .e-gridcontent .e-content .e-movablecontent {
        overflow-y: auto;
      }

      .e-gridcontent .e-content.e-yscroll {
        overflow-y: scroll;
      }

      .e-gridcontent .e-content .e-movablecontent.e-yscroll {
        overflow-y: hidden;
      }

      .e-gridcontent .e-content.e-noscroll,
      .e-gridcontent .e-content .e-movablecontent.e-noscroll {
        overflow-y: hidden;
      }

      .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-filterdiv .e-multiselect.e-input-group:not(.e-rtl),
      .e-fltrtempdiv .e-multiselect.e-input-group:not(.e-rtl){
        text-align: left;
      }
    }
  }
}

.e-bigger .e-grid,
.e-bigger.e-grid {
  .e-gridheader .e-headercontent .e-reorderuparrow,
  .e-gridheader .e-headercontent .e-reorderdownarrow {
    font-size: $grid-biggerreorderarrow-font-size;
  }

  .e-gridheader .e-headercontent .e-reorderuparrow {
    @if $grid-skin == 'fluent' or $grid-skin == 'bootstrap5' {
      margin-top: -2px;
    }
  }

  .e-gridheader thead .e-icons {
    font-size: $grid-bigger-check-select-all-font-size;
  }

  .e-ccdlg {
    .e-cc-searchdiv {
      padding-left: 0;
      padding-right: $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-columnmenu {
    margin: $grid-bigger-column-menu-margin;
  }

  &.e-rtl .e-columnmenu {
    margin: $grid-bigger-rtl-cm-margin;
  }

  &.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-grid-min-height {
  .e-rowcell,
  .e-icon-grightarrow,
  .e-icon-gdownarrow {
    line-height: 0;
    padding-bottom: 0;
    padding-top: 0;
  }

  .e-gridheader .e-headercell,
  .e-gridheader .e-detailheadercell,
  .e-gridheader .e-headercell .e-headercelldiv {
    height: auto;
  }

  .e-gridcontent .e-groupcaption {
    line-height: normal;
    padding: 0 .7em;
  }

  .e-summarycell {
    line-height: normal;
    padding: 0 8px;
  }
}

#{&}.e-grid-min-height .e-grid-height {
  .e-rowcell {
    line-height: $grid-rowcell-line-height;
    padding: $grid-content-padding $grid-content-right-padding;
  }

  .e-gridheader .e-headercell,
  .e-gridheader .e-detailheadercell,
  .e-gridheader .e-headercell .e-headercelldiv {
    height: $grid-header-height;
  }

  .e-gridcontent .e-groupcaption {
    line-height: $grid-group-captioncell-line-height;
    padding: .7em;
  }

  .e-summarycell {
    line-height: $grid-summary-cell-line-height;
    padding: $grid-content-padding $grid-content-right-padding;
  }
}

.e-device.e-grid-min-height .e-grid-height .e-rowcell {
  padding: $grid-device-rowcell-padding;
}

.e-device.e-grid-min-height .e-grid-height .e-rowcell:first-child {
  padding: $grid-device-rowcell-firstchild-padding;
}

.e-device.e-grid-min-height .e-grid-height .e-rowcell:last-child {
  padding: $grid-device-rowcell-lastchild-padding;
}

.e-device.e-grid-min-height .e-rowcell,
.e-device.e-grid-min-height .e-rowcell:first-child,
.e-device.e-grid-min-height .e-rowcell:last-child {
  padding-bottom: 0;
  padding-top: 0;
}

.e-bigger .e-grid.e-grid-min-height .e-grid-height .e-rowcell {
  line-height: $grid-bigger-rowcell-line-height;
  padding: $grid-bigger-content-padding $grid-bigger-content-right-padding;
}

.e-bigger .e-grid.e-grid-min-height .e-grid-height .e-rowcell:first-child {
  line-height: $grid-bigger-first-last-rowcell-padding;
  padding-left: $grid-bigger-first-last-rowcell-padding;
}

.e-bigger .e-grid.e-grid-min-height .e-grid-height .e-rowcell:last-child {
  line-height: $grid-bigger-first-last-rowcell-padding;
  padding-right: $grid-bigger-first-last-rowcell-padding;
}

.e-bigger .e-grid.e-grid-min-height {
  .e-rowcell,
  .e-rowcell:first-child,
  .e-rowcell:last-child {
    line-height: 0;
    padding-bottom: 0;
    padding-top: 0;
  }
}

.e-bigger .e-wrap.e-grid-min-height .e-grid-height {
  .e-rowcell {
    line-height: $grid-bigger-wrap-line-height;
  }

  .e-frozencontent table tr td:first-child:empty,
  .e-movablecontent table tr td:first-child:empty,
  .e-frozenhdrcont table tr td:first-child:empty,
  &: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-wrap.e-grid-min-height {
  .e-rowcell {
    line-height: 18px;
  }

  .e-frozencontent table tr td:first-child:empty,
  .e-movablecontent table tr td:first-child:empty,
  .e-frozenhdrcont table tr td:first-child:empty,
  &: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-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;
}

.e-ccdlg.e-cc .e-dlg-header-content {
  @if $grid-skin == 'fluent' {
    padding: 11px 24px 13px;
  }
}

.e-filter-popup.e-excelfilter .e-dlg-content {
  @if $grid-skin == 'fluent' {
    padding-bottom: 12px;
  }
}

.e-bigger {
  .e-edit-dialog.e-dlg-modal {
    .e-dlg-header-content{
      @if $grid-skin == 'fluent' {
        padding: 13px 20px 27px 28px;
        .e-btn.e-dlg-closeicon-btn{
          bottom: 4px;
        }
      }
    }
  }
  .e-ccdlg.e-cc .e-dlg-header-content {
    @if $grid-skin == 'fluent' {
      padding: 14px 28px 17px;
    }
  }
  .e-filter-popup.e-excelfilter .e-dlg-content {
    @if $grid-skin == 'fluent' {
      padding-bottom: 0;
    }
  }
}

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

      .e-icons {
        padding-bottom: $grid-adaptive-toolbar-icon-hover-bottom;
        @if $grid-skin == 'bootstrap5' or $grid-skin == 'bootstrap4' {
          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);
      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] {
      padding-bottom: $grid-adaptive-cell-padding-bottom;
      padding-left: 55%;
      padding-top: $grid-adaptive-cell-padding-top;
      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;
      padding-left: 1%;
      padding-right: 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-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-btn.e-ripple {
    overflow: initial;
  }

  &.e-dialog .e-dlg-header-content {
    @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%;

    & .e-btn {
      background: none;
      box-shadow: none;
      outline: none;
      position: initial;
      @if $grid-skin == 'material3' {
        padding-bottom: 0;
        line-height: 40px;
      }

      &.e-dlg-closeicon-btn {
        background-color: transparent;
        @if $grid-skin == 'tailwind' {
          padding: .5px 15px;
        }
      }

      & .e-btn-icon {
        color: $grid-responsive-close-icon-color;
        font-size: $grid-responsive-btn-icon-font-size;
        margin-top: $grid-responsive-btn-top;
      }

      & .e-btn-icon.e-icon-filter-clear {
        @if $grid-skin == 'fluent' {
          margin-top: 4px;
        }
        @else if $grid-skin == 'tailwind' {
          margin-top: -6px;
        }
      }
    }

    & .e-btn:hover,
    & .e-btn:focus {
      .e-btn-icon {
        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: 6px;
      }
      padding-left: 0;
      padding-right: 40px;
    }

    & .e-dlg-header {
      width: auto;

      & .e-res-custom-element {
        display: flex;

        & .e-dlg-custom-header {
          padding-top: $grid-responsive-header-padding-top;
          width: 100%;
          @if $grid-skin == 'material3' {
            font-weight: $font-weight-normal;
            line-height: 20px;
          }
          @else {
            font-weight: 500;
          }
        }

        & .e-res-filter-clear-btn {
          color: $grid-responsive-filter-reset-color;
          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 {
          color: $grid-responsive-filter-reset-color;
          font-size: $grid-responsive-sort-clear-btn-font-size;
          font-weight: 500;
          padding-top: $grid-adaptive-sort-clear-button-padding;
          @if $grid-skin == 'tailwind' {
            margin-top: -7px;
          }
        }

        & .e-res-apply-btn {
          font-size: $grid-responsive-res-apply-btn-font-size;
          font-weight: 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 == 'fluent' {
            padding-bottom: 3px;
          }
          @else if $grid-skin == 'tailwind' {
            margin-top: -2px;
          }
          @else if $grid-skin == 'bootstrap5' {
            margin-bottom: -2px;
          }
        }

        & .e-res-apply-btn:disabled {
          color: $grid-btn-disabled-bgcolor;
        }

        & .e-btn {
          background: none;
          border: 0;
          color: $grid-responsive-custom-header-btn-color;
        }
      }
    }

    & .e-res-back-btn {
      background: none;
      box-shadow: none;
      padding-left: 0;

      @if $grid-skin == 'fluent' {
        padding-top: 6px;
      }
      @else if $grid-skin == 'tailwind' {
        padding-top: 1.5px;
      }
      @else if $grid-skin == 'material3' {
        padding-top: 8.5px;
        padding-bottom: .5px;
        line-height: 31px;
      }
    }
  }

  &.e-rtl .e-dlg-header-content .e-res-back-btn {
    padding-left: 15px;
    padding-right: 0;
  }

  & .e-dlg-content {
    padding: 16px;
    padding-top: 0;

    .e-checkfltrnmdiv {
      text-align: center;
    }

    & .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;
        padding: 8px;
        padding-right: 16px;
      }

      .e-checkboxlist > span {
        padding-left: 9px;
      }
    }

    & .e-xlflmenu {
      border: transparent;

      & .e-dlg-content {
        padding: 16px;
      }
    }

    & .e-ressortbutton-parent {
      float: right;
      margin-top: -9px;

      & .e-ressortbutton {
        background: $grid-responsive-btn-background;
        width: 120px;
      }
    }

    & .e-responsivecoldiv {
      font-size: 16px;
      margin-bottom: 26px;
      margin-top: 26px;
      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%;

            li {
              color: $grid-rowcell-color;
            }

            & .e-submenu.e-selected {
              background-color: $grid-responsive-header-background;
            }

            & .e-submenu {
              padding: 0;

              & .e-menu-icon {
                margin-right: 4px;
                margin-left: 15px;
              }

              & .e-caret {
                padding: 0;
                @if $grid-skin == 'material3' {
                  padding-right: 1px;
                }
                @else {
                  padding-right: 8px;
                }
              }
            }
          }
        }

        & .e-searchcontainer {
          height: 88%;

          & .e-searchbox {
            padding-left: 10px;

            & .e-search-icon:focus,
            & .e-search-icon:active,
            & .e-search-icon:hover {
              background: none;
              @if $grid-skin == 'bootstrap5' {
                color: $grid-responsive-btn-background;
              }
            }
          }

          & .e-spinner {
            height: 100%;

            & .e-chk-hidden {
              -moz-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
              height: 1px;
              opacity: 0;
              width: 1px;
            }

            & .e-checkboxlist {
              height: 100%;
              min-height: 160px;
              overflow-y: auto;

              & .e-ftrchk {
                padding-bottom: $grid-bigger-checkbox-padding-topbottom;
                padding-top: $grid-bigger-checkbox-padding-topbottom;
              }
            }
          }
        }
      }
    }

    & .e-checkboxfilter {
      & .e-dlg-content {
        padding: 8px;

        & .e-searchcontainer {
          padding-left: 8px;
          margin-right: 7px;
          & .e-searchbox {
            padding-left: 0;
          }
          & .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;
      padding: 16px;
      padding-top: 0;

      & .e-menu-item {
        padding: 0;
      }

      & .e-menu-item.e-focused {
        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-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 == '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;
    }
    padding-left: 40px;
    padding-right: 0;
  }

  & .e-res-apply-btn {
    padding-left: 0;
    padding-right: 20px;
  }

  & .e-ressortbutton-parent {
    float: left;
  }
}

/* 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-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 */


@include export-module('grid-theme') {

  /*! Grid theme */
  #{&}.e-grid {
    border-color: $grid-header-border-color;

    .e-content {
      background-color: $grid-rows-bg-color;
    }

    .e-icons:not(.e-btn-icon) {
      color: $grid-icon-color;
    }

    .e-unboundcelldiv .e-icons:not(.e-btn-icon) {
      color: $grid-command-icon-color;
    }

    .e-unboundcelldiv .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-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-headercontent .e-icon-reorderuparrow,
    .e-gridheader .e-headercontent .e-icon-reorderdownarrow {
      color: $grid-column-reorder-icon-color;
    }

    .e-groupdroparea .e-icons {
      color: $grid-header-icon-color;
      @if $grid-skin == 'material3' {
        border-radius: 4px;
      }
    }

    @if $grid-skin == 'material3' {
      .e-groupdroparea .e-icons:hover,
      .e-groupdroparea .e-icons.e-focused {
        background-color: rgba($on-surface-variant, $opacity8);
      }
    }

    .e-tableborder {
      border-right-color: $grid-header-border-color;
    }

    .e-autofill {
      background-color: $grid-autofill-color;
    }

    .e-autofill,
    .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 {
      background-color: $grid-autofill-color;
      border-color: $grid-autofill-color;
      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-leftfreeze,
    .e-gridcontent .e-rowcell.e-dragborder.e-leftfreeze,
    .e-gridcontent .e-groupcaption.e-dragborder.e-leftfreeze,
    .e-gridcontent .e-summarycell.e-dragborder.e-leftfreeze,
    .e-gridcontent .e-rowdragdrop.e-dragborder.e-leftfreeze,
    & .e-gridheader thead tr th.e-firstrowdragborder.e-leftfreeze,
    &.e-rtl .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder.e-leftfreeze,
    &.e-rtl .e-gridcontent .e-rowcell.e-dragborder.e-leftfreeze,
    &.e-rtl .e-gridcontent .e-rowdragdrop.e-dragborder.e-leftfreeze {
      z-index: 6;
    }

    .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder.e-rightfreeze,
    .e-gridcontent .e-rowcell.e-dragborder.e-rightfreeze,
    .e-gridcontent .e-groupcaption.e-dragborder.e-rightfreeze,
    .e-gridcontent .e-summarycell.e-dragborder.e-rightfreeze,
    .e-gridcontent .e-rowdragdrop.e-dragborder.e-rightfreeze,
    & .e-gridheader thead tr th.e-firstrowdragborder.e-rightfreeze,
    &.e-rtl .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder.e-rightfreeze,
    &.e-rtl .e-gridcontent .e-rowcell.e-dragborder.e-rightfreeze,
    &.e-rtl .e-gridcontent .e-rowdragdrop.e-dragborder.e-rightfreeze {
      z-index: 6;
    }

    .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder.e-fixedfreeze,
    .e-gridcontent .e-rowcell.e-dragborder.e-fixedfreeze,
    .e-gridcontent .e-groupcaption.e-dragborder.e-fixedfreeze,
    .e-gridcontent .e-summarycell.e-dragborder.e-fixedfreeze,
    .e-gridcontent .e-rowdragdrop.e-dragborder.e-fixedfreeze,
    & .e-gridheader thead tr th.e-firstrowdragborder.e-fixedfreeze,
    &.e-rtl .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder.e-fixedfreeze,
    &.e-rtl .e-gridcontent .e-rowcell.e-dragborder.e-fixedfreeze,
    &.e-rtl .e-gridcontent .e-rowdragdrop.e-dragborder.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 {
      background-color: $grid-header-bg-color;
      border-bottom-color: $grid-outter-border;
      border-top-color: $grid-header-border-color;
      color: $grid-header-color;
    }

    .e-gridcontent {
      & tr:first-child td {
        border-top-color: transparent;
      }
    }

    .e-gridcontent {
      & tr:first-child td.e-xlsel-top-border {
        border-top-color: $frozen-border-color;
      }
    }

    th.e-headercell[aria-sort = 'ascending'] .e-headertext,
    th.e-headercell[aria-sort = 'descending'] .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-default.e-verticallines .e-headercell.e-stackedheadercell {
      border-color: $grid-header-border-color;
    }

    &.e-default.e-horizontallines .e-grouptopleftcell {
      border-color: $grid-header-border-color;
    }

    &.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-default .e-gridheader .e-headercell.e-firstheader,
    &.e-default.e-horizontallines .e-headercell.e-firstheader {
      border-color: $grid-header-border-color;
    }

    .e-filterbarcell input {
      border-color: $grid-header-border-color;
    }

    .e-gridcontent {
      background-color: $grid-content-bg-color;
    }

    .e-gridfooter {
      @if $grid-skin == 'material3' {
        background: $grid-summary-row-bg-color;
      }
      @else {
        background-color: $grid-summary-row-bg-color;
      }
    }

    .e-headercontent {
      border-color: $grid-header-border-color;
    }

    .e-rowdragheader {
      background-color: $grid-header-bg-color;
    }

    .e-headercell,
    .e-detailheadercell {
      background-color: $grid-header-bg-color;
      border-color: $grid-header-border-color;
    }

    [aria-selected] + tr .e-detailindentcell {
      border-color: $grid-header-border-color;
    }

    tr th.e-firstcell {
      border-left-color: $grid-header-border-color;
      border-right-color: $grid-header-border-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-summarycell {
      @if $grid-skin == 'material3' {
        background: $group-row-bg-color;
      }
      @else {
        background-color: $group-row-bg-color;
      }
      border-color: $grid-header-border-color;
      color: $grid-header-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 {
      @if $grid-skin == 'material3' {
        background: $grid-summary-row-bg-color;
      }
      @else {
        background-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 {
      border-color: $grid-cell-border-color;
    }

    &.e-default .e-grouptopleftcell {
      border-color: $grid-header-border-color;
    }

    .e-frozenhdrcont .e-headercontent > .e-table,
    .e-frozenhdrcont .e-frozenheader > .e-table,
    .e-frozenhdrcont .e-movableheader > .e-table,
    .e-frozenhdrcont .e-headercontent .e-virtualtable > .e-table {
      border-bottom-color: $frozen-border-color;
    }

    .e-frozencontent {
      border-bottom-color: $grid-cell-border-color;
    }

    .e-frozenheader > .e-table,
    .e-frozencontent > .e-table,
    .e-frozencontent .e-virtualtable > .e-table,
    .e-frozenheader .e-virtualtable > .e-table {
      border-right-color: $frozen-border-color;
    }

    .e-frozenheader.e-frozenborderdisabled > .e-table,
    .e-frozencontent.e-frozenborderdisabled > .e-table,
    .e-frozencontent.e-frozenborderdisabled .e-virtualtable > .e-table,
    .e-frozenheader.e-frozenborderdisabled .e-virtualtable > .e-table {
      border-right-color: $grid-frozenborder-disabled-color;
    }

    &.e-rtl .e-leftfreeze.e-freezeleftborder {
      border-left-color: $frozen-border-color;
    }
      
    &.e-rtl .e-rightfreeze.e-freezerightborder {
      border-right-color: $frozen-border-color;
    }
    
    &.e-rtl .e-filterbarcell.e-fixedfreeze.e-freezeleftborder,
    &.e-rtl .e-fixedfreeze.e-freezeleftborder {
      border-right-color: $frozen-border-color;
    }
    
    &.e-rtl .e-filterbarcell.e-fixedfreeze.e-freezerightborder,
    &.e-rtl .e-fixedfreeze.e-freezerightborder  {
      border-left-color: $frozen-border-color;
    }

    .e-leftfreeze.e-freezeleftborder {
      border-right-color: $frozen-border-color;
    }

    .e-rightfreeze.e-freezerightborder {
      border-left-color: $frozen-border-color;
    }

    .e-filterbarcell.e-fixedfreeze.e-freezeleftborder,
    .e-fixedfreeze.e-freezeleftborder {
      border-left-color: $frozen-border-color;
    }

    .e-filterbarcell.e-fixedfreeze.e-freezerightborder,
    .e-fixedfreeze.e-freezerightborder  {
      border-right-color: $frozen-border-color;
    }

    .e-xlsel-top-border {
      border-top-color: $frozen-border-color;
    }

    .e-xlsel-left-border {
      border-left-color: $frozen-border-color;
    }

    .e-xlsel-right-border {
      border-right-color: $frozen-border-color;
    }

    .e-xlsel-bottom-border {
      border-bottom-color: $frozen-border-color;
    }

    .e-leftfreeze:not(.e-summarycell, .e-indentcell, .e-updatedtd, .e-selectionbackground, .e-columnselection, .e-groupcaption, .e-cellselectionbackground),
    .e-rightfreeze:not(.e-summarycell, .e-updatedtd, .e-selectionbackground, .e-columnselection, .e-groupcaption, .e-cellselectionbackground),
    .e-fixedfreeze:not(.e-summarycell, .e-selectionbackground, .e-updatedtd, .e-columnselection, .e-groupcaption, .e-cellselectionbackground) {
      @if $grid-skin == 'material' $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-gridcontent .e-groupcaptionrow .e-leftfreeze.e-recordplusexpand,
    .e-gridcontent .e-groupcaptionrow .e-leftfreeze.e-recordpluscollapse,
    .e-gridcontent .e-groupcaptionrow .e-leftfreeze.ee-indentcell {
      @if $grid-skin == 'material3' {
        background: $group-row-bg-color;
      }
      @else {
        background-color: $group-row-bg-color;
      }
    }

    .e-gridfooter .e-leftfreeze,
    .e-gridfooter .e-rightfreeze,
    .e-gridfooter .e-fixedfreeze {
      @if $grid-skin == 'material3' {
        background: $grid-summary-row-bg-color;
      }
      @else {
        background-color: $grid-summary-row-bg-color;
      }
    }

    .e-frozenheader.e-frozen-right-header > .e-table,
    .e-frozencontent.e-frozen-right-content > .e-table,
    .e-rowcell .e-frozen-default-cursor,
    .e-gridheader .e-headercell .e-frozen-default-cursor,
    .e-gridheader .e-filterbarcell .e-frozen-default-cursor {
      border-left-color: $frozen-border-color;
    }

    .e-frozenheader.e-frozen-right-header.e-frozenborderdisabled > .e-table,
    .e-frozencontent.e-frozen-right-content.e-frozenborderdisabled > .e-table {
      border-left-color: $grid-frozenborder-disabled-color;
    }

    &.e-rtl .e-frozenheader > .e-table,
    &.e-rtl .e-frozencontent > .e-table,
    &.e-rtl .e-frozenheader .e-virtualtable > .e-table,
    &.e-rtl .e-frozencontent .e-virtualtable > .e-table {
      border-left-color: $frozen-border-color;
    }

    &.e-rtl .e-frozenheader.e-frozen-right-header > .e-table,
    &.e-rtl .e-frozencontent.e-frozen-right-content > .e-table {
      border-right-color: $frozen-border-color;
    }

    &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
    &.e-gridhover .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 .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:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
      &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
        background-color: $grid-hover-bg-color;
        color: $grid-hover-content-font-color;
      }
    }

    &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-leftfreeze,
    &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-rightfreeze,
    &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-unfreeze,
    &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-fixedfreeze,
    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-leftfreeze,
    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-rightfreeze,
    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-unfreeze,
    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-fixedfreeze,
    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse.e-leftfreeze,
    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse.e-rightfreeze,
    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse.e-unfreeze,
    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse.e-fixedfreeze,
    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-leftfreeze,
    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-rightfreeze,
    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-unfreeze,
    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-fixedfreeze,
    &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-leftfreeze,
    &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-rightfreeze,
    &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-unfreeze,
    &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-fixedfreeze,
    &.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' or grid-skin == 'bootstrap4' {
          background-color: rgb(250 244 244);
        }
      }
    }

    &.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-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-rowcell.e-leftfreeze,
      &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-rightfreeze,
      &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-unfreeze,
      &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-fixedfreeze,
      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-leftfreeze,
      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-rightfreeze,
      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-unfreeze,
      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell.e-fixedfreeze,
      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse.e-leftfreeze,
      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse.e-rightfreeze,
      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse.e-unfreeze,
      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse.e-fixedfreeze,
      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-leftfreeze,
      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-rightfreeze,
      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-unfreeze,
      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-fixedfreeze,
      &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-leftfreeze,
      &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-rightfreeze,
      &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-unfreeze,
      &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop.e-fixedfreeze,
      &.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' or $grid-skin == 'bootstrap4' {
            background-color: rgb(250 244 244);
          }
        }
      }
    }

    & .e-row:hover .e-rowdragdrop {
      cursor: move;
    }

    .e-sortnumber {
      @if $grid-skin == 'material3' {
        background: $grid-sortnumber-bg-color;
      }
      @else {
        background-color: $grid-sortnumber-bg-color;
      }
      color: $grid-sortnumber-color;
    }

    &.e-gridhover .e-frozenhover {
      background-color: $grid-hover-bg-color;
      color: $grid-hover-content-font-color;
    }

    .e-col-menu.e-filter-popup {
      box-shadow: $grid-column-menu-sub-menu-box-shadow;
    }

    & td.e-active .e-icon-rowdragicon::before {
      color: $grid-row-selection-color;
    }

    td.e-active {
      background: $grid-row-selection-bg-color;
      color: $grid-row-selection-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-color: $grid-row-selection-bg-color;
    }

    td.e-cellselectionbackground {
      background: $grid-cell-selection-bg-color;
      color: $grid-cell-selection-color;
    }

    .e-filterbarcell,
    .e-filterbarcelldisabled {
      background-color: $grid-header-bg-color;
      background-image: none;
      border-color: $grid-header-border-color;
    }

    .e-filtered::before {
      color: $grid-filtered-color;
    }

    .e-gridpopup .e-content {
      background-color: $grid-popup-bg-color;
      border-color: $grid-header-border-color;
    }

    .e-gridpopup span:hover,
    .e-gridpopup .e-spanclicked {
      border-color: $grid-icon-color;
    }

    .e-gridpopup .e-downtail::before,
    .e-gridpopup .e-downtail {
      border-top-color: $grid-header-border-color;
    }

    .e-gridpopup .e-downtail::after {
      border-top-color: $grid-popup-bg-color;
    }

    .e-gridpopup .e-uptail::before,
    .e-gridpopup .e-uptail {
      border-bottom-color: $grid-header-border-color;
    }

    .e-gridpopup .e-uptail::after {
      border-bottom-color: $grid-popup-bg-color;
    }

    .e-cloneproperties {
      @if $grid-skin == 'material3' {
        background: $grid-drag-clone-bg-color;
        border: none;
      }
      @else {
        background-color: $grid-drag-clone-bg-color;
        border-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-resize-lines .e-headercell .e-rsuppress {
      border-right: 1px solid $grid-header-border-color;
    }

    &.e-resize-lines .e-frozen-right-header .e-headercell .e-rhandler,
    &.e-resize-lines .e-frozen-right-header .e-headercell .e-rsuppress {
      border-left: 1px solid $grid-header-border-color;
    }

    &.e-resize-lines .e-focused .e-rhandler {
      border: 0 none;
    }

    &.e-resize-lines .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-resize-lines .e-frozen-right-header .e-headercell.e-stackedheadercell {
      border-left: 1px solid $grid-header-border-color;
    }

    &.e-rtl.e-resize-lines .e-headercell.e-stackedheadercell,
    &.e-rtl.e-resize-lines .e-headercell .e-rhandler,
    &.e-rtl.e-resize-lines .e-headercell .e-rsuppress {
      border-left: 1px solid $grid-header-border-color;
      border-right-width: 0;
    }

    &.e-rtl.e-resize-lines .e-frozen-right-header .e-headercell.e-stackedheadercell,
    &.e-rtl.e-resize-lines .e-frozen-right-header .e-headercell .e-rhandler,
    &.e-rtl.e-resize-lines .e-frozen-right-header .e-headercell .e-rsuppress {
      border-left-width: 0;
      border-right: 1px solid $grid-header-border-color;
    }

    &.e-resize-lines .e-filterbarcell,
    &.e-rtl.e-resize-lines .e-filterbarcell {
      border-top: 1px solid $grid-header-border-color;
    }

    .e-cloneproperties.e-draganddrop {
      box-shadow: $grid-clone-prop-box-shadow;
      @if $grid-skin != 'material3' {
        opacity: .95;
      }
      overflow: visible;
    }

    & .e-row .e-dragstartrow::before,
    & .e-row .e-selectionbackground .e-dragstartrow::before {
      color: $grid-clone-dropitemscount-bg-color;
    }

    .e-griddragarea {
      @if $grid-skin == 'material3' {
        background: rgba($primary, .18);
      }
      @else {
        background-color: $grid-drag-clone-bg-color;
        border-color: $grid-drag-clone-bg-color;
      }
      color: $grid-row-selection-color;
    }

    .e-groupdroparea {
      @if $grid-skin == 'material3' {
        background: $group-droparea-bg-color;
      }
      @else {
        background-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 {
      @if $grid-skin == 'material3' {
        background: $grouped-droparea-bg-color;
      }
      @else {
        background-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;
    }

    .e-groupheadercell:hover {
      background-color: $group-header-hover-bg-color;
      border-color: $grid-group-hover-broder-color;
      @if $grid-skin == 'material3' {
        border-style: solid;
      }
    }

    .e-ungroupbutton:hover {
      color: $grid-hover-icon-color;
      opacity: 1;
    }

    .e-ungroupbutton {
      opacity: $grid-ungroup-icon-opactiy;
    }

    .e-groupcaption,
    .e-indentcell,
    .e-recordplusexpand,
    .e-recordpluscollapse {
      @if $grid-skin == 'material3' {
        background: $group-row-bg-color;
      }
      @else {
        background-color: $group-row-bg-color;
      }
      color: $group-caption-font-color;
    }

    .e-grouptopleftcell {
      background-color: $grid-header-bg-color;
      border-color: $grid-header-border-color;
    }

    .e-stackedheadercell {
      border-bottom-color: $grid-header-border-color;
    }

    .e-verticallines tr th {
      border-color: $grid-header-border-color;
    }

    td.e-updatedtd {
      background-color: $grid-batch-updated-bg-color;
      color: $grid-content-batch-font-color;
    }

    .e-gridcontent table tbody .e-normaledit .e-rowcell {
      border-top-color: $grid-header-border-color;
    }

    .e-gridcontent table tbody .e-normaledit .e-dragindentcell,
    .e-gridcontent table tbody .e-normaledit .e-detailrowcollapse {
      border-top: 1px solid $grid-header-border-color;
    }

    .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 {
        border-color: $grid-columnchooser-search-border-fcolor;
      }
    }

    .e-cloneproperties.e-draganddrop .e-rowcell {
      color: $grid-content-font-color;
      @if $grid-skin == 'material3' {
        padding-top: 6px;
        padding-bottom: 6px;
      }
      
      &.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) {
        border-color: $grid-header-border-color;
      }

      &.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,
      &.e-default.e-verticallines tr th:last-child,
      &.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-tableborder {
        border-left-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;
      }
    }

    .e-ftrchk.e-chkfocus,
    li.e-cclist.e-colfocus {
      background-color: $grid-hover-bg-color;
    }
  }

  .e-tooltip-wrap.e-griderror,
  .e-control.e-tooltip-wrap.e-popup.e-griderror {
    background-color: $grid-val-error-bg-color;
    border-color: $grid-val-error-bg-color;
  }

  .e-tooltip-wrap.e-griderror .e-arrow-tip-inner.e-tip-top,
  .e-tooltip-wrap.e-griderror .e-arrow-tip-outer.e-tip-top {
    border-bottom: 8px solid $grid-val-error-bg-color;
    color: $grid-val-error-bg-color;
  }

  .e-tooltip-wrap.e-griderror .e-arrow-tip-outer.e-tip-bottom,
  .e-tooltip-wrap.e-griderror .e-arrow-tip-inner.e-tip-bottom {
    border-top: 8px solid $grid-val-error-bg-color;
    color: $grid-val-error-bg-color;
  }

  .e-tooltip-wrap.e-griderror .e-tip-content,
  .e-tooltip-wrap.e-griderror .e-tip-content label {
    color: $grid-val-error-color;
  }

  .e-dropitemscount {
    background-color: $grid-clone-dropitemscount-bg-color;
    color: $grid-dropitemscount-color;
  }

  .e-filterbaroperator.e-dropdownlist {
    position: absolute;
  }

  .e-filterbardropdown:not(.e-rtl) {
    margin-right: $grid-filterbar-dropdown;
  }

  .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-bootstrap5-icons') {

  /*! component icons */

  .e-icon-check::before {
    content: '\e774';
  }

  #{&}.e-grid,
  .e-grid-menu {

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

    .e-group-animate .e-nextgroup.e-icon-next::before {
      content: '\e748';
    }

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

    .e-icon-descending::before {
      content: '\e7d8';
    }

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

    .e-ungroupbutton.e-icon-hide::before {
      content: '\e7e7';
    }

    .e-icon-rowselect::before {
      content: '\e7d4';
    }

    .e-icon-sortdirect::before {
      content: '\e824';
    }

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

    .e-icon-grightarrow::before {
      content: '\e748';
    }

    .e-icon-filter::before,
    .e-icon-filter.e-filtered::before {
      content: '\e7f7';
    }

    .e-resfilter-icon::before {
      content: '\e7f7';
    }

    .e-ressort-icon::before {
      content: '\e823';
    }

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

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

    &.e-rtl {
      .e-icon-grightarrow::before {
        content: '\e765';
      }
    }

    .e-icon-group::before {
      content: '\e724';
    }

    .e-icon-ungroup::before {
      content: '\e724';
    }

    .e-icon-reorderuparrow::before {
      content: '\e87a';
    }

    .e-icon-reorderdownarrow::before {
      content: '\e70d';
    }

    .e-print::before {
      content: '\e75d';
    }

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

    .e-resback-icon::before {
      content: '\e773';
    }

    .e-wordexport::before {
      content: '\e7d0';
    }

    .e-pdfexport::before {
      content: '\e700';
    }

    .e-csvexport::before {
      content: '\e7ba';
    }

    .e-excelexport::before {
      content: '\e7c1';
    }

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

    .e-columnmenu::before,
    .e-columnmenu.e-filtered::before {
      content: '\e770';
    }

    .e-delete::before {
      content: '\e820';
    }

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

    .e-copy::before {
      content: '\e77c';
    }

    .e-save::before {
      content: '\e7c8';
    }

    .e-update::before {
      content: '\e7c8';
    }

    .e-search-icon::before {
      content: '\e754';
    }

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

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

    .e-ccsearch-icon::before {
      content: '\e754';
    }

    .e-columnchooser::before {
      content: '\e21e'; // icon not found
    }

    .e-columnchooser-btn::before {
      content: '\e70d';
    }

    .e-cc-icon::before {
      content: '\e70d';
    }

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

    &.e-rtl {
      .e-icon-rowdragicon::before {
        content: '\e726';
      }
    }

    .e-ccsearch-icon.e-cc-cancel::before,
    .e-chkcancel-icon::before {
      content: '\e7e7';
    }
  }
}

.e-responsive-dialog {

  & .e-resfilterback::before {
    content: '\e773';
  }

  &.e-rtl .e-resfilterback::before {
    content: '\e7f9';
  }

  & .e-filterset::before {
    content: '\e7f7';
  }

  & .e-search-icon::before {
    content: '\e754';
  }

  & .e-chkcancel-icon::before {
    content: '\e7e7';
  }

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

.e-row-responsive-filter {
  & .e-dlg-closeicon-btn {
    & .e-icon-dlg-close::before {
      content: '\e773';
    }
  }

  &.e-rtl .e-dlg-closeicon-btn {
    & .e-icon-dlg-close::before {
      content: '\e7f9';
    }
  }
}

.e-checkboxfilter {
  .e-search-icon::before {
    content: '\e754';
  }

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

/*! FileManager's tailwind theme wise override definitions and variables */
//layout variables
$fm-skin-name: $skin-name !default;
$fe-bc-font-size: $text-xs !default;
$fe-bc-icon-font-size: 8px !default;
$fe-dg-td-font-size: $text-sm !default;
$fe-lg-text-font-size: $text-xs !default;
$fe-ddl-icon-font-size: $text-sm !default;

$fe-big-bc-font-size: $text-sm !default;
$fe-big-bc-icon-font-size: $text-xxs !default;
$fe-big-lg-text-font-size: $text-sm !default;
$fe-big-dg-header-font-size: 21px !default;
$fe-big-dg-td-font-size: $text-base !default;

$fe-clone-box-shadow: $shadow !default;
$fe-clone-border: none !default;
$fe-tb-ddb-icon-padding: 0 !default;
$fe-tb-ddb-height: calc(100% - 10px) !default;
$fe-tb-ddb-btn-hvr-padding: 0 !default;
$fe-tb-ddb-btn-padding: 0 !default;
$fe-tb-ddb-border: 0 !default;
$fe-tb-ddb-caret-size: 8px !default;
$fe-upload-overlay-border: 2px !default;
$fe-search-padding: 3px 12px 2px 0 !default;
$fe-search-height: 29px !default;
$fe-search-icon-margin: 5px !default;
$fe-search-icon-font-size : 14px !default;
$fe-search-clear-icon-padding: 0 !default;
$fe-search-input-margin: 0 0 0 29px !default;
$fe-bc-margin: 0 !default;
$fe-bc-padding: 8px 16px 8px !default;
$fe-rtl-bc-padding: 8px 18px 8px 12px !default;
$fe-bc-text-padding: 4px 4px 5px !default;
$fe-bc-text-size: 18px !default;
$fe-bc-icon-margin: 0 4px !default;
$fe-bc-search-border-bottom: 1px !default;
$fe-bc-submenu-height: 26px !default;
$fe-bc-li-text-decoration: none;
$fe-grid-icon-size: 20px !default;
$fe-grid-icon-margin: 0 !default;
$fe-dg-td-padding: 4px 24px 4px 0 !default;
$fe-dg-rtl-td-padding: 8px 0 8px 24px !default;
$fe-grid-header-height: 32px !default;
$fe-grid-header-font-size: $text-xxs !default;
$fe-grid-header-cb-padding-left: 12px !default;
$fe-grid-content-font-size: $text-xs !default;
$fe-grid-content-name-font-size: $text-sm !default;
$fe-grid-icon-sort-margin: 0 !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-cm-separator-margin: 0 0 !default;
$fe-cb-line-height: 12px !default;
$fe-dd-popup-blank-icon-padding-left: 40px !default;
$fe-tv-fullrow-height: 34px !default;
$fe-address-height: 35px !default;
$fe-tv-node-height: 32px !default;

$fe-big-tv-fullrow-height: 40px !default;
$fe-big-address-height: 40px !default;
$fe-big-tv-node-height: 38px !default;
$fe-big-tb-ddb-btn-hvr-padding: 0 6px !default;
$fe-big-tb-ddb-btn-padding: 0 6px !default;
$fe-big-search-padding: 4px 10px 0 16px !default;
$fe-big-search-height: 30px !default;
$fe-big-bc-padding: 6px 12px !default;
$fe-big-bc-text-size: 28px !default;
$fe-big-bc-text-padding: 5px 4px !default;
$fe-big-bc-li-item-height: 28px !default;
$fe-big-bc-submenu-height: 27px !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-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-grid-header-font-size: $text-sm !default;
$fe-big-grid-content-font-size: $text-sm !default;
$fe-big-grid-content-name-font-size: $text-base !default;
$fe-big-cb-line-height: 14px !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: 8px 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-icon-font-size: $text-xl !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: 4px 0 0 2px !default;
$fe-mobile-grid-padding: 4px 2px 0 2px !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-big-lg-icon-empty-min-width: 300px !default;

$fe-big-lg-icon-empty-content-font-size: 22px !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: 92px !default;
$fe-big-lg-icon-empty-icon-margin: 0 auto !default;
$fe-big-lg-icon-empty-icon-width: 92px !default;

$fe-big-lg-icon-empty-inner-content-font-size: $text-sm !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: 4px !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: 22px !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: 92px !default;
$fe-big-grid-empty-icon-margin: 0 auto !default;
$fe-big-grid-empty-icon-width: 92px !default;

$fe-big-grid-empty-inner-content-font-size: $text-sm !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: $text-base !default;
$fe-grid-empty-content-margin: 0 auto !default;
$fe-grid-empty-content-padding: 18px 0 8px 0 !default;
$fe-grid-empty-content-text-align: center !default;

$fe-grid-empty-icon-height: 82px !default;
$fe-grid-empty-icon-margin: 0 auto !default;
$fe-grid-empty-icon-width: 82px !default;

$fe-grid-empty-inner-content-font-size: $text-sm !default;
$fe-grid-empty-inner-content-margin: 0 auto !default;
$fe-grid-empty-inner-content-opacity: .5 !default;
$fe-grid-empty-inner-content-padding: 0 !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: $text-base !default;
$fe-lg-icon-empty-content-margin: 0 auto !default;
$fe-lg-icon-empty-content-padding: 18px 0 8px 0 !default;
$fe-lg-icon-empty-content-text-align: center !default;

$fe-lg-icon-empty-icon-height: 82px !default;
$fe-lg-icon-empty-icon-margin: 0 auto !default;
$fe-lg-icon-empty-icon-width: 82px !default;

$fe-lg-icon-empty-inner-content-font-size: $text-sm !default;
$fe-lg-icon-empty-inner-content-margin: 0 auto !default;
$fe-lg-icon-empty-inner-content-padding: 0 !default;
$fe-lg-icon-empty-inner-content-text-align: center !default;

$fe-bc-icon-padding: 5px !default;

// color variables
$fe-border-color: $border-light !default;
$fe-background: transparent;
$fe-icon-color: $icon-color !default;
$fe-label-color: $content-text-color-alt2 !default;
$fe-text-color: $content-text-color !default;
$fe-active-border-color: $content-bg-color-selected !default;
$fe-tb-active-color: $secondary-text-color !default;
$fe-active-bg-color: $content-bg-color-selected !default;
$fe-active-font-color: $secondary-text-color !default;
$fe-hover-border-color: $content-bg-color-hover !default;
$fe-hover-bg-color: $content-bg-color-hover !default;
$fe-ah-border-color: $content-bg-color-selected !default;
$fe-ah-bg-color: $content-bg-color-selected !default;
$fe-focus-border-color: $border-light !default;
$fe-bc-color: $content-text-color-alt1 !default;
$fe-bc-link-color: $content-text-color-alt2 !default;
$fe-bc-hover-bg-color: $content-bg-color-alt2 !default;
$fe-bc-hover-font-color: $content-text-color !default;
$fe-grid-header-bg-color: $content-bg-color-alt1 !default;
$fe-ddl-icon-color: $icon-color !default;
$fe-error-color: $danger !default;
$fe-img-border-color: $border-light !default;
$fe-search-bg-color: $content-bg-color !default;
$fe-tb-hover-border-color: $secondary-border-color-hover !default;
$fe-tb-focus-border-color: $fe-tb-hover-border-color !default;
$fe-tb-focus-bg: $secondary-bg-color-hover !default;
$fe-checkbox-color: $primary !default;
$fe-checkbox-bg-color: $primary-text-color !default;
$fe-drop-border-color: $primary !default;
$fe-up-list-border-color: $border-light !default;
$fe-clone-bg-color: $content-bg-color-alt3 !default;
$fe-clone-border-color: none !default;
$fe-clone-count-border-color: $primary-text-color !default;
$fe-clone-count-font-color: $primary-text-color !default;
$fe-clone-count-bg-color: $primary !default;
$fe-drop-folder-bg-color: $primary !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;
  }
}

@mixin grid-no-border {
  .e-rowcell.e-lastrowcell {
    border-bottom-width: 0;
  }
}

@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 checkbox($value) {
  .e-checkbox-wrapper {

    .e-frame {
      border-width: 1px;
      line-height: $value;
    }
  }
}

@include export-module('FileManager-layout') {
  ejs-filemanager {
    display: block;
  }

  .e-filemanager {
    @include user-select;
    border: 1px solid;
    position: relative;

    .e-blur {
      opacity: .5;
    }

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

    &.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 {
      border-bottom-style: solid;
      @if $fm-skin-name == 'bootstrap-dark' {
        border-width: 1px;
      }
      @else {
        border-width: 0 0 1px;
      }

      @if ($fm-skin-name == 'Material3') {
        height: $fe-tb-height;
        min-height: $fe-tb-height;
      }

      @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: 0;
        box-shadow: none;
        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' {
            height: 18px;
            margin: 2px 4px 0;
            padding: 1px;
            width: 18px;
          }
          @else {
            padding: 0 8px;
          }
        }

        .e-tbar-btn-text.e-tbar-ddb-text {
          padding-right: 0;
        }

        &.e-active {
          border: $fe-tb-ddb-border;
          padding: $fe-tb-ddb-btn-hvr-padding;
        }

        &:hover {
          border: $fe-tb-ddb-border;
          padding: $fe-tb-ddb-btn-hvr-padding;
        }

        &:focus {
          border: $fe-tb-ddb-border;
          padding: $fe-tb-ddb-btn-hvr-padding;
        }
      }

      .e-toolbar-pop .e-toolbar-item .e-dropdown-btn {
        .e-icons.e-caret {
          font-size: $fe-tb-ddb-caret-size;
          min-width: 0;
          padding: 0 8px;
        }

        .e-tbar-btn-text.e-tbar-ddb-text {
          padding-right: 0;
        }
      }

      .e-toolbar-pop {
        width: max-content;
      }
    }

    .e-treeview {

      & > .e-ul {
        overflow: initial;
        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
          padding-left: 8px;
        }
      }

      .e-icons .e-treeview-spinner {
        display: none;
      }

      .e-list-parent {
        margin-bottom: 0;
        margin-top: 0;

        .e-list-item {
          padding-bottom: 0;
          padding-top: 0;

          .e-fullrow {
            height: $fe-tv-fullrow-height;
          }

          .e-list-text {
            height: $fe-tv-node-height;
            line-height: $fe-tv-node-height;
          }

          &.e-fe-drop-folder > .e-fullrow {
            @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
              border: 1px dashed;
            }
            @else {
              border: 1px solid;
            }
            box-sizing: border-box;
          }
        }
      }

      .e-text-content {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .e-list-text {
        display: initial;
      }
    }

    .e-splitter {
      border-width: 0;

      .e-split-bar {

        .e-resize-handler {
          display: none;
        }
      }

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

    .e-address {
      border-bottom: 1px solid;
      height: $fe-address-height;
      position: relative;

      .e-fe-breadcrumb.e-icons {
        padding-bottom: 6px;
        @if $fm-skin-name == 'material-dark' {
          padding-bottom: 0;
        }
      }

      .e-search-wrap {
        float: right;
        padding: $fe-search-padding;
        position: absolute;
        right: 0;
        top: 0;
        width: 200px;

        .e-input-group {
          border-bottom-width: $fe-bc-search-border-bottom;
          height: $fe-search-height;
          margin: 0;

          @if $skin-name == 'bootstrap5' or $skin-name == 'tailwind' {
            &.e-input-focus {
              .e-input {
                padding: 0;
              }
            }
          }

          .e-input {
            margin: $fe-search-input-margin;
            padding: 0;
            @if $skin-name == 'bootstrap5' {
              height: 26px;
            }
            @if $skin-name == 'material' {
              height: 30px;
            }
            @if $fm-skin-name == 'Material3' {
              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;
        margin: $fe-search-icon-margin;
        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
          margin-right: 4px;
          padding: 3px;
        }
        @if ($fm-skin-name == 'Material3') {
          padding: $fe-search-input-padding;
        }
        @else {
          padding: 5px;
        }
        @if $fm-skin-name == 'FluentUI' {
          font-size: 16px;
        }
        position: absolute;
        z-index: 1;

        &::before {
          display: inline-block;
        }
      }

      .e-addressbar-ul {
        @include ellipsis;
        list-style: none;
        margin: $fe-bc-margin;
        padding: $fe-bc-padding;
        visibility: visible;

        .e-breadcrumb-menu {
          display: inline;

          .e-breadcrumb-submenu {
            height: $fe-bc-submenu-height;
            @if $fm-skin-name == 'material-dark' {
              padding-bottom: 0;
              padding-top: 0;
            }
          }
        }
      }

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

        &:hover {
          text-decoration: $fe-bc-li-text-decoration;
        }
      }

      .e-address-list-item {
        display: inline-block;
        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'Material3' {
          height: $fe-bc-li-item-height;
        }

        &:last-child {

          .e-list-text {
            cursor: default;

            &: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' {
            vertical-align: middle;
          }

          &::before {
            @if $fm-skin-name != 'tailwind' {
              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);
      border-width: 0;
      float: left;

      .e-spin-show {
        display: none;
      }

      .e-gridcontent tr.e-emptyrow td.e-lastrowcell:first-child:empty {
        height: 0;
        padding: 0;
      }

      .e-gridheader {
        border-width: 0 1px 1px;

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

        @include visibility(hidden);

        &:hover,
        .e-active {
          @include visibility(visible);
        }
      }

      &.e-headercheck {

        .e-gridheader .e-headercontent {
          @include visibility(visible);
        }
      }

      @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: 0;
        }
      }

      .e-content {

        .e-rowcell {
          border: 0;
          font-size: $fe-grid-content-font-size;

          @if $fm-skin-name == 'FluentUI' {
            padding: 8px;
          }

          @if $fm-skin-name == 'Material3' {
            padding: 8px 12px;
            line-height: 20px;

            .e-fe-text {
              font-size: $fe-grid-content-name-font-size;
              line-height: 20px;
            }
          }
        }

        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: 2px;
          margin: 36px;
          height: calc(100% - 72px);
        }
      }

      .e-empty-content {
        font-size: $fe-grid-empty-content-font-size;
        margin: $fe-grid-empty-content-margin;
        padding: $fe-grid-empty-content-padding;
        text-align: $fe-grid-empty-content-text-align;
        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
          line-height: 24px;
        }
        @if $fm-skin-name == 'Material3' {
          font-weight: 500;
        }
      }

      .e-empty-icon {
        height: $fe-grid-empty-icon-height;
        margin: $fe-grid-empty-icon-margin;
        width: $fe-grid-empty-icon-width;
        @if $fm-skin-name == 'Material3' {
          margin-top: 5%;
        }
      }

      .e-empty-inner-content {
        font-size: $fe-grid-empty-inner-content-font-size;
        margin: $fe-grid-empty-inner-content-margin;
        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'Material3' {
          line-height: 22px;
        }
        @else {
          opacity: $fe-lg-icon-empty-inner-content-opacity;
        }
        padding: $fe-grid-empty-inner-content-padding;
        text-align: $fe-grid-empty-inner-content-text-align;
      }

      .e-gridpopup {
        display: none !important; /* stylelint-disable-line declaration-no-important */
      }

      .e-gridheader,
      .e-gridcontent {

        .e-emptyrow {
          display: none;
        }

        .e-fe-checkbox {
          overflow: inherit;
          padding-left: $fe-grid-header-cb-padding-left;
          padding-right: 0;
          box-shadow: none;
        }

        .e-fe-grid-icon {
          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'Material3' {
            padding: 0 0 0 12px;
          }
          @if $fm-skin-name == 'Material3' {
            padding: $fe-grid-icon-padding;
          }

          .e-headercelldiv {
            text-overflow: unset;
          }

          & + .e-rowcell,
          & + .e-headercell {
            padding-left: 0;

            &.e-fe-grid-name {
              padding-left: 6px;
            }
          }
        }
      }

      .e-row {
        @include visibility(hidden);

        &.e-focused {
          box-shadow: none;
          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'FluentUI' and $fm-skin-name != 'Material3' {
            td {
              box-shadow: $fe-grid-row-ie-box-shadow;
            }

            td:first-child {
              box-shadow: $fe-grid-row-fc-ie-box-shadow;
            }

            td: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: 0;
      }

      .e-fe-icon {
        display: inline-block;
        height: $fe-grid-icon-size;
        margin: $fe-grid-icon-margin;
        vertical-align: middle;
        width: $fe-grid-icon-size;
      }
    }

    .e-view-container {
      .e-grid {
        .e-gridheader {
          padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
        }
      }
    }

    &.e-rtl .e-view-container {
      .e-grid {
        .e-gridheader {
          padding-left: 0 !important; /* stylelint-disable-line declaration-no-important */
        }
      }
    }

    .e-large-icons {
      @include checkbox($fe-cb-line-height);
      float: left;
      overflow: auto;
      width: 100%;

      .e-empty {
        min-width: $fe-lg-icon-empty-min-width;
        @if $fm-skin-name == 'Material3' {
          border: 1px dashed $primary;
          border-radius: 2px;
          margin: 36px;
          height: calc(100% - 72px);
        }
      }

      .e-empty-content {
        font-size: $fe-lg-icon-empty-content-font-size;
        margin: $fe-lg-icon-empty-content-margin;
        padding: $fe-lg-icon-empty-content-padding;
        text-align: $fe-lg-icon-empty-content-text-align;
        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
          line-height: 24px;
        }
        @if $fm-skin-name == 'Material3' {
          font-weight: 500;
        }
      }

      .e-empty-icon {
        height: $fe-lg-icon-empty-icon-height;
        margin: $fe-lg-icon-empty-icon-margin;
        width: $fe-lg-icon-empty-icon-width;
        @if $fm-skin-name == 'Material3' {
          margin-top: 10%;
        }
      }

      .e-empty-inner-content {
        font-size: $fe-lg-icon-empty-inner-content-font-size;
        margin: $fe-lg-icon-empty-inner-content-margin;
        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'Material3' {
          line-height: 22px;
        }
        @else {
          opacity: $fe-lg-icon-empty-inner-content-opacity;
        }
        padding: $fe-lg-icon-empty-inner-content-padding;
        text-align: $fe-lg-icon-empty-inner-content-text-align;
      }

      .e-list-parent {
        display: block;
        height: 100%;
        margin: $fe-lg-margin;
        overflow: auto;
        padding: $fe-lg-padding;
      }

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

      .e-list-item {
        border: $fe-lg-item-border solid;
        float: left;
        height: $fe-lg-item-height;
        margin: $fe-lg-item-margin;
        overflow: hidden;
        padding: $fe-lg-item-padding;
        width: $fe-lg-item-width;
        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'Material3' {
          &.e-fe-drop-folder {
            border: 1px dashed $fe-drop-folder-bg-color;
          }
        }
        @if $fm-skin-name == 'FluentUI' {
          &.e-fe-drop-folder {
            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' {
          border-radius: 4px;
        }

        &.e-active,
        &.e-hover {
          @include visibility(visible);
        }
      }

      .e-text-content {
        display: table-cell;
        height: $fe-lg-item-inner-height;
        position: relative;
        vertical-align: bottom;
      }

      .e-list-text {
        @include ellipsis;
        display: block;
        font-size: $fe-lg-text-font-size;
        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;
        }
      }

      .e-list-img {
        @if $fm-skin-name != 'Material3' and $fm-skin-name != 'Material3-dark' {
          border: 2px solid;
        }
        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'Material3' {
          box-shadow: $fe-img-box-shadow;
        }
        display: block;
        margin: 0 auto;
        max-height: $fe-lg-img-height;
        max-width: 100%;
        min-height: 20px;
      }

      .e-list-icon {
        display: block;
        height: $fe-lg-icon-height;
        margin: $fe-lg-icon-margin;
        width: $fe-lg-icon-width;
        @if $fm-skin-name == 'Material3' {
          background-position: center;
        }
      }
    }

    .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: 38px;
        }
        @else if $fm-skin-name == 'Material3' {
          height: 40px;
        }
        @else {
          height: 36px;
          padding: 4px 8px;
        }
        @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: 14px;
            line-height: 22px;
            margin: 8px 8px 8px 0;
            max-width: 150px;
          }
          @else {
            font-size: 13px;
            margin: auto 8px;
            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' {
            height: 20px;
            margin: 9px 8px;
            width: 20px;
          }
          @else {
            height: 18px;
            margin: auto 8px;
            width: 18px;
          }
        }
      }

      .e-fe-count {
        border: 1px solid;
        border-radius: 50%;
        font-size: 12px;
        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
          height: 20px;
          line-height: 18px;
          margin: -10px 0 0 -10px;
          width: 20px;
        }
        @else {
          height: 22px;
          line-height: 22px;
          margin-left: -12px;
          width: 22px;
        }
        position: absolute;
        text-align: center;
        top: 0;
      }
    }

    &.e-rtl {

      .e-treeview {

        & > .e-ul {
          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
            padding: 0 8px 0 0;
          }
        }
      }

      .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: 0 29px 0 0;
              }
              @else if $fm-skin-name == 'Material3' {
                margin: $fe-rtl-search-input-margin;
              }
              @else {
                margin: 0 24px 0 0;
              }
              padding: 0;
            }
          }
        }

        .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 != 'FluentUI' and $fm-skin-name != 'Material3' {
            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: 0;
            padding-right: 12px;
          }

          .e-fe-grid-icon {
            padding-left: 0;
            padding-right: 12px;

            & + .e-rowcell,
            & + .e-headercell {
              padding-left: 21px;
              padding-right: 0;

              &.e-fe-grid-name {
                padding-right: 12px;
              }
            }
          }
        }

        .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: 0;
        margin-right: -12px;
      }

      @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-fe-overlay {
      border: $fe-upload-overlay-border dashed $fe-drop-border-color;
      bottom: 0;
      display: block;
      height: calc(100% - 34px);
      pointer-events: none;
      position: absolute;
      visibility: hidden;
      width: 100%;
    }

    .e-upload-drag-hover {
      outline: none;

      .e-fe-overlay {
        visibility: visible;
      }
    }
  }

  .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-xs;
            line-height: 18px;
          }
        }
      }

      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;
        height: 18px;
        margin: 0 8px -2px 0;
        width: 18px;
      }

      .e-fe-access-header {
        display: inline-block;
      }

      .e-fe-retrycontent {
        padding: 16px 0;
      }

      .e-image {
        height: 100%;
        width: 100%;
      }

      @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
        .e-dlg-content {
          padding-top: 16px;
        }
      }

      @if $fm-skin-name == 'FluentUI' {
        .e-dlg-content {
          padding-top: 2px;
        }
      }

      &.e-rtl {

        td {
          padding: $fe-dg-rtl-td-padding;
        }

        .e-fe-icon {
          margin: 0 0 -2px 8px;
        }
      }
    }

    &.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: $text-xs;
        line-height: 18px;
        padding-top: 4px;
      }
      @else {
        font-size: 12px;
        line-height: 1.5;
      }
    }

    .e-upload {
      border-bottom-width: 0;
      border-top-width: 0;

      .e-file-select-wrap {
        display: none;
      }

      .e-icons.e-file-delete-btn {
        display: none;
      }

      .e-upload-actions {
        border-bottom: 1px solid;
      }
    }
  }

  .e-filemanager,
  .e-bigger .e-filemanager,
  .e-filemanager.e-bigger {

    &.e-fe-mobile {
      
      .e-toolbar {
        @if ($fm-skin-name == 'Material3') {
          height: $fe-mobile-tb-height;
          min-height: $fe-mobile-tb-height;
        }
      }

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

      .e-toolbar .e-popup-up-icon.e-icons,
      .e-toolbar .e-popup-down-icon.e-icons {
        font-size: $fe-mobile-icon-font-size;
      }

      .e-toolbar-left {

        .e-icons.e-fe-sort {
          display: inline-block;
          margin: 0;
          width: 14px;
        }

        .e-tbar-ddb-text {
          display: none;
        }

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

        .e-address-list-item .e-icons {
          font-size: $fe-big-bc-icon-font-size;
        }

        .e-list-text {
          font-size: $fe-big-bc-font-size;
        }

        .e-search-wrap {
          min-width: 47px;
          width: auto;

          .e-input-group {
            display: none;
            height: $fe-mobile-search-height;
            width: 100%;

            .e-clear-icon {
              margin: 2px 8px 0;
            }

            .e-input {
              margin: $fe-search-input-margin;
            }
          }
        }

        .e-fe-search {
          font-size: $fe-mobile-icon-font-size;
          margin: 3px 0;
          right: 13px;
        }
      }

      .e-grid {

        .e-fe-grid-icon .e-fe-icon {
          height: $fe-mobile-grid-icon-size;
          width: $fe-mobile-grid-icon-size;
          @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
            margin: 0 8px 0 0;
          }
        }

        .e-gridheader {
          display: none;
        }

        .e-content {

          .e-rowcell {
            border-bottom: 1px solid;
            border-bottom-color: $fe-border-color;

            &.e-fe-checkbox {
              padding: 0;
            }
          }
        }

        .e-gridcontent .e-fe-grid-icon {
          @if $fm-skin-name == 'fabric-dark' {
            padding-left: 9px;
            padding-right: 9px;
          }
          @else {
            padding-left: 10px;
            padding-right: 10px;
          }
        }

        .e-fe-text {
          @include ellipsis;
        }
      }

      .e-large-icons .e-list-parent {
        padding: 0;

        .e-list-item {
          display: inline-table;
          height: $fe-mobile-lg-item-height;
          margin: $fe-mobile-lg-item-margin;
          width: $fe-mobile-lg-item-width;

          &.e-hover {
            @include visibility(hidden);
          }

          &.e-active {
            @include visibility(visible);
          }

          .e-checkbox-wrapper {
            z-index: 999;
          }

          .e-list-text {
            margin: 0 auto;
            width: $fe-mobile-lg-item-inner-width;
            @if $fm-skin-name == 'Material3' {
              font-size: $fe-big-lg-text-font-size;
            }
          }

          .e-list-img {
            margin: 11px auto;
            max-height: $fe-mobile-lg-img-height;
            max-width: $fe-mobile-lg-item-inner-width;
          }

          .e-list-icon {
            height: $fe-mobile-lg-icon-height;
            margin: $fe-mobile-lg-icon-margin;
            width: $fe-mobile-lg-icon-width;
          }
        }
      }
    }

    &.e-fe-m-select {

      .e-large-icons {

        .e-list-item.e-large-icon {
          @include visibility(visible);
        }
      }

      .e-grid {

        .e-content .e-row .e-rowcell {
          @include visibility(visible);
        }
      }
    }

    &.e-fe-m-filter {

      .e-address {

        .e-search-wrap {
          margin: 0;
          padding: 0;
          position: absolute;
          width: 100%;

          .e-input-group {
            display: inline-flex;
          }

          .e-input-group .e-input {
            height: auto;
            margin-left: 45px;
          }

          .e-fe-search {
            left: 0;
            margin-left: 8px;
            @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
              margin-top: 7px;
            }
            @else {
              margin-top: 3px;
            }
            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: 45px;
          }

          .e-fe-search {
            transform: rotate(180deg);
          }
        }
      }
    }

    &.e-rtl {

      .e-grid {

        .e-gridheader,
        .e-gridcontent {

          .e-fe-grid-icon {
            padding-right: 10px;
          }
        }
      }
    }
  }

  .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') {
        height: $fe-big-tb-height;
        min-height: $fe-big-tb-height;

        .e-toolbar-item:not(.e-separator) {
          min-height: $fe-big-tb-height;
          padding: 4px;
        }
      }

      .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-tbar-btn.e-active {
          padding: $fe-big-tb-ddb-btn-hvr-padding;
        }

        &.e-tbar-btn:hover {
          padding: $fe-big-tb-ddb-btn-hvr-padding;
        }

        &.e-tbar-btn: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;
            height: 22px;
            margin: 4px 4px 0;
            padding: 1px;
            width: 22px;
          }
          @else {
            padding: 0 10px;
          }
        }
      }

      .e-toolbar-pop .e-toolbar-item .e-dropdown-btn .e-btn-icon.e-icons.e-caret {
        padding: 0 10px;
      }

      .e-popup-up-icon.e-icons,
      .e-popup-down-icon.e-icons {
        font-size: $fe-mobile-icon-font-size;
      }
    }
    @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 {
            height: 24px;
            margin: 7px 12px;
            width: 24px;
          }
        }

        .e-fe-count {
          font-size: $text-sm;
          height: 24px;
          line-height: 22px;
          width: 24px;
        }
      }
    }

    .e-treeview {

      & > .e-ul {
        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
          padding-left: 12px;
        }
      }

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

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

          .e-input {
            @if ($fm-skin-name == 'material' or $fm-skin-name == 'material-dark') {
              height: 39px;
            }
            @if ($fm-skin-name == 'FluentUI') {
              height: 30px;
            }

            @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: 0;
            }
          }
        }
      }

      .e-fe-search {
        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
          font-size: 16px;
        }
        @else if $fm-skin-name == 'FluentUI' {
          font-size: 18px;
        }
        @if $fm-skin-name == 'tailwind' {
          margin: 7px 4px;
        }
        @else if $fm-skin-name == 'bootstrap5' {
          margin: 4px;
        }
        @else if $fm-skin-name == 'FluentUI' {
          margin: 3px;
        }
        @else if($fm-skin-name == 'Material3') {
          margin: $fe-search-icon-margin;
        }
        @else {
          margin: 7px 0;
        }

        @if ($fm-skin-name == 'Material3') {
          padding: $fe-big-search-input-padding;
        }
      }
    }

    .e-grid {
      @include checkbox($fe-big-cb-line-height);

      .e-gridheader {

        .e-headercell {
          height: $fe-big-grid-header-height;
        }

        .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: 10px;
        }

        .e-fe-grid-icon {
          @if $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'tailwind' {
            padding-left: 10px;
          }
          @else {
            padding-left: 16px;
          }
        }
      }

      .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' {
          height: 24px;
          width: 24px;
        }
        @else {
          margin: $fe-big-grid-icon-margin;
        }
      }

      .e-empty {
        min-width: $fe-big-grid-empty-min-width;
      }

      .e-empty-content {
        font-size: $fe-big-grid-empty-content-font-size;
        margin: $fe-big-grid-empty-content-margin;
        padding: $fe-big-grid-empty-content-padding;
        text-align: $fe-big-grid-empty-content-text-align;
      }

      .e-empty-icon {
        height: $fe-big-grid-empty-icon-height;
        margin: $fe-big-grid-empty-icon-margin;
        width: $fe-big-grid-empty-icon-width;
      }

      .e-empty-inner-content {
        font-size: $fe-big-grid-empty-inner-content-font-size;
        margin: $fe-big-grid-empty-inner-content-margin;
        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
          opacity: $fe-big-grid-empty-inner-content-opacity;
        }
        padding: $fe-big-grid-empty-inner-content-padding;
        text-align: $fe-big-grid-empty-inner-content-text-align;
      }
      &.e-rtl .e-checkbox-wrapper .e-frame {
        @if $fm-skin-name == 'FluentUI' {
          margin-right: -16px;
        }
        @else{
          margin-right: -10px;
        }
      }
    }

    .e-large-icons {
      @include checkbox($fe-big-cb-line-height);

      .e-list-parent {
        padding: $fe-big-lg-padding;
      }

      .e-list-item {
        height: $fe-big-lg-item-height;
        margin: $fe-big-lg-item-margin;
        width: $fe-big-lg-item-width;
      }

      .e-text-content {
        height: $fe-big-lg-item-inner-height;
      }

      .e-list-text {
        font-size: $fe-big-lg-text-font-size;
        padding: $fe-big-lg-text-padding;
        width: $fe-big-lg-item-inner-width;
      }

      .e-list-img {
        max-height: $fe-big-lg-img-height;
        max-width: $fe-big-lg-item-inner-width;
      }

      .e-list-icon {
        height: $fe-big-lg-icon-height;
        margin: $fe-big-lg-icon-margin;
        width: $fe-big-lg-icon-width;
      }

      .e-empty {
        min-width: $fe-big-lg-icon-empty-min-width;
      }

      .e-empty-content {
        font-size: $fe-big-lg-icon-empty-content-font-size;
        margin: $fe-big-lg-icon-empty-content-margin;
        padding: $fe-big-lg-icon-empty-content-padding;
        text-align: $fe-big-lg-icon-empty-content-text-align;
      }

      .e-empty-icon {
        height: $fe-big-lg-icon-empty-icon-height;
        margin: $fe-big-lg-icon-empty-icon-margin;
        width: $fe-big-lg-icon-empty-icon-width;
      }

      .e-empty-inner-content {
        font-size: $fe-big-lg-icon-empty-inner-content-font-size;
        margin: $fe-big-lg-icon-empty-inner-content-margin;
        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
          opacity: $fe-big-lg-icon-empty-inner-content-opacity;
        }
        padding: $fe-big-lg-icon-empty-inner-content-padding;
        text-align: $fe-big-lg-icon-empty-inner-content-text-align;
      }
    }

    &.e-rtl {

      .e-treeview {

        & > .e-ul {
          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
            padding: 0 12px 0 0;
          }
        }
      }

      @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: 16px;
          }
        }
      }
    }

    .e-fe-overlay {
      height: calc(100% - 41px);
    }
  }

  @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 {
    height: 100%;
    width: 100%;
  }
}


@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 active-item {
  background: $fe-active-bg-color;
  border-color: $fe-active-border-color;
}

@mixin hover-item($bg-color, $border-color) {
  background: $bg-color;
  border-color: $border-color;
}

@include export-module('FileManager-theme') {
  .e-filemanager {
    background: $fe-background;
    border-color: $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 {
          //Based on toolbar active background modify the dropdowns background
          &.e-active {
            @include hover-icon-border-color;
            @include active-icon-color;
            background: $fe-tb-focus-bg;
            border-color: $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;
            background: $fe-tb-focus-bg;
            border-color: $fe-tb-hover-border-color;
          }

          &:focus {
            @include hover-icon-border-color;
            @include active-icon-color;
            background: $fe-tb-focus-bg;
            border-color: $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' {
            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 {

            &:hover {
              @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
                background: $fe-bc-hover-bg-color;
              }
              color: $fe-bc-hover-font-color;
            }

            &:active {
              @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
                background: $fe-bc-hover-bg-color;
              }
              color: $fe-bc-hover-font-color;
            }

            &:focus {
              @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
                background: $fe-bc-hover-bg-color;
              }
              color: $fe-bc-hover-font-color;
            }
          }
        }
      }

      .e-search-wrap {
        .e-input-group.e-control-wrapper:not(.e-success) {
          background: $fe-search-bg-color;
          border-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: 0;
          }
        }
      }
    }

    .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 {
            background: $fe-hover-bg-color;
          }
          @if $fm-skin-name == 'FluentUI' {
            &.e-fe-checkbox:hover {
              background: $content-bg-color;
            }
          }
          @else {
            &.e-fe-checkbox:hover {
              background: $fe-grid-header-bg-color;
            }
          }

          &.e-fe-grid-icon .e-headercelldiv:hover {
            background: $fe-hover-bg-color;
          }
        }
      }

      .e-empty-inner-content {
        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
          color: $content-text-color-alt2;
        }

        @if $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-active-font-color;
        }
      }

      td.e-active {
        background-color: $fe-active-bg-color;
        @if $fm-skin-name != 'material-dark' {
          color: $fe-active-font-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-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 == 'bootstrap5' or $fm-skin-name == 'Material3' {
          color: $content-text-color-alt2;
        }
        @if $fm-skin-name =='Material3' {
          color: $fe-grid-empty-inner-content-color;
        }
      }

      .e-large-icon {
        border-color: transparent;

        &.e-active {
          @include active-item;
        }

        &.e-hover {
          @include hover-item($fe-hover-bg-color, $fe-hover-border-color);
        }

        &.e-active.e-hover {
          @include hover-item($fe-ah-bg-color, $fe-ah-border-color);
        }

        &.e-focus {
          border-color: $fe-focus-border-color;
        }

        &.e-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 {
            @include hover-item(transparent, transparent);
          }

          &.e-focus {
            border-color: transparent;
          }

          &.e-active {
            @include active-item;
          }
        }
      }
      @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;
      }
    }
  }
}


@include export-module('FileManager-bootstrap5-icons') {

  .e-filemanager {

    .e-fe-icon,
    .e-list-icon {
      background-repeat: no-repeat;
    }

    .e-fe-access-error {
      background-image: url('data:image/svg+xml,%3Csvg width="auto" height="auto" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M16.6609 3.84609C17.9756 1.38463 22.0244 1.38464 23.3392 3.84609L39.6572 34.3961C40.7819 36.5017 39.0019 38.9055 36.318 38.9055H3.68198C0.998067 38.9055 -0.781888 36.5017 0.342825 34.3961L16.6609 3.84609Z" fill="%23FDDD35"/%3E%3Cpath d="M20 22.5025V25.8794M20 29.2564H20.0097M28.75 25.8794C28.75 30.0758 24.8325 33.4776 20 33.4776C15.1675 33.4776 11.25 30.0758 11.25 25.8794C11.25 21.6831 15.1675 18.2812 20 18.2812C24.8325 18.2812 28.75 21.6831 28.75 25.8794Z" stroke="%23212529" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E%0A');
    }

    .e-fe-docx,
    .e-fe-doc {
      background-image: url('data:image/svg+xml,%3Csvg width="auto" height="auto" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0)"%3E%3Cg filter="url(%23filter0_i)"%3E%3Cpath d="M9 40H31C33.2091 40 35 38.2091 35 36V10L25 0H9C6.79086 0 5 1.79086 5 4V36C5 38.2091 6.79086 40 9 40Z" fill="%2300B0FF"/%3E%3C/g%3E%3Cg filter="url(%23filter1_d)"%3E%3Cpath d="M27 10H35L25 0V8C25 9.10457 25.8954 10 27 10Z" fill="white" fill-opacity="0.5"/%3E%3C/g%3E%3Cline x1="10.5" y1="15.75" x2="22" y2="15.75" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M11.25 22.5L30 22.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M11.25 30L30 30" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_i" x="5" y="0" width="30" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dy="2"/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3CfeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/%3E%3CfeBlend mode="normal" in2="shape" result="effect1_innerShadow"/%3E%3C/filter%3E%3Cfilter id="filter1_d" x="23" y="-1" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dy="1"/%3E%3CfeGaussianBlur stdDeviation="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/%3E%3CfeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/%3E%3C/filter%3E%3CclipPath id="clip0"%3E%3Crect width="40" height="40" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A');
    }

    .e-fe-pptx,
    .e-fe-ppt {
      background-image: url('data:image/svg+xml,%3Csvg width="auto" height="auto" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0)"%3E%3Cg filter="url(%23filter0_i)"%3E%3Cpath d="M9 40H30.9997C33.2088 40 34.9997 38.2091 34.9997 36V10L24.9998 0H9C6.79086 0 5 1.79086 5 4V36C5 38.2091 6.79086 40 9 40Z" fill="%23FF8E47"/%3E%3C/g%3E%3Cg filter="url(%23filter1_d)"%3E%3Cpath d="M27 10H34.9999L25 0V8C25 9.10457 25.8954 10 27 10Z" fill="white" fill-opacity="0.5"/%3E%3C/g%3E%3Cpath d="M11.249 32.499L29.9988 32.499" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cellipse cx="19.9994" cy="20" rx="7.49991" ry="7.5" fill="%23FFA153" stroke="white"/%3E%3Cpath d="M27.5 20H20L20.0001 12.5C24.1422 12.5 27.5 15.8579 27.5 20Z" fill="white"/%3E%3Cpath d="M27.5 20V20.5H28V20H27.5ZM20 20L19.5 20C19.5 20.1326 19.5527 20.2598 19.6464 20.3536C19.7402 20.4473 19.8674 20.5 20 20.5V20ZM20.0001 12.5V12H19.5001L19.5001 12.5L20.0001 12.5ZM20.5 20L20.5001 12.5L19.5001 12.5L19.5 20L20.5 20ZM20.0001 13C23.866 13 27 16.134 27 20H28C28 15.5817 24.4183 12 20.0001 12V13ZM27.5 19.5H20V20.5H27.5V19.5Z" fill="white"/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_i" x="5" y="0" width="29.9997" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3CfeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/%3E%3CfeBlend mode="normal" in2="shape" result="effect1_innerShadow"/%3E%3C/filter%3E%3Cfilter id="filter1_d" x="23" y="-1" width="13.9999" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dy="1"/%3E%3CfeGaussianBlur stdDeviation="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/%3E%3CfeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/%3E%3C/filter%3E%3CclipPath id="clip0"%3E%3Crect width="40" height="40" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A');
    }

    .e-fe-xlsx,
    .e-fe-xls {
      background-image: url('data:image/svg+xml,%3Csvg width="auto" height="auto" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0)"%3E%3Cg filter="url(%23filter0_i)"%3E%3Cpath d="M9 40H31C33.2091 40 35 38.2091 35 36V10L25 0H9C6.79086 0 5 1.79086 5 4V36C5 38.2091 6.79086 40 9 40Z" fill="%2337E170"/%3E%3C/g%3E%3Cg filter="url(%23filter1_d)"%3E%3Cpath d="M27 10H35L25 0V8C25 9.10457 25.8954 10 27 10Z" fill="white" fill-opacity="0.5"/%3E%3C/g%3E%3Cpath d="M11.25 25L30 25" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M20 16.875L20 33.125" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M30 33.75H11.25V16.25H30V33.75Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_i" x="5" y="0" width="30" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3CfeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/%3E%3CfeBlend mode="normal" in2="shape" result="effect1_innerShadow"/%3E%3C/filter%3E%3Cfilter id="filter1_d" x="23" y="-1" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dy="1"/%3E%3CfeGaussianBlur stdDeviation="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/%3E%3CfeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/%3E%3C/filter%3E%3CclipPath id="clip0"%3E%3Crect width="40" height="40" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A');
    }

    .e-fe-pdf {
      background-image: url('data:image/svg+xml,%3Csvg width="auto" height="auto" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0)"%3E%3Cg filter="url(%23filter0_i)"%3E%3Cpath d="M9 40H31C33.2091 40 35 38.2091 35 36V10L25 0H9C6.79086 0 5 1.79086 5 4V36C5 38.2091 6.79086 40 9 40Z" fill="%23FF8484"/%3E%3C/g%3E%3Cg filter="url(%23filter1_d)"%3E%3Cpath d="M27 10H35L25 0V8C25 9.10457 25.8954 10 27 10Z" fill="white" fill-opacity="0.5"/%3E%3C/g%3E%3Cpath d="M8.75 28.75V23.75M8.75 23.75V18.75H11.75C12.8546 18.75 13.75 19.6454 13.75 20.75V21.75C13.75 22.8546 12.8546 23.75 11.75 23.75H8.75Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M26.25 28.75V23.75V18.75H32.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M26.25 23.75H31.25" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M20.5 18.75H17.5V28.75H20.5C21.6046 28.75 22.5 27.8546 22.5 26.75V20.75C22.5 19.6454 21.6046 18.75 20.5 18.75Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_i" x="5" y="0" width="30" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3CfeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/%3E%3CfeBlend mode="normal" in2="shape" result="effect1_innerShadow"/%3E%3C/filter%3E%3Cfilter id="filter1_d" x="23" y="-1" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dy="1"/%3E%3CfeGaussianBlur stdDeviation="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/%3E%3CfeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/%3E%3C/filter%3E%3CclipPath id="clip0"%3E%3Crect width="40" height="40" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A');
    }

    .e-fe-image {
      background-image: url('data:image/svg+xml,%3Csvg width="auto" height="auto" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0)"%3E%3Cg filter="url(%23filter0_i)"%3E%3Cpath d="M9 40H31C33.2091 40 35 38.2091 35 36V10L25 0H9C6.79086 0 5 1.79086 5 4V36C5 38.2091 6.79086 40 9 40Z" fill="%238799FB"/%3E%3C/g%3E%3Cg filter="url(%23filter1_d)"%3E%3Cpath d="M27 10H35L25 0V8C25 9.10457 25.8954 10 27 10Z" fill="white" fill-opacity="0.5"/%3E%3C/g%3E%3Cpath d="M11.25 29.25L16.624 24.2821C17.5393 23.4359 19.0232 23.4359 19.9385 24.2821L25.3125 29.25M22.9688 27.0833L24.8271 25.3654C25.7424 24.5193 27.2264 24.5193 28.1417 25.3654L30 27.0833M22.9688 20.5833H22.9805M13.5938 32.5H27.6562C28.9507 32.5 30 31.5299 30 30.3333V18.4167C30 17.22 28.9507 16.25 27.6562 16.25H13.5938C12.2993 16.25 11.25 17.22 11.25 18.4167V30.3333C11.25 31.5299 12.2993 32.5 13.5938 32.5Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_i" x="5" y="0" width="30" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3CfeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/%3E%3CfeBlend mode="normal" in2="shape" result="effect1_innerShadow"/%3E%3C/filter%3E%3Cfilter id="filter1_d" x="23" y="-1" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dy="1"/%3E%3CfeGaussianBlur stdDeviation="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/%3E%3CfeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/%3E%3C/filter%3E%3CclipPath id="clip0"%3E%3Crect width="40" height="40" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A');
    }

    .e-fe-rar {
      background-image: url('data:image/svg+xml,%3Csvg width="auto" height="auto" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0)"%3E%3Cg filter="url(%23filter0_i)"%3E%3Cpath d="M9 40H31C33.2091 40 35 38.2091 35 36V10L25 0H9C6.79086 0 5 1.79086 5 4V36C5 38.2091 6.79086 40 9 40Z" fill="%23B870FF"/%3E%3C/g%3E%3Cpath d="M8.75 28.75V23.75M8.75 23.75V18.75H11.75C12.8546 18.75 13.75 19.6454 13.75 20.75V21.75C13.75 22.8546 12.8546 23.75 11.75 23.75H8.75Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M9.47102 23.817L13.7497 28.749" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M17.5 28.75V20.75C17.5 19.6454 18.3954 18.75 19.5 18.75H20.5C21.6046 18.75 22.5 19.6454 22.5 20.75V28.75" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M26.25 28.75V23.75M26.25 23.75V18.75H29.25C30.3546 18.75 31.25 19.6454 31.25 20.75V21.75C31.25 22.8546 30.3546 23.75 29.25 23.75H26.25Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M26.971 23.817L31.2497 28.749" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cline x1="17.5" y1="25.75" x2="22.5" y2="25.75" stroke="white"/%3E%3Cg filter="url(%23filter1_d)"%3E%3Cpath d="M27 10H35L25 0V8C25 9.10457 25.8954 10 27 10Z" fill="white" fill-opacity="0.5"/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_i" x="5" y="0" width="30" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3CfeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/%3E%3CfeBlend mode="normal" in2="shape" result="effect1_innerShadow"/%3E%3C/filter%3E%3Cfilter id="filter1_d" x="23" y="-1" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dy="1"/%3E%3CfeGaussianBlur stdDeviation="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/%3E%3CfeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/%3E%3C/filter%3E%3CclipPath id="clip0"%3E%3Crect width="40" height="40" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A');
    }

    .e-fe-zip {
      background-image: url('data:image/svg+xml,%3Csvg width="auto" height="auto" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0)"%3E%3Cg filter="url(%23filter0_i)"%3E%3Cpath d="M9 40H31C33.2091 40 35 38.2091 35 36V10L25 0H9C6.79086 0 5 1.79086 5 4V36C5 38.2091 6.79086 40 9 40Z" fill="%23FFCB45"/%3E%3C/g%3E%3Cg filter="url(%23filter1_d)"%3E%3Cpath d="M27 10H35L25 0V8C25 9.10457 25.8954 10 27 10Z" fill="white" fill-opacity="0.5"/%3E%3C/g%3E%3Cpath d="M10 16.25L22.5 16.25" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M10 10.001L22.5 10.001" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M10 22.5L22.5 22.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M22.5 28.75H10L16.25 35L22.5 28.75Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_i" x="5" y="0" width="30" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3CfeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/%3E%3CfeBlend mode="normal" in2="shape" result="effect1_innerShadow"/%3E%3C/filter%3E%3Cfilter id="filter1_d" x="23" y="-1" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dy="1"/%3E%3CfeGaussianBlur stdDeviation="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/%3E%3CfeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/%3E%3C/filter%3E%3CclipPath id="clip0"%3E%3Crect width="40" height="40" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A');
    }

    .e-fe-txt {
      background-image: url('data:image/svg+xml,%3Csvg width="auto" height="auto" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0)"%3E%3Cg filter="url(%23filter0_i)"%3E%3Cpath d="M9 40H31C33.2091 40 35 38.2091 35 36V10L25 0H9C6.79086 0 5 1.79086 5 4V36C5 38.2091 6.79086 40 9 40Z" fill="%239A9DA2"/%3E%3C/g%3E%3Cg filter="url(%23filter1_d)"%3E%3Cpath d="M27 10H35L25 0V8C25 9.10457 25.8954 10 27 10Z" fill="white" fill-opacity="0.5"/%3E%3C/g%3E%3Cline x1="11.75" y1="17" x2="23.25" y2="17" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M11.25 23.75L30 23.75" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M11.25 31.25L30 31.25" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_i" x="5" y="0" width="30" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3CfeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/%3E%3CfeBlend mode="normal" in2="shape" result="effect1_innerShadow"/%3E%3C/filter%3E%3Cfilter id="filter1_d" x="23" y="-1" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dy="1"/%3E%3CfeGaussianBlur stdDeviation="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/%3E%3CfeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/%3E%3C/filter%3E%3CclipPath id="clip0"%3E%3Crect width="40" height="40" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A');
    }

    .e-fe-music {
      background-image: url('data:image/svg+xml,%3Csvg width="auto" height="auto" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0)"%3E%3Cg filter="url(%23filter0_i)"%3E%3Cpath d="M9 40H31C33.2091 40 35 38.2091 35 36V10L25 0H9C6.79086 0 5 1.79086 5 4V36C5 38.2091 6.79086 40 9 40Z" fill="%2333C0FF"/%3E%3C/g%3E%3Cg filter="url(%23filter1_d)"%3E%3Cpath d="M27 10H35L25 0V8C25 9.10457 25.8954 10 27 10Z" fill="white" fill-opacity="0.5"/%3E%3C/g%3E%3Cpath d="M15.4167 31.5278V17.0833L28.75 13.75V28.1944M15.4167 31.5278C15.4167 32.7551 13.9243 33.75 12.0833 33.75C10.2424 33.75 8.75 32.7551 8.75 31.5278C8.75 30.3005 10.2424 29.3056 12.0833 29.3056C13.9243 29.3056 15.4167 30.3005 15.4167 31.5278ZM28.75 28.1944C28.75 29.4217 27.2576 30.4167 25.4167 30.4167C23.5757 30.4167 22.0833 29.4217 22.0833 28.1944C22.0833 26.9671 23.5757 25.9722 25.4167 25.9722C27.2576 25.9722 28.75 26.9671 28.75 28.1944ZM15.4167 21.5278L28.75 18.1944" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_i" x="5" y="0" width="30" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3CfeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/%3E%3CfeBlend mode="normal" in2="shape" result="effect1_innerShadow"/%3E%3C/filter%3E%3Cfilter id="filter1_d" x="23" y="-1" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dy="1"/%3E%3CfeGaussianBlur stdDeviation="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/%3E%3CfeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/%3E%3C/filter%3E%3CclipPath id="clip0"%3E%3Crect width="40" height="40" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A');
    }

    .e-fe-video {
      background-image: url('data:image/svg+xml,%3Csvg width="auto" height="auto" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0)"%3E%3Cg filter="url(%23filter0_i)"%3E%3Cpath d="M9 40H31C33.2091 40 35 38.2091 35 36V10L25 0H9C6.79086 0 5 1.79086 5 4V36C5 38.2091 6.79086 40 9 40Z" fill="%23FF8484"/%3E%3C/g%3E%3Cg filter="url(%23filter1_d)"%3E%3Cpath d="M27 10H35L25 0V8C25 9.10457 25.8954 10 27 10Z" fill="white" fill-opacity="0.5"/%3E%3C/g%3E%3Cpath d="M23.4916 23.5073L20.1611 21.287C19.4689 20.8255 18.5417 21.3218 18.5417 22.1537V26.5943C18.5417 27.4263 19.4689 27.9225 20.1611 27.461L23.4916 25.2407C24.1101 24.8284 24.1101 23.9196 23.4916 23.5073Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M30 24.374C30 29.5517 25.8027 33.749 20.625 33.749C15.4473 33.749 11.25 29.5517 11.25 24.374C11.25 19.1964 15.4473 14.999 20.625 14.999C25.8027 14.999 30 19.1964 30 24.374Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_i" x="5" y="0" width="30" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3CfeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/%3E%3CfeBlend mode="normal" in2="shape" result="effect1_innerShadow"/%3E%3C/filter%3E%3Cfilter id="filter1_d" x="23" y="-1" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dy="1"/%3E%3CfeGaussianBlur stdDeviation="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/%3E%3CfeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/%3E%3C/filter%3E%3CclipPath id="clip0"%3E%3Crect width="40" height="40" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A');
    }

    .e-fe-js {
      background-image: url('data:image/svg+xml,%3Csvg width="auto" height="auto" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0)"%3E%3Cg filter="url(%23filter0_i)"%3E%3Cpath d="M9 40H31C33.2091 40 35 38.2091 35 36V10L25 0H9C6.79086 0 5 1.79086 5 4V36C5 38.2091 6.79086 40 9 40Z" fill="%23A0DA40"/%3E%3C/g%3E%3Cg filter="url(%23filter1_d)"%3E%3Cpath d="M27 10H35L25 0V8C25 9.10457 25.8954 10 27 10Z" fill="white" fill-opacity="0.5"/%3E%3C/g%3E%3Cpath d="M22.5 28.75H26.75C27.8546 28.75 28.75 27.8546 28.75 26.75V25.125C28.75 24.0204 27.8546 23.125 26.75 23.125H24.5C23.3954 23.125 22.5 22.2296 22.5 21.125V19.5C22.5 18.3954 23.3954 17.5 24.5 17.5H28.75" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M17.5 17.5V26.75C17.5 27.8546 16.6046 28.75 15.5 28.75H13.25C12.1454 28.75 11.25 27.8546 11.25 26.75V24.5312" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_i" x="5" y="0" width="30" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3CfeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/%3E%3CfeBlend mode="normal" in2="shape" result="effect1_innerShadow"/%3E%3C/filter%3E%3Cfilter id="filter1_d" x="23" y="-1" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dy="1"/%3E%3CfeGaussianBlur stdDeviation="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/%3E%3CfeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/%3E%3C/filter%3E%3CclipPath id="clip0"%3E%3Crect width="40" height="40" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A');
    }

    .e-fe-css {
      background-image: url('data:image/svg+xml,%3Csvg width="auto" height="auto" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0)"%3E%3Cg filter="url(%23filter0_i)"%3E%3Cpath d="M9 40H31C33.2091 40 35 38.2091 35 36V10L25 0H9C6.79086 0 5 1.79086 5 4V36C5 38.2091 6.79086 40 9 40Z" fill="%23F4A839"/%3E%3C/g%3E%3Cg filter="url(%23filter1_d)"%3E%3Cpath d="M27 10H35L25 0V8C25 9.10457 25.8954 10 27 10Z" fill="white" fill-opacity="0.5"/%3E%3C/g%3E%3Cpath d="M26.25 30H30.5C31.6046 30 32.5 29.1046 32.5 28V26.375C32.5 25.2704 31.6046 24.375 30.5 24.375H28.25C27.1454 24.375 26.25 23.4796 26.25 22.375V20.75C26.25 19.6454 27.1454 18.75 28.25 18.75H32.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M17.5 30H21.75C22.8546 30 23.75 29.1046 23.75 28V26.375C23.75 25.2704 22.8546 24.375 21.75 24.375H19.5C18.3954 24.375 17.5 23.4796 17.5 22.375V20.75C17.5 19.6454 18.3954 18.75 19.5 18.75H23.75" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M15 18.75H10.75C9.64543 18.75 8.75 19.6454 8.75 20.75V28C8.75 29.1046 9.64543 30 10.75 30H15" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_i" x="5" y="0" width="30" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3CfeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/%3E%3CfeBlend mode="normal" in2="shape" result="effect1_innerShadow"/%3E%3C/filter%3E%3Cfilter id="filter1_d" x="23" y="-1" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dy="1"/%3E%3CfeGaussianBlur stdDeviation="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/%3E%3CfeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/%3E%3C/filter%3E%3CclipPath id="clip0"%3E%3Crect width="40" height="40" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A');
    }

    .e-fe-html {
      background-image: url('data:image/svg+xml,%3Csvg width="auto" height="auto" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0)"%3E%3Cg filter="url(%23filter0_i)"%3E%3Cpath d="M9 40H31C33.2091 40 35 38.2091 35 36V10L25 0H9C6.79086 0 5 1.79086 5 4V36C5 38.2091 6.79086 40 9 40Z" fill="%23B653C6"/%3E%3C/g%3E%3Cg filter="url(%23filter1_d)"%3E%3Cpath d="M27 10H35L25 0V8C25 9.10457 25.8954 10 27 10Z" fill="white" fill-opacity="0.5"/%3E%3C/g%3E%3Cpath d="M17.5 33.75L22.5 13.75M26.25 18.75L31.25 23.75L26.25 28.75M13.75 28.75L8.75 23.75L13.75 18.75" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_i" x="5" y="0" width="30" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3CfeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/%3E%3CfeBlend mode="normal" in2="shape" result="effect1_innerShadow"/%3E%3C/filter%3E%3Cfilter id="filter1_d" x="23" y="-1" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dy="1"/%3E%3CfeGaussianBlur stdDeviation="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/%3E%3CfeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/%3E%3C/filter%3E%3CclipPath id="clip0"%3E%3Crect width="40" height="40" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A');
    }

    .e-fe-php {
      background-image: url('data:image/svg+xml,%3Csvg width="auto" height="auto" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0)"%3E%3Cg filter="url(%23filter0_i)"%3E%3Cpath d="M9 40H31C33.2091 40 35 38.2091 35 36V10L25 0H9C6.79086 0 5 1.79086 5 4V36C5 38.2091 6.79086 40 9 40Z" fill="%23A080FF"/%3E%3C/g%3E%3Cg filter="url(%23filter1_d)"%3E%3Cpath d="M27 10H35L25 0V8C25 9.10457 25.8954 10 27 10Z" fill="white" fill-opacity="0.5"/%3E%3C/g%3E%3Cpath d="M8.75 28.75V25M8.75 25V20H11.75C12.8546 20 13.75 20.8954 13.75 22V23C13.75 24.1046 12.8546 25 11.75 25H8.75Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M26.25 28.75V25M26.25 25V20H29.25C30.3546 20 31.25 20.8954 31.25 22V23C31.25 24.1046 30.3546 25 29.25 25H26.25Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M17.5 28.75V25V20" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M22.5 28.75V25V20" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M17.5 23.75H22.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_i" x="5" y="0" width="30" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3CfeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/%3E%3CfeBlend mode="normal" in2="shape" result="effect1_innerShadow"/%3E%3C/filter%3E%3Cfilter id="filter1_d" x="23" y="-1" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dy="1"/%3E%3CfeGaussianBlur stdDeviation="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/%3E%3CfeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/%3E%3C/filter%3E%3CclipPath id="clip0"%3E%3Crect width="40" height="40" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A');
    }

    .e-fe-exe {
      background-image: url('data:image/svg+xml,%3Csvg width="auto" height="auto" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0)"%3E%3Cg filter="url(%23filter0_i)"%3E%3Cpath d="M9 40H31C33.2091 40 35 38.2091 35 36V10L25 0H9C6.79086 0 5 1.79086 5 4V36C5 38.2091 6.79086 40 9 40Z" fill="%239B9DA2"/%3E%3C/g%3E%3Cg filter="url(%23filter1_d)"%3E%3Cpath d="M27 10H35L25 0V8C25 9.10457 25.8954 10 27 10Z" fill="white" fill-opacity="0.5"/%3E%3C/g%3E%3Cpath d="M27.5 30V25V20H32.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M8.75 30V25V20H13.75" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M17.5 30L23.75 20" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M23.75 30L17.5 20" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M27.5 25H31.25" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M8.75 25H12.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M27.5 30H32.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M8.75 30H13.75" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_i" x="5" y="0" width="30" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3CfeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/%3E%3CfeBlend mode="normal" in2="shape" result="effect1_innerShadow"/%3E%3C/filter%3E%3Cfilter id="filter1_d" x="23" y="-1" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dy="1"/%3E%3CfeGaussianBlur stdDeviation="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/%3E%3CfeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/%3E%3C/filter%3E%3CclipPath id="clip0"%3E%3Crect width="40" height="40" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A');
    }

    .e-fe-msi {
      background-image: url('data:image/svg+xml,%3Csvg width="auto" height="auto" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0)"%3E%3Cg filter="url(%23filter0_i)"%3E%3Cpath d="M9 40H31C33.2091 40 35 38.2091 35 36V10L25 0H9C6.79086 0 5 1.79086 5 4V36C5 38.2091 6.79086 40 9 40Z" fill="%232ACBB7"/%3E%3C/g%3E%3Cg filter="url(%23filter1_d)"%3E%3Cpath d="M27 10H35L25 0V8C25 9.10457 25.8954 10 27 10Z" fill="white" fill-opacity="0.5"/%3E%3C/g%3E%3Cpath d="M31.25 31.25V25.625V20" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M17.5 31.25V25.625V20" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M8.75 31.25V25.625V20" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M21.25 31.25H25.5C26.6046 31.25 27.5 30.3546 27.5 29.25V27.625C27.5 26.5204 26.6046 25.625 25.5 25.625H23.25C22.1454 25.625 21.25 24.7296 21.25 23.625V22C21.25 20.8954 22.1454 20 23.25 20H27.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M17.5 20L13.125 25.625L8.75 20" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_i" x="5" y="0" width="30" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3CfeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/%3E%3CfeBlend mode="normal" in2="shape" result="effect1_innerShadow"/%3E%3C/filter%3E%3Cfilter id="filter1_d" x="23" y="-1" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dy="1"/%3E%3CfeGaussianBlur stdDeviation="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/%3E%3CfeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/%3E%3C/filter%3E%3CclipPath id="clip0"%3E%3Crect width="40" height="40" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A');
    }

    .e-fe-unknown {
      background-image: url('data:image/svg+xml,%3Csvg width="auto" height="auto" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0)"%3E%3Cg filter="url(%23filter0_i)"%3E%3Cpath d="M9 40H31C33.2091 40 35 38.2091 35 36V10L25 0H9C6.79086 0 5 1.79086 5 4V36C5 38.2091 6.79086 40 9 40Z" fill="%23DD6BBA"/%3E%3C/g%3E%3Cg filter="url(%23filter1_d)"%3E%3Cpath d="M27 10H35L25 0V8C25 9.10457 25.8954 10 27 10Z" fill="white" fill-opacity="0.5"/%3E%3C/g%3E%3Cpath d="M20.625 20.2074V24.374M20.625 28.5407H20.6354M30 24.374C30 29.5517 25.8027 33.749 20.625 33.749C15.4473 33.749 11.25 29.5517 11.25 24.374C11.25 19.1964 15.4473 14.999 20.625 14.999C25.8027 14.999 30 19.1964 30 24.374Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_i" x="5" y="0" width="30" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3CfeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/%3E%3CfeBlend mode="normal" in2="shape" result="effect1_innerShadow"/%3E%3C/filter%3E%3Cfilter id="filter1_d" x="23" y="-1" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dy="1"/%3E%3CfeGaussianBlur stdDeviation="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/%3E%3CfeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/%3E%3C/filter%3E%3CclipPath id="clip0"%3E%3Crect width="40" height="40" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A');
    }

    .e-fe-rtf {
      background-image: url('data:image/svg+xml,%3Csvg width="auto" height="auto" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0)"%3E%3Cg filter="url(%23filter0_i)"%3E%3Cpath d="M9 40H31C33.2091 40 35 38.2091 35 36V10L25 0H9C6.79086 0 5 1.79086 5 4V36C5 38.2091 6.79086 40 9 40Z" fill="%235FDBF7"/%3E%3C/g%3E%3Cg filter="url(%23filter1_d)"%3E%3Cpath d="M27 10H35L25 0V8C25 9.10457 25.8954 10 27 10Z" fill="white" fill-opacity="0.5"/%3E%3C/g%3E%3Cpath d="M26.25 27.5V22.5V17.5H32.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M20 27.5V22.5V17.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M26.25 22.5H31.25" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M16.25 17.5H23.75" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M8.75 27.5V22.5M8.75 22.5V17.5H11.75C12.8546 17.5 13.75 18.3954 13.75 19.5V20.5C13.75 21.6046 12.8546 22.5 11.75 22.5H8.75Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M9.47102 22.568L13.7497 27.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_i" x="5" y="0" width="30" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3CfeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/%3E%3CfeBlend mode="normal" in2="shape" result="effect1_innerShadow"/%3E%3C/filter%3E%3Cfilter id="filter1_d" x="23" y="-1" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dy="1"/%3E%3CfeGaussianBlur stdDeviation="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/%3E%3CfeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/%3E%3C/filter%3E%3CclipPath id="clip0"%3E%3Crect width="40" height="40" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A');
    }

    .e-fe-xml {
      background-image: url('data:image/svg+xml,%3Csvg width="auto" height="auto" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0)"%3E%3Cg filter="url(%23filter0_i)"%3E%3Cpath d="M9 40H31C33.2091 40 35 38.2091 35 36V10L25 0H9C6.79086 0 5 1.79086 5 4V36C5 38.2091 6.79086 40 9 40Z" fill="%23A0DA40"/%3E%3C/g%3E%3Cg filter="url(%23filter1_d)"%3E%3Cpath d="M27 10H35L25 0V8C25 9.10457 25.8954 10 27 10Z" fill="white" fill-opacity="0.5"/%3E%3C/g%3E%3Cpath d="M28.75 17.501V22.501V27.501H33.75" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M7.5 27.5L13.75 17.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M13.75 27.5L7.5 17.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M16.25 27.5V23.125V17.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M25 27.5V23.125V17.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M25 17.5L20.625 23.125L16.25 17.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_i" x="5" y="0" width="30" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3CfeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/%3E%3CfeBlend mode="normal" in2="shape" result="effect1_innerShadow"/%3E%3C/filter%3E%3Cfilter id="filter1_d" x="23" y="-1" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dy="1"/%3E%3CfeGaussianBlur stdDeviation="1"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/%3E%3CfeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/%3E%3C/filter%3E%3CclipPath id="clip0"%3E%3Crect width="40" height="40" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A');
    }

    .e-fe-folder {
      background-image: url('data:image/svg+xml,%3Csvg width="auto" height="auto" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0.269631 16.0936C0.126239 14.9028 1.05591 13.8545 2.25529 13.8545H37.7447C38.9441 13.8545 39.8738 14.9028 39.7304 16.0936L37.7574 32.4777C37.5154 34.4873 35.8103 35.9994 33.7861 35.9994H6.21389C4.18972 35.9994 2.48458 34.4873 2.24258 32.4777L0.269631 16.0936Z" fill="%23FDDD35"/%3E%3Cpath d="M2.5 8V14.1587H37.5V11.9798C37.5 10.8753 36.6046 9.97984 35.5 9.97984H21.4809C21.0683 9.97984 20.6657 9.85221 20.3285 9.61445L15.7199 6.36538C15.3826 6.12763 14.9801 6 14.5675 6H4.5C3.39543 6 2.5 6.89543 2.5 8Z" fill="%23FAC800"/%3E%3C/svg%3E%0A');
    }

    .e-fe-locked {

      & > .e-text-content,
      & > .e-fe-grid-icon {

        .e-fe-folder {
          background-image: url('data:image/svg+xml,%3Csvg width="auto" height="auto" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0.272644 16.3177C0.127709 15.1261 1.05767 14.0762 2.25801 14.0762H37.742C38.9423 14.0762 39.8723 15.1261 39.7274 16.3177L37.7611 32.4827C37.5169 34.4902 35.8127 35.9997 33.7904 35.9997H6.20961C4.18727 35.9997 2.48306 34.4902 2.23887 32.4826L0.272644 16.3177Z" fill="%23FDDD35"/%3E%3Cpath d="M2.5 8V14.0771H37.5V11.94C37.5 10.8355 36.6046 9.94004 35.5 9.94004H21.4757C21.0663 9.94004 20.6668 9.8144 20.331 9.58008L15.7173 6.35996C15.3816 6.12564 14.9821 6 14.5727 6H4.5C3.39543 6 2.5 6.89543 2.5 8Z" fill="%23FAC800"/%3E%3Cpath d="M23.125 23.693V24.193H23.625V23.693H23.125ZM16.875 23.693H16.375V24.193H16.875V23.693ZM20.5 26.77C20.5 26.4939 20.2761 26.27 20 26.27C19.7239 26.27 19.5 26.4939 19.5 26.77H20.5ZM19.5 28.3085C19.5 28.5846 19.7239 28.8085 20 28.8085C20.2761 28.8085 20.5 28.5846 20.5 28.3085H19.5ZM15.3125 24.193H24.6875V23.193H15.3125V24.193ZM25.75 25.2315V29.847H26.75V25.2315H25.75ZM24.6875 30.8855H15.3125V31.8855H24.6875V30.8855ZM14.25 29.847V25.2315H13.25V29.847H14.25ZM15.3125 30.8855C14.7184 30.8855 14.25 30.4133 14.25 29.847H13.25C13.25 30.9801 14.1807 31.8855 15.3125 31.8855V30.8855ZM25.75 29.847C25.75 30.4133 25.2816 30.8855 24.6875 30.8855V31.8855C25.8193 31.8855 26.75 30.9801 26.75 29.847H25.75ZM24.6875 24.193C25.2816 24.193 25.75 24.6652 25.75 25.2315H26.75C26.75 24.0984 25.8193 23.193 24.6875 23.193V24.193ZM15.3125 23.193C14.1807 23.193 13.25 24.0984 13.25 25.2315H14.25C14.25 24.6652 14.7184 24.193 15.3125 24.193V23.193ZM22.625 20.616V23.693H23.625V20.616H22.625ZM23.125 23.193H16.875V24.193H23.125V23.193ZM17.375 23.693V20.616H16.375V23.693H17.375ZM20 18.0391C21.4571 18.0391 22.625 19.2001 22.625 20.616H23.625C23.625 18.6333 21.9947 17.0391 20 17.0391V18.0391ZM20 17.0391C18.0053 17.0391 16.375 18.6333 16.375 20.616H17.375C17.375 19.2001 18.5429 18.0391 20 18.0391V17.0391ZM19.5 26.77V28.3085H20.5V26.77H19.5Z" fill="%23998100"/%3E%3C/svg%3E%0A');
        }
      }
    }

    .e-address {

      .e-address-list-item {

        .e-icons::before {
          content: '\e748';
        }
      }
    }
  }

  .e-filemanager,
  .e-fe-popup {

    .e-fe-open::before {
      content: '\e760';
    }

    .e-fe-cut::before {
      content: '\e7fb';
    }

    .e-fe-copy::before {
      content: '\e77c';
    }

    .e-fe-paste::before {
      content: '\e70b';
    }

    .e-fe-delete::before {
      content: '\e820';
    }

    .e-fe-rename::before {
      content: '\e76d';
    }

    .e-fe-newfolder::before {
      content: '\e805';
    }

    .e-fe-refresh::before {
      content: '\e772';
    }

    .e-fe-upload::before {
      content: '\e712';
    }

    .e-fe-download::before {
      content: '\e7a1';
    }

    .e-fe-grid::before {
      content: '\e77e';
    }

    .e-fe-large::before {
      content: '\e82d';
    }

    .e-fe-select::before {
      content: '\e78e';
    }

    .e-fe-details::before {
      content: '\e800';
    }

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

    .e-fe-search::before {
      content: '\e754';
    }

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

    .e-fe-breadcrumb::before {
      content: '\e71c';
    }

    .e-fe-drop-in::before {
      content: '\e768';
    }

    .e-fe-drop-out::before {
      content: '\e736';
    }

    .e-fe-no-drop::before {
      content: '\e839';
    }

    .e-toolbar .e-hor-nav {

      .e-popup-up-icon::before {
        content: '\e770';
      }

      .e-popup-down-icon::before {
        content: '\e770';
      }
    }

    &.e-fe-m-filter {

      .e-fe-search::before {
        content: '\e773';
      }
    }
  }

  .e-fe-popup {

    .e-fe-dot::before {
      content: '\e774';
    }

    .e-fe-tick::before {
      content: '\e774';
    }
  }
}

// color
$treegrid-right-arrow-icon-color: $icon-color !default;
$treegrid-right-arrow-hover-color: $icon-color-hover !default;
$childborder-color: $primary !default;
$error-elem-color: $danger !default;

// Layout

$error-elem-content: '\e839' !default;
$treegrid-right-arrow-icon-font-size: $text-lg !default;
$treegrid-right-arrow-icon-padding: 0 !default;
$treegrid-right-arrow-icon-vertical-align: unset;
$treegrid-right-arrow-icon-height: 18px !default;
$treegrid-right-arrow-icon-width: 16px !default;
$treegrid-bigger-icon-size: 22px !default;
$treegrid-smaller-icon-size: 16px !default;
$treegrid-bigger-icon-font-size: $font-icon-22 !default;
$treegrid-frame-bigger-icon-height: 18px !default;
$treegrid-frame-bigger-icon-width: 18px !default;
$treegrid-frame-icon-height: 16px !default;
$treegrid-frame-icon-width: 16px !default;
$treegrid-content-right-padding: 21px !default;
$treegrid-rowdrag-childborder-border: 2px solid #4f46e5;
$treegrid-rowdd-topbottom-border: 2px solid #4f46e5 !default;
$treegrid-rowdd-boxshadow: $primary !default;
$treegrid-rowdd-childborder-width: 2px 0 0 !default;
$treegrid-lastrowdd-childborder-width: 2px 0 !default;
$treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;

@include export-module('tree-layout') {
  .e-bigger {
    .e-treegrid {
      .e-treegridexpand,
      .e-treegridcollapse {
        font-size: $treegrid-bigger-icon-font-size;
        height: $treegrid-bigger-icon-size;
        width: $treegrid-bigger-icon-size;
      }

      .e-hierarchycheckbox {
        padding-left: 2px;
      }

      .e-hierarchycheckbox .e-frame {
        height: $treegrid-frame-bigger-icon-height;
        width: $treegrid-frame-bigger-icon-width;
      }

      .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-row[aria-expanded = 'true'] .e-treecell {
        @if $skin-name == 'FluentUI' or $theme-name == 'fluentui-dark' {
          font-size: 16px;
          font-weight: bold;
        }
      }
    }
  }

  .e-treegrid {

    .e-icons.e-none::before {
      content: '';
    }

    .e-gridheader {

      .e-headercell .e-css.e-hierarchycheckbox {
        height: 20px;
        @if $skin-name == 'FluentUI' or $theme-name == 'fluentui-dark' {
          padding-top: 0;
        }
        vertical-align: middle;
      }
    }

    .e-treegridexpand::before,
    .e-treegridcollapse::before {
      text-align: center;
      vertical-align: $treegrid-right-arrow-icon-vertical-align;
    }

    .e-rowcell:not(.e-gridclip) {
      .e-treecolumn-container {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;

        span.e-treecell {
          display: inline;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .e-treegridexpand:hover::before,
    .e-treegridcollapse:hover::before {
      color: $treegrid-right-arrow-hover-color;
    }

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

      :not(.e-treecheckbox) {
        white-space: nowrap;
      }
    }

    .e-treecheckbox {
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
    }

    .e-treecolumn-container {
      span {
        display: inline-block;
        vertical-align: middle;
      }
    }

    .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: 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' {
        line-height: 19px;
      }
      @else {
        line-height: normal;
      }
    }

    .e-grid {
      &.e-wrap .e-rowcell .e-treecolumn-container {
        white-space: nowrap;
      }

      &.e-wrap .e-rowcell .e-treecolumn-container .e-treecell {
        display: inline-block;
        white-space: normal;
        word-wrap: break-word;
      }

      &.e-wrap .e-rowcell .e-treecheckbox-container {
        white-space: nowrap;
      }

      &.e-wrap .e-rowcell .e-treecheckbox-container .e-treecheckbox {
        display: inline-block;
        white-space: normal;
        word-wrap: break-word;
      }
    }

    #{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-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,
    .e-filterbarcell.e-mastercell {
      display: none;
    }

    .e-icons.e-errorelem {
      display: inline-block;
      padding-left: 10px;
      vertical-align: middle;
    }

    .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;
        box-shadow: 0 1px 0 0 $childborder-color;
        position: relative;
        z-index: 1;
      }

      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;
        box-shadow: 0 1px 0 0 $childborder-color;
        position: relative;
        z-index: 1;
      }

      td.e-rowcell.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:last-child {
        border-right: $treegrid-rowdrag-childborder-border;
      }

      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 {
        box-shadow: 0 1px 0 0 $childborder-color;
        position: relative;
        z-index: 1;
      }

      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 {
      height: 0;
    }

    .e-droptop .e-lastrow-dragborder {
      height: 0;
    }

    .e-treegrid-relative {
      position: relative;
    }

    .e-gridheader .e-firstrow-dragborder tr:first-child.e-dropbottom {
      height: 0;
    }

    .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-grid .e-gridcontent {
      tr.e-row:first-child {
        td.e-rowcell.e-childborder,
        td.e-rowdragdrop.e-childborder {
          border-bottom: $treegrid-rowdrag-childborder-border;
          border-top: $treegrid-rowdrag-childborder-border;
          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
        }

        td.e-rowcell.e-droptop,
        td.e-rowdragdrop.e-droptop {
          border-top: $treegrid-rowdd-topbottom-border;
        }
      }

      td.e-rowcell {
        &.e-childborder {
          border-bottom: $treegrid-rowdrag-childborder-border;
          border-top: $treegrid-rowdrag-childborder-border;
          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
        }
      }

      td.e-rowdragdrop {
        &.e-childborder {
          border-bottom: $treegrid-rowdrag-childborder-border;
          border-top: $treegrid-rowdrag-childborder-border;
          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
        }
      }

      td.e-rowcell {
        &.e-dropbottom {
          border-bottom: $treegrid-rowdd-topbottom-border;
          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
        }
      }

      td.e-rowdragdrop {
        &.e-dropbottom {
          border-bottom: $treegrid-rowdd-topbottom-border;
          box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
        }
      }
    }

    .e-grid.e-rtl {
      .e-gridheader .e-firstrow-dragborder {
        height: 0;
      }

      .e-gridcontent {
        td.e-childborder {
          border-color: $childborder-color;
          border-width: $treegrid-rtl-rowdd-childborder-width;
          position: relative;
          z-index: 1;
        }

        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;
          box-shadow: 0 1px 0 0 $childborder-color;
          position: relative;
          z-index: 1;
        }

        td.e-rowcell.e-childborder:last-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-lastrowcell.e-childborder:first-child {
          border-left: $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-droptop .e-lastrow-dragborder {
          height: 0;
        }
      }
    }
  }
}


/* stylelint-disable-line no-empty-source */


@include export-module('treegrid-bootstrap5-icons') {
  #{&}.e-treegrid,
  .e-grid-menu {
    .e-indent::before {
      content: '\e810';
    }

    .e-outdent::before {
      content: '\e72a';
    }
  }

  .e-treegrid {
    .e-treegridexpand::before,
    .e-treegridcollapse::before {
      content: '\e75c';
    }

    .e-toolbar-item {
      .e-expand::before {
        content: '\e7c9';
      }

      .e-collapse::before {
        content: '\e80f';
      }

      .e-indent::before {
        content: '\e810';
      }

      .e-outdent::before {
        content: '\e72a';
      }
    }
  }
}

//layout variables
$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: $text-base !default;
$btn-grp-icon-font-size-bigger: $text-xl !default;

//Normal Outline GroupButton
$btn-grp-outline-focus-border-color: $secondary-border-color !default;
$btn-grp-outline-focus-color: inherit !default;

//Outline Primary
$btn-grp-outline-primary-focus-border-color: $primary !default;
$btn-grp-outline-focus-primary-color: inherit !default;

//Outline Success
$btn-grp-outline-success-focus-border-color: $btn-success-focus-border-color !default;
$btn-grp-outline-focus-success-color: inherit !default;

//Outline Info
$btn-grp-outline-info-focus-border-color: $btn-info-focus-border-color !default;
$btn-grp-outline-focus-info-color: inherit !default;

//Outline warning
$btn-grp-outline-warning-focus-border-color: $btn-warning-focus-border-color !default;
$btn-grp-outline-focus-warning-color: inherit !default;

//Outline danger
$btn-grp-outline-danger-focus-border-color: $btn-danger-focus-border-color !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;
}


@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 == 'bootstrap5' {
        z-index: 2;
      }
    }

    input + label.e-btn {
      margin-bottom: 0;
    }

    input {
      -moz-appearance: none;
      height: 1px;
      margin: 0 0 0 $btn-grp-margin;
      opacity: 0;
      position: absolute;
      width: 1px;
    }

    // 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' {
          margin-left: $btn-grp-margin-left;
        }

        &:not(:first-of-type):not(:last-of-type) {
          border-radius: 0;
        }

        &:first-of-type {
          border-bottom-right-radius: 0;
          border-top-right-radius: 0;
        }

        &:last-of-type {
          border-bottom-left-radius: 0;
          border-top-left-radius: 0;
        }

        &:last-of-type:not(:last-child) {
          border-bottom-right-radius: 0;
          border-top-right-radius: 0;
        }
      }

      .e-split-btn-wrapper {
        +.e-btn {
          border-bottom-left-radius: 0;
          border-top-left-radius: 0;
        }

        &:not(:first-child):not(:last-child) {
          .e-btn:last-child {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
          }

          .e-btn:first-child {
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
          }
        }

        &:first-child {
          .e-btn:last-child {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
          }
        }

        &:last-child {
          .e-btn:first-child {
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
          }
        }
      }
    }

    // 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: 0;
        }

        &:first-of-type {
          border-bottom-left-radius: 0;
          border-top-left-radius: 0;
        }

        &:last-of-type {
          border-bottom-right-radius: 0;
          border-top-right-radius: 0;
        }

        &:last-of-type:not(:last-child) {
          border-bottom-left-radius: 0;
          border-top-left-radius: 0;
        }
      }

      .e-split-btn-wrapper {
        +.e-btn {
          border-bottom-right-radius: 0;
          border-top-right-radius: 0;
        }

        &:not(:first-child):not(:last-child) {
          .e-btn:last-child {
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
          }

          .e-btn:first-child {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
          }
        }

        &:first-child {
          .e-btn:last-child {
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
          }
        }

        &:last-child {
          .e-btn:first-child {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
          }
        }
      }
    }

    // Vertical Orientation
    &.e-vertical {
      -webkit-flex-direction: column;
      flex-direction: column;

      input {
        margin: $btn-grp-margin 0 0;
      }

      // Round corner
      .e-btn {
        &:not(.e-outline) {
          margin-top: $btn-grp-margin;
        }

        &:not(:first-of-type):not(:last-of-type) {
          border-radius: 0;
        }

        &:first-of-type {
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
          border-top-left-radius: 2px;
          border-top-right-radius: 2px;
        }

        &:last-of-type {
          border-bottom-left-radius: 2px;
          border-bottom-right-radius: 2px;
          border-top-left-radius: 0;
          border-top-right-radius: 0;
        }
      }
    }

    // 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: 0;
            border-top-right-radius: 0;
          }
        }

        .e-split-btn-wrapper {
          +.e-btn {
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
          }

          &: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: 0;
              border-top-right-radius: 0;
            }
          }

          &:last-child {
             .e-btn:first-child {
              border-bottom-left-radius: 0;
              border-top-left-radius: 0;
            }

            .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: 0;
            border-top-left-radius: 0;
          }

          &:first-of-type:not(:first-child) {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
          }
        }
      }
    }
  }

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




@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 == 'bootstrap4' 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;
          }
        }
    }
  }

    //Focus state for Normal and Outline GroupButton
    .e-btn:focus,
    input:focus+label.e-btn {
      @include button-focus;
      @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
        box-shadow: none;
      }
      @if $skin-name == 'bootstrap5' {
        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;
      }

      &.e-primary {
        @include primary-focus;
        @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
          box-shadow: none;
        }
        @if $skin-name == 'bootstrap5' {
          border-color: $btn-primary-focus-bgcolor;
        }
        outline-color: $btn-grp-outline-focus-primary-color;
        @if $skin-name == 'fabric' {
          border-color: transparent;
        }
      }

      &.e-success {
        @include success-focus;
        @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
          box-shadow: none;
        }
        @if $skin-name == 'bootstrap5' {
          border-color: $btn-success-focus-bgcolor;
        }
        outline-color: $btn-grp-outline-focus-success-color;
        @if $skin-name == 'fabric' {
          border-color: transparent;
        }
      }

      &.e-info {
        @include info-focus;
        @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
          box-shadow: none;
        }
        @if $skin-name == 'bootstrap5' {
          border-color: $btn-info-focus-bgcolor;
        }
        outline-color: $btn-grp-outline-focus-info-color;
        @if $skin-name == 'fabric' {
          border-color: transparent;
        }
      }

      &.e-warning {
        @include warning-focus;
        @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
          box-shadow: none;
        }
        @if $skin-name == 'bootstrap5' {
          border-color: $btn-warning-focus-bgcolor;
        }
        outline-color: $btn-grp-outline-focus-warning-color;
        @if $skin-name == 'fabric' {
          border-color: transparent;
        }
      }

      &.e-danger {
        @include danger-focus;
        @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
          box-shadow: none;
        }
        @if $skin-name == 'bootstrap5' {
          border-color: $btn-danger-focus-bgcolor;
        }
        outline-color: $btn-grp-outline-focus-danger-color;
        @if $skin-name == 'fabric' {
          border-color: transparent;
        }
      }

      &.e-link {
        @include link-focus;
        background-color: transparent;
        border-color: transparent;
        box-shadow: none;
        outline: none;
      }

      &.e-outline {
        @include outline-focus;
        @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
          box-shadow: none;
        }
        @if $skin-name == 'bootstrap5' {
          border-color: $btn-outline-focus-bgcolor;
        }

        &.e-primary {
          @include outline-primary-focus;
          @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
            box-shadow: none;
          }
          @if $skin-name == 'bootstrap5' {
            border-color: $btn-outline-primary-focus-bgcolor;
          }
        }

        &.e-success {
          @include outline-success-focus;
          @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
            box-shadow: none;
          }
          @if $skin-name == 'bootstrap5' {
            border-color: $btn-success-focus-bgcolor;
          }
        }

        &.e-info {
          @include outline-info-focus;
          @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
            box-shadow: none;
          }
          @if $skin-name == 'bootstrap5' {
            border-color: $btn-info-hover-bgcolor;
          }
        }

        &.e-warning {
          @include outline-warning-focus;
          @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
            box-shadow: none;
          }
          @if $skin-name == 'bootstrap5' {
            border-color: $btn-warning-hover-bgcolor;
          }
        }

        &.e-danger {
          @include outline-danger-focus;
          @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
            box-shadow: none;
          }
          @if $skin-name == 'bootstrap5' {
            border-color: $btn-danger-hover-bgcolor;
          }
        }
      }
    }

    //Active/Checked state for Normal and Outline GroupButton
    .e-btn:active,
    input:active+label.e-btn,
    input:checked+label.e-btn {
      @include button-active;
      @if $skin-name == 'Material3' {
        box-shadow: none;
      }

      &.e-primary {
        @include primary-active;
        @if $skin-name == 'Material3' {
          box-shadow: none;
        }
      }

      &.e-success {
        @include success-active;
        @if $skin-name == 'Material3' {
          box-shadow: none;
        }
      }

      &.e-info {
        @include info-active;
        @if $skin-name == 'Material3' {
          box-shadow: none;
        }
      }

      &.e-warning {
        @include warning-active;
        @if $skin-name == 'Material3' {
          box-shadow: none;
        }
      }

      &.e-danger {
        @include danger-active;
        @if $skin-name == 'Material3' {
          box-shadow: none;
        }
      }

      &.e-outline {
        @include outline-active;
        @if $skin-name == 'Material3' {
          box-shadow: none;
        }

        &.e-primary {
          @include outline-primary-active;
          @if $skin-name == 'Material3' {
            box-shadow: none;
          }
        }

        &.e-success {
          @include outline-success-active;
          @if $skin-name == 'Material3' {
            box-shadow: none;
          }
        }

        &.e-info {
          @include outline-info-active;
          @if $skin-name == 'Material3' {
            box-shadow: none;
          }
        }

        &.e-warning {
          @include outline-warning-active;
          @if $skin-name == 'Material3' {
            box-shadow: none;
          }
        }

        &.e-danger {
          @include outline-danger-active;
          @if $skin-name == 'Material3' {
            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' {
          border-color: $btn-primary-border-color;
        }
      }

      &.e-success {
        @include success-disabled;
        @if $skin-name != 'bootstrap4' {
          border-color: $btn-success-border-color;
        }
      }

      &.e-info {
        @include info-disabled;
        @if $skin-name != 'bootstrap4' {
          border-color: $btn-info-border-color;
        }
      }

      &.e-warning {
        @include warning-disabled;
        @if $skin-name != 'bootstrap4' {
          border-color: $btn-warning-border-color;
        }
      }

      &.e-danger {
        @include danger-disabled;
        @if $skin-name != 'bootstrap4' {
          border-color: $btn-danger-border-color;
        }
      }

      &.e-link {
        @include link-disabled;
        @if $skin-name != 'bootstrap4' {
          border-color: $btn-link-border-color;
        }
      }

      &.e-outline {
        @include outline-disabled;
        border-color: $btn-outline-border-color;

        &.e-primary {
          @include outline-primary-disabled;
          border-color: $btn-primary-bgcolor;
        }

        &.e-success {
          @include outline-success-disabled;
          border-color: $btn-success-bgcolor;
        }

        &.e-info {
          @include outline-info-disabled;
          border-color: $btn-info-bgcolor;
        }

        &.e-warning {
          @include outline-warning-disabled;
          border-color: $btn-warning-bgcolor;
        }

        &.e-danger {
          @include outline-danger-disabled;
          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;
          }
        }
      }
    }
  }
}

//layout variables
$progress-btn-circle-opacity: .3 !default;
$progress-btn-transition: all .3s linear !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-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-color: $secondary-text-color !default;
$progress-btn-bgcolor: rgba($icon-color, .2) !default;
$progress-btn-bgcolor-normal: rgba($white, .2) !default;
$progress-btn-warning-progress-color: $progress-btn-bgcolor !default;
$progress-btn-flat-primary-progress-color: rgba($primary-text-color, 1) !default;
$progress-btn-flat-success-progress-color: rgba($success-text, 1) !default;
$progress-btn-flat-info-progress-color: rgba($info-text, 1) !default;
$progress-btn-flat-warning-progress-color: rgba($warning-text, 1) !default;
$progress-btn-flat-danger-progress-color: rgba($danger-text, 1) !default;
$btn-flat-primary-path-arc: $white;

@include export-module('progress-button-layout') {

  /*! Progress Button Layout */
  .e-progress-btn {
    position: relative;

    .e-progress {
      height: 100%;
      left: 0;
      opacity: 0;
      position: absolute;
      top: 0;
      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: 0;
        height: 0%;
        top: auto;
        width: 100%;
      }
    }

    &.e-progress-top {
      .e-progress {
        height: 10%;
      }
    }

    &.e-progress-bottom {
      .e-progress {
        bottom: -1px;
        height: 10%;
        top: auto;
      }
    }

    &.e-progress-active {
      overflow: hidden;
      pointer-events: none;

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

      &.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: -1px;
          }
        }

        &.e-rtl {
          .e-spinner {
            padding-left: $progress-btn-spinner-padding;
            padding-right: 0;
          }
        }
      }

      &.e-spin-right:not(.e-round) {
        .e-spinner {
          padding-left: $progress-btn-spinner-padding;

          .e-spinner-inner {
            top: -1px;
          }
        }

        &.e-rtl {
          .e-spinner {
            padding-left: 0;
            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: 0;
            }
          }
        }

        &.e-spin-right:not(.e-round) {
          .e-spinner {
            padding-left: $progress-btn-spinner-padding-small;
          }

          &.e-rtl {
            .e-spinner {
              padding-left: 0;
              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: 5em;
      outline: none;
      overflow: hidden;
    }

    &.e-rtl {
      .e-progress {
        left: auto;
        right: 0;
      }

      &.e-vertical {
        .e-progress {
          bottom: auto;
          top: 0;
        }
      }
    }

    .e-spinner-pane {
      height: auto;
      position: relative;
      width: auto;

      .e-spinner-inner {
        left: auto;
        position: relative;
        top: auto;
        transform: none;
      }
    }

    .e-cont-animate {
      align-items: center;
      display: inline-flex;
      height: 100%;
      justify-content: center;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }

    @keyframes ProgressSlideLeft {
      from {
        left: 0%;
        opacity: 1;
      }

      to {
        left: -100%;
        opacity: 0;
      }
    }

    @keyframes ProgressSlideRight {
      from {
        left: 0%;
        opacity: 1;
      }

      to {
        left: 100%;
        opacity: 0;
      }
    }

    @keyframes ProgressSlideUp {
      from {
        height: auto;
        opacity: 1;
        top: 0;
      }

      to {
        height: auto;
        opacity: 0;
        top: -100px;
      }
    }

    @keyframes ProgressSlideDown {
      from {
        height: auto;
        opacity: 1;
        top: 0;
      }

      to {
        height: auto;
        opacity: 0;
        top: 100px;
      }
    }

    @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);
      }
    }
  }

  #{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: 0;
          }
        }
      }

      &.e-spin-right:not(.e-round) {
        .e-spinner {
          padding-left: $progress-btn-spinner-padding-bigger;
        }

        &.e-rtl {
          .e-spinner {
            padding-left: 0;
            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: 0;
            }
          }
        }

        &.e-spin-right:not(.e-round) {
          .e-spinner {
            padding-left: $progress-btn-spinner-padding-bigger-small;
          }

          &.e-rtl {
            .e-spinner {
              padding-left: 0;
              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;
          }
        }
      }
    }
  }
}


@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' or $skin-name == 'bootstrap5' {
            stroke: fade-out($btn-primary-color, $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' or $skin-name == 'bootstrap5' {
              stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
            }
            @else if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap'{
              stroke: fade-out($btn-flat-primary-color, $progress-btn-circle-opacity);
            }
          }

          .e-path-arc {
            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' 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' or $skin-name == 'bootstrap5' {
              stroke: fade-out($btn-primary-color, $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' or $skin-name == 'bootstrap5' {
            stroke: fade-out($btn-success-color, $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' or $skin-name == 'bootstrap5' {
              stroke: fade-out($btn-flat-primary-path-arc, $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' or $skin-name == 'bootstrap5' {
                stroke: fade-out($btn-flat-success-color, $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' or $skin-name == 'bootstrap5' {
              stroke: fade-out($btn-success-color, $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' or $skin-name == 'bootstrap5' {
            stroke: fade-out($btn-info-color, $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' or $skin-name == 'bootstrap5' {
              stroke: fade-out($btn-flat-primary-path-arc, $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' or $skin-name == 'bootstrap5' {
              stroke: fade-out($btn-flat-info-color, $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' or $skin-name == 'bootstrap5' {
              stroke: fade-out($btn-info-color, $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' or $skin-name == 'bootstrap5' {
            stroke: fade-out($btn-warning-color, $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' or $skin-name == 'bootstrap5' {
              stroke: fade-out($btn-flat-primary-path-arc, $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' or $skin-name == 'bootstrap5' {
              stroke: fade-out($btn-warning-color, $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' or $skin-name == 'bootstrap5' {
            stroke: fade-out($btn-danger-color, $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' or $skin-name == 'bootstrap5' {
              stroke: fade-out($btn-flat-primary-path-arc, $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' or $skin-name == 'bootstrap5' {
              stroke: fade-out($btn-flat-danger-color, $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' or $skin-name == 'bootstrap5' {
              stroke: fade-out($btn-danger-color, $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' or $skin-name == 'bootstrap5' {
              stroke: fade-out($btn-primary-bgcolor, $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' or $skin-name == 'bootstrap5' {
              stroke: fade-out($btn-success-bgcolor, $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' or $skin-name == 'bootstrap5' {
              stroke: fade-out($btn-info-bgcolor, $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' or $skin-name == 'bootstrap5' {
              stroke: fade-out($btn-warning-bgcolor, $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' or $skin-name == 'bootstrap5' {
              stroke: fade-out($btn-danger-bgcolor, $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' or $skin-name == 'bootstrap5' {
            stroke: fade-out($btn-link-color, $progress-btn-circle-opacity);
          }
        }

        .e-path-arc {
          stroke: $btn-link-color;
        }
      }
    }
  }

  .e-progress {
    background: $progress-btn-bgcolor-normal;
  }

  #{if(&, '&', '*')}.e-primary,
  #{if(&, '&', '*')}.e-success,
  #{if(&, '&', '*')}.e-danger,
  #{if(&, '&', '*')}.e-info {
    .e-progress {
      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' or $skin-name == 'bootstrap5' {
          background: fade-out($progress-btn-flat-primary-progress-color, .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' or $skin-name == 'bootstrap5' {
          background: fade-out($progress-btn-flat-success-progress-color, .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' or $skin-name == 'bootstrap5' {
          background: fade-out($progress-btn-flat-info-progress-color, .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' or $skin-name == 'bootstrap5' {
          background: fade-out($progress-btn-flat-warning-progress-color, .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' or $skin-name == 'bootstrap5' {
          background: fade-out($progress-btn-flat-danger-progress-color, .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' or $skin-name == 'bootstrap5' {
          background: fade-out($btn-primary-bgcolor, .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' or $skin-name == 'bootstrap5' {
          background: fade-out($btn-success-bgcolor, .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' or $skin-name == 'bootstrap5' {
          background: fade-out($btn-info-bgcolor, .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' or $skin-name == 'bootstrap5' {
          background: fade-out($btn-warning-bgcolor, .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' or $skin-name == 'bootstrap5' {
          background: fade-out($btn-danger-bgcolor, .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 == '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' or $skin-name == 'bootstrap5' {
            background: fade-out($btn-primary-bgcolor, .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' or $skin-name == 'bootstrap5' {
            background: fade-out($btn-success-bgcolor, .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' or $skin-name == 'bootstrap5' {
            background: fade-out($btn-info-bgcolor, .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' or $skin-name == 'bootstrap5' {
            background: fade-out($btn-warning-bgcolor, .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' or $skin-name == 'bootstrap5' {
            background: fade-out($btn-danger-bgcolor, .8);
          }
        }
      }
    }
  }
}

//Layout Variables Start
$rte-border-size: 1px !default;
$rte-2px-border-size: 2px !default;
$rte-border-type: solid !default;
$rte-list-btn-flex: column !default;
$rte-list-btn-line-height: 30px !default;
$rte-big-list-btn-line-height: 36px !default;
$rte-split-btn-line-height: 20px !default;
$rte-big-split-btn-line-height: 30px !default;
$rte-big-quick-item-btn-width: 32px !default;
$rte-quick-item-btn-width: 32px !default;
$rte-big-quick-item-btn-height: 32px !default;
$rte-quick-item-btn-height: 32px !default;
$rte-big-quick-item-padding: 0 6px !default;
$rte-quick-item-padding: 0 3px !default;
$rte-quick-item-icon-min-width: 24px !default; // Clarify
$rte-big-quick-item-line-height: $leading-normal !default;
$rte-content-padding: 16px !default;
$rte-toolbar-icon-size: $text-base !default;
$rte-toolbar-big-icon-size: $text-lg !default;
$rte-big-quick-drop-btn-line-height: 33px !default;
$rte-quick-drop-btn-line-height: 24px !default;
$rte-big-quick-drop-btn-margin: 4px 0 !default;
$rte-quick-drop-btn-margin: 4px 0 !default;
$rte-big-quick-drop-btn-padding: 0 !default;
$rte-quick-drop-btn-padding: 1px 0 !default;
$rte-big-quick-drop-btn-icon-size: 16px !default;
$rte-quick-drop-btn-icon-size: 14px !default;
$rte-big-quick-drop-btn-caret-icon-size: 10px !default;
$rte-quick-drop-btn-caret-icon-size: 12px !default;
$rte-big-quick-drop-btn-caret-font-size: $text-xs !default;
$rte-quick-drop-btn-caret-font-size: $text-xxs !default;
$rte-big-tb-items-margin-left: 3px !default;
$rte-tb-items-margin-left: 7px !default;
$rte-big-tb-items-padding-left: 3px !default;
$rte-tb-items-padding-left: 7px !default;
$rte-active-tb-item-btn-padding: 0 !default;
$rte-split-btn-bar-size: 0 !default;
$rte-split-btn-active-color-icon-line-height: 30px !default;
$rte-big-split-btn-active-color-icon-line-height: 37px !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-drop-btn-padding-left: 7px !default;
$dropdown-btn-font-size: $text-sm;
$dropdown-btn-big-font-size: $text-base;
$rte-drop-btn-padding-right: 7px !default;
$rte-drop-btn-action-padding-left: 7px !default;
$rte-drop-btn-action-padding-right: 7px !default;
$rte-big-drop-btn-padding-left: 10px !default;
$rte-big-drop-btn-padding-right: 6px !default;
$rte-big-drop-btn-action-padding-left: 10px !default;
$rte-big-drop-btn-action-padding-right: 6px !default;
$rte-colorpicker-parent-padding: 0 !default;
$rte-colorpicker-parent-padding-hover: 0 !default;
$rte-colorpicker-parent-padding-active-hover: 0 !default;
$rte-dropdown-btn-color-content-height: 30px !default;
$rte-big-dropdown-btn-color-content-height: 36px !default;
$rte-font-icon-width: 30px !default;
$rte-font-arrow-width: 18px !default;
$rte-font-arrow-touch-width: 20px !default;
$rte-font-icon-line-height: $leading-none !default;
$rte-placeholder-line-height: $leading-normal !default;
$rte-big-active-tb-item-btn-padding: 0 6px !default;
$rte-table-popup-padding: 10px !default;
$rte-table-popup-border: 0 solid $gray-300 !default;
$rte-insert-dialog-label-padding-top: 12px !default;
$rte-insert-dialog-label-padding-bottom: 12px !default;
$rte-big-quick-tbar-item-min-height: 38px !default;
$rte-big-quick-tbar-item-min-width: 38px !default;
$rte-content-font-size: $text-sm !default;
$rte-dropdown-caret-icon-size: $text-xs !default;
$rte-big-dropdown-caret-icon-size: $text-sm !default;
$font-weight: $font-weight-light !default;
$rte-table-popup-bdr-radius: 6px !default;
$rte-resize-handler-width: 15px;
$rte-resize-handler-height: 15px;
$rte-resize-handler-position: 0;
$rte-big-inline-tmp-min-width: 48px;
$rte-inline-tmp-min-width: 55px;
$rte-big-inline-tmp-size-min-width: 59px;
$rte-inline-tmp-size-min-width: 66px;
$rte-big-inline-tmp-color-min-width: 50px;
$rte-inline-tmp-color-min-width: 55px;
$rte-big-color-list-span-common-padding-left-right: 0;
$rte-default-character-count-opacity: 1;
$rte-droparea-line-height: 10;
$rte-droparea-browsebtn-height: 36px;
$rte-droparea-browsebtn-padding: 0 18px;
$rte-droparea-browsebtn-top: -50px;
$rte-insert-dialog-font-size: 15px;
$rte-big-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-big-table-row-height : 18px;
$rte-big-tablecell-height : 16px;
$rte-big-tablecell-width : 16px;
$rte-toolbar-item-frist-last-child-margin: 0;
$rte-big-toolbar-item-frist-last-child-margin: 0 6px;
$rte-tlbar-expand-active:$msg-color-alt2;
$rte-toolbar-expaned-padding: 0 4px;
$rte-toolbar-expaned-padding-hover: 0 4px;
$rte-inline-dropdown-line-height: 30px !default;
$rte-big-inline-dropdown-line-height: 36px !default;
$rte-formatlists-dropdown-line-height: 1;
$rte-big-formatlists-dropdown-line-height: 1;
$rte-extended-toolbar-items-padding: 0;
$rte-quick-toolbar-item-margin: 0 6px !default;
$rte-big-quick-toolbar-item-margin: 0 6px !default;
$rte-big-quick-toolbar-items-margin : 0 6px !default;
$rte-big-quick-toolbar-item-btn-padding: 0 !default;

//Layout Variables End

//Theme Variables Start
$rte-split-btn-active-border: 0 !default;
$rte-border-color: $border-light !default;
$rte-content-bg: $content-bg-color !default;
$rte-full-screen-bg: $content-bg-color !default;
$rte-content-font-color: $content-text-color !default;
$rte-item-color: $content-text-color !default;
$rte-icons-color: $icon-color !default;
$rte-hover-icons-color: $white !default;
$rte-img-popup-border: 1px solid $border-light !default;
$rte-img-popup-box-shadow: $shadow !default;
$rte-img-popup-color: $border-light !default;
$rte-quick-item-active-bg: $secondary-bg-color-pressed !default;
$rte-quick-item-active-font-color: $secondary-text-color-hover !default;
$rte-quick-item-border: 0 !default;
$rte-quick-item-hover-border-color: $secondary-border-color-hover !default;
$rte-quick-item-active-border-color: $secondary-border-color-pressed !default;
$rte-quick-drop-btn-border-color: $content-bg-color-alt2 !default;
$rte-quick-drop-btn-hover-border-color: $content-bg-color-alt2 !default;
$rte-extended-toolbar-background: $content-bg-color-alt2 !default;
$rte-quick-pop-border: none !default;
$rte-quick-tb-border: 1px solid $border-light !default;
$rte-quick-pop-bg: $content-bg-color-alt2 !default;
$rte-quick-vr-line-color: $border-light !default;
$rte-quick-pop-shadow: none !default;
$rte-quick-pop-item-focus-bg: $secondary-bg-color-pressed !default;
$rte-quick-tb-btn-hover: $secondary-bg-color-hover !default;
$rte-tb-item-active-bg: $secondary-bg-color-pressed !default;
$rte-tb-active-font-color: $white !default;
$rte-tb-item-active-border: 1px solid $secondary-border-color-pressed !default;
$rte-expand-tb-border-bottom: $rte-border-size $rte-border-type $border-light !default;
$rte-color-picker-active-bg: inherit !default;
$rte-drop-btn-active-bg: $secondary-bg-color-pressed !default;
$rte-drop-btn-active-color: $white !default;
$rte-drop-btn-active-border-color: $secondary-border-color-pressed !default;
$rte-split-btn-active-hover-font-color: $white !default;
$rte-split-btn-color: $secondary-bg-color-pressed !default;
$rte-split-btn-active-color: $white !default;
$rte-split-btn-hover-bg: $secondary-bg-color-hover !default;
$rte-split-btn-active-bg: $secondary-bg-color-pressed !default;
$rte-split-btn-span-hover-bg: $content-text-color-alt3 !default;
$rte-split-btn-span-focus-bg: $secondary-bg-color-pressed !default;
$rte-split-btn-span-active-bg: $secondary-bg-color-pressed !default;
$rte-split-btn-bar-bg: $content-bg-color !default;
$rte-split-btn-active-bar-bg: $content-bg-color !default;
$rte-split-btn-bar-size: 0 !default;
$rte-split-btn-active-border: 0 !default;
$rte-split-btn-active-color-icon-line-height: 30px !default;
$rte-big-split-btn-active-color-icon-line-height: 38px !default;

$rte-link-valid-color: $danger !default;
$rte-upload-drag-border-clr: $border-dark !default;
$rte-img-header-clr: $content-text-color !default;
$rte-drop-text-clr: $content-text-color-alt2 !default;
$rte-default-character-count-color: $placeholder-text-color !default;
$rte-warning-character-count-color: $warning !default;
$rte-error-character-count-color: $danger !default;
$rte-img-border: solid 2px $primary !default;
$rte-font-family: $font-family !default;
$rte-content-color: $content-text-color !default;
$rte-content-blockquote-border-left-color: solid 2px $content-text-color !default;
$rte-dropdown-selection-bgcolor: $secondary-bg-color-pressed !default;
$rte-ext-tbar-overlay-icons-color: $icon-color-disabled !default;
$rte-overlay-color: $overlay-bg-color !default;
$rte-dropdown-selection-color: $secondary-text-color-pressed !default;
$rte-anchor-color: $primary !default;
$rte-ext-tbar-overlay-dropdown-color: $content-bg-color-alt4 !default;
$rte-img-resize-back-color: $primary !default;
$rte-img-resize-color: $primary-text-color !default;
$rte-table-header-color: $content-text-color-alt1 !default;
$rte-table-span-bg-color: $content-bg-color !default;
$rte-table-span-border: 1px solid $border-light !default;
$rte-table-span-active-bg-color: $primary-lighter !default;
$rte-table-span-active-border-color: $primary !default;
$rte-table-select-border-color: $primary !default;
$rte-table-popup-bg: $flyout-bg-color !default;
$rte-table-resize-back-color: $flyout-bg-color !default;
$rte-table-popup-color: $border-light !default;
$rte-table-popup-box: $shadow !default;
$rte-table-border-color: $border-light !default;
$rte-table-alternate-color: $content-bg-color-alt1 !default;
$rte-table-header-bg: $content-bg-color-alt1 !default;
$rte-toolbar-hor-nav-border-width: 0 0 0 1px !default;
$rte-border-top-left-radius: 0;
$rte-border-top-right-radius: 0;
$rte-border-bottom-right-radius: 0;
$rte-border-bottom-left-radius: 0;
$rte-big-border-radius: 0;

//Theme Variables End

$rte-tb-hover-font-color: $secondary-text-color-hover;
$transparent: $transparent;
$rte-placeholder-padding: 16px !default;

$rte-img-dlg-max-height: 390px !default;
$rte-img-alt-dlg-max-height: 390px !default;
$rte-img-link-dlg-max-height: 191px !default;
$rte-img-size-dlg-max-height: 256px !default;
$rte-link-dlg-max-height: 353px !default;
$rte-file-browser-dlg-max-height: 557px !default;
$rte-table-dlg-max-height: 252px !default;
$rte-edit-table-dlg-max-height: 320px !default;

$rte-big-img-dlg-max-height: 425px !default;
$rte-big-img-alt-dlg-max-height: 425px !default;
$rte-big-img-link-dlg-max-height: 229px !default;
$rte-big-img-size-dlg-max-height: 309px !default;
$rte-big-link-dlg-max-height: 400px !default;
$rte-big-file-browser-dlg-max-height: 557px !default;
$rte-big-table-dlg-max-height: 299px !default;
$rte-big-edit-table-dlg-max-height: 373px !default;
$toolbar-expand-icon-min-height: 40px !default;
$rte-align-caret-icon-min-width: 24px !default;
$rte-drop-text-width: 300px !default;
$rte-drop-text-height: 185px !default;
$rte-drop-text-mobile-width: 250px !default;
$rte-tbar-default-bg: $content-bg-color-alt1;
$rte-expand-tbar-hover-bg: $secondary-bg-color-hover !default;
$rte-big-insert-dialog-label-padding-top: 12px;
$rte-tbar-icon-size: 16px;
$rte-background-color-icon-fontsize: 16px;
$rte-big-background-color-icon-fontsize: 18px;
$rte-dropdown-btn-color-content-padding: 1px !default;
$rte-big-dropdown-btn-color-content-padding: 3px !default;
$rte-tb-expended-min-height: 40px !default;
$rte-big-tb-expended-min-height: 46px !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: $content-bg-color !default;
$rte-emoji-pop-box-shadow: none;
$rte-emoji-pop-border-radius: 4px;
$rte-emoji-pop-border: 1px solid $white;
$rte-emoji-tbar-btn-bg: transparent;
$rte-emoji-tbar-btn-select-bg : $gray-600;
$rte-emoji-tbar-btn-selected-font-color: $white;
$rte-emoji-tbar-btn-hover: $gray-600;
$rte-emoji-btn-height: 251px;
$rte-emoji-grp-btn-line-height: 1px;
$rte-emoji-headname-font-weight: 400;
$rte-emoji-headname-color: $content-text-color;
$rte-big-emoji-btn-height: 256px;

$rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAzMiAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPG1hc2sgaWQ9InBhdGgtMS1vdXRzaWRlLTFfNDgxXzI0MSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iNCIgeT0iMiIgd2lkdGg9IjkiIGhlaWdodD0iMTgiIGZpbGw9ImJsYWNrIj4KPHJlY3QgZmlsbD0id2hpdGUiIHg9IjQiIHk9IjIiIHdpZHRoPSI5IiBoZWlnaHQ9IjE4Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNS41IDNDNS4yMjM4NiAzIDUgMy4yMjM4NiA1IDMuNUM1IDMuNzc2MTQgNS4yMjM4NiA0IDUuNSA0SDYuNDY0NDdDNi45OTQ5IDQgNy41MDM2MSA0LjIxMDcxIDcuODc4NjggNC41ODU3OUw4IDQuNzA3MTFWNC43MDg2M1Y0LjcxNTM4VjQuNzIyMjJWNC43MjkxOFY0LjczNjI0VjQuNzQzNDFWNC43NTA2OFY0Ljc1ODA2VjQuNzY1NTRWNC43NzMxM1Y0Ljc4MDgyVjQuNzg4NjJWNC43OTY1MlY0LjgwNDUzVjQuODEyNjVWNC44MjA4N1Y0LjgyOTE5VjQuODM3NjJWNC44NDYxNlY0Ljg1NDhWNC44NjM1NFY0Ljg3MjM5VjQuODgxMzVWNC44OTA0MVY0Ljg5OTU3VjQuOTA4ODRWNC45MTgyMVY0LjkyNzY4VjQuOTM3MjdWNC45NDY5NVY0Ljk1Njc0VjQuOTY2NjNWNC45NzY2M1Y0Ljk4NjczVjQuOTk2OTNWNS4wMDcyNFY1LjAxNzY2VjUuMDI4MTdWNS4wMzg3OVY1LjA0OTUyVjUuMDYwMzRWNS4wNzEyN1Y1LjA4MjMxVjUuMDkzNDRWNS4xMDQ2OVY1LjExNjAzVjUuMTI3NDhWNS4xMzkwM1Y1LjE1MDY4VjUuMTYyNDRWNS4xNzQyOVY1LjE4NjI2VjUuMTk4MzJWNS4yMTA0OVY1LjIyMjc2VjUuMjM1MTNWNS4yNDc2MVY1LjI2MDE4VjUuMjcyODZWNS4yODU2NVY1LjI5ODUzVjUuMzExNTJWNS4zMjQ2MVY1LjMzNzhWNS4zNTEwOVY1LjM2NDQ5VjUuMzc3OThWNS4zOTE1OFY1LjQwNTI4VjUuNDE5MDhWNS40MzI5OVY1LjQ0Njk5VjUuNDYxMVY1LjQ3NTMxVjUuNDg5NjJWNS41MDQwM1Y1LjUxODU0VjUuNTMzMTZWNS41NDc4N1Y1LjU2MjY5VjUuNTc3NjFWNS41OTI2MlY1LjYwNzc0VjUuNjIyOTZWNS42MzgyOFY1LjY1MzcxVjUuNjY5MjNWNS42ODQ4NVY1LjcwMDU3VjUuNzE2NFY1LjczMjMyVjUuNzQ4MzVWNS43NjQ0N1Y1Ljc4MDdWNS43OTcwMlY1LjgxMzQ1VjUuODI5OTdWNS44NDY2VjUuODYzMzJWNS44ODAxNVY1Ljg5NzA3VjUuOTE0MVY1LjkzMTIyVjUuOTQ4NDRWNS45NjU3N1Y1Ljk4MzE5VjYuMDAwNzFWNi4wMTgzM1Y2LjAzNjA1VjYuMDUzODdWNi4wNzE3OVY2LjA4OTgxVjYuMTA3OTNWNi4xMjYxNVY2LjE0NDQ2VjYuMTYyODdWNi4xODEzOVY2LjJWNi4yMTg3MVY2LjIzNzUyVjYuMjU2NDNWNi4yNzU0M1Y2LjI5NDU0VjYuMzEzNzRWNi4zMzMwNFY2LjM1MjQ0VjYuMzcxOTRWNi4zOTE1M1Y2LjQxMTIyVjYuNDMxMDJWNi40NTA5MVY2LjQ3MDg5VjYuNDkwOThWNi41MTExNlY2LjUzMTQ0VjYuNTUxODJWNi41NzIyOVY2LjU5Mjg3VjYuNjEzNTRWNi42MzQzMVY2LjY1NTE3VjYuNjc2MTNWNi42OTcxOVY2LjcxODM1VjYuNzM5NlY2Ljc2MDk1VjYuNzgyNFY2LjgwMzk0VjYuODI1NThWNi44NDczMlY2Ljg2OTE2VjYuODkxMDlWNi45MTMxMlY2LjkzNTI0VjYuOTU3NDZWNi45Nzk3OFY3LjAwMjE5VjcuMDI0N1Y3LjA0NzMxVjcuMDcwMDFWNy4wOTI4VjcuMTE1N1Y3LjEzODY5VjcuMTYxNzdWNy4xODQ5NVY3LjIwODIzVjcuMjMxNlY3LjI1NTA3VjcuMjc4NjRWNy4zMDIyOVY3LjMyNjA1VjcuMzQ5OVY3LjM3Mzg0VjcuMzk3ODhWNy40MjIwMlY3LjQ0NjI1VjcuNDcwNThWNy40OTVWNy41MTk1MVY3LjU0NDEyVjcuNTY4ODNWNy41OTM2M1Y3LjYxODUyVjcuNjQzNTFWNy42Njg2VjcuNjkzNzhWNy43MTkwNVY3Ljc0NDQxVjcuNzY5ODhWNy43OTU0M1Y3LjgyMTA4VjcuODQ2ODNWNy44NzI2NlY3Ljg5ODZWNy45MjQ2MlY3Ljk1MDc0VjcuOTc2OTVWOC4wMDMyNlY4LjAyOTY2VjguMDU2MTZWOC4wODI3NFY4LjEwOTQzVjguMTM2MlY4LjE2MzA3VjguMTkwMDNWOC4yMTcwOVY4LjI0NDIzVjguMjcxNDdWOC4yOTg4MVY4LjMyNjI0VjguMzUzNzZWOC4zODEzN1Y4LjQwOTA3VjguNDM2ODdWOC40NjQ3NlY4LjQ5Mjc1VjguNTIwODJWOC41NDg5OVY4LjU3NzI1VjguNjA1NjFWOC42MzQwNVY4LjY2MjU5VjguNjkxMjJWOC43MTk5NFY4Ljc0ODc2VjguNzc3NjZWOC44MDY2NlY4LjgzNTc1VjguODY0OTNWOC44OTQyMVY4LjkyMzU3VjguOTUzMDNWOC45ODI1OFY5LjAxMjIyVjkuMDQxOTVWOS4wNzE3N1Y5LjEwMTY4VjkuMTMxNjlWOS4xNjE3OFY5LjE5MTk3VjkuMjIyMjVWOS4yNTI2MlY5LjI4MzA4VjkuMzEzNjNWOS4zNDQyN1Y5LjM3NTAxVjkuNDA1ODNWOS40MzY3NFY5LjQ2Nzc1VjkuNDk4ODRWOS41MzAwM1Y5LjU2MTNWOS41OTI2N1Y5LjYyNDEzVjkuNjU1NjdWOS42ODczMVY5LjcxOTA0VjkuNzUwODVWOS43ODI3NlY5LjgxNDc2VjkuODQ2ODRWOS44NzkwMlY5LjkxMTI4VjkuOTQzNjRWOS45NzYwOFYxMC4wMDg2VjEwLjA0MTJWMTAuMDc0VjEwLjEwNjhWMTAuMTM5NlYxMC4xNzI2VjEwLjIwNTdWMTAuMjM4OVYxMC4yNzIxVjEwLjMwNTRWMTAuMzM4OVYxMC4zNzI0VjEwLjQwNlYxMC40Mzk3VjEwLjQ3MzVWMTAuNTA3M1YxMC41NDEzVjEwLjU3NTNWMTAuNjA5NVYxMC42NDM3VjEwLjY3OFYxMC43MTI0VjEwLjc0NjlWMTAuNzgxNVYxMC44MTYxVjEwLjg1MDlWMTAuODg1N1YxMC45MjA2VjEwLjk1NTdWMTAuOTkwOFYxMUg3LjVDNy4yMjM4NiAxMSA3IDExLjIyMzkgNyAxMS41QzcgMTEuNzc2MSA3LjIyMzg2IDEyIDcuNSAxMkg4VjEyLjAwODlWMTIuMDQ2NlYxMi4wODQzVjEyLjEyMjFWMTIuMTU5OVYxMi4xOTc5VjEyLjIzNTlWMTIuMjc0MVYxMi4zMTIzVjEyLjM1MDZWMTIuMzg5VjEyLjQyNzRWMTIuNDY2VjEyLjUwNDZWMTIuNTQzNFYxMi41ODIyVjEyLjYyMTFWMTIuNjYwMVYxMi42OTkxVjEyLjczODNWMTIuNzc3NVYxMi44MTY4VjEyLjg1NjNWMTIuODk1N1YxMi45MzUzVjEyLjk3NVYxMy4wMTQ3VjEzLjA1NDVWMTMuMDk0NVYxMy4xMzQ1VjEzLjE3NDVWMTMuMjE0N1YxMy4yNTQ5VjEzLjI5NTNWMTMuMzM1N1YxMy4zNzYyVjEzLjQxNjhWMTMuNDU3NFYxMy40OTgyVjEzLjUzOVYxMy41Nzk5VjEzLjYyMDlWMTMuNjYyVjEzLjcwMzJWMTMuNzQ0NFYxMy43ODU4VjEzLjgyNzJWMTMuODY4N1YxMy45MTAzVjEzLjk1MTlWMTMuOTkzN1YxNC4wMzU1VjE0LjA3NzRWMTQuMTE5NFYxNC4xNjE1VjE0LjIwMzdWMTQuMjQ1OVYxNC4yODgyVjE0LjMzMDZWMTQuMzczMVYxNC40MTU3VjE0LjQ1ODRWMTQuNTAxMVYxNC41NDM5VjE0LjU4NjhWMTQuNjI5OFYxNC42NzI5VjE0LjcxNlYxNC43NTkyVjE0LjgwMjVWMTQuODQ1OVYxNC44ODk0VjE0LjkzM1YxNC45NzY2VjE1LjAyMDNWMTUuMDY0MVYxNS4xMDhWMTUuMTUyVjE1LjE5NlYxNS4yNDAxVjE1LjI4NDNWMTUuMzI4NlYxNS4zNzNWMTUuNDE3NFYxNS40NjE5VjE1LjUwNjVWMTUuNTUxMlYxNS41OTZWMTUuNjQwOFYxNS42ODU4VjE1LjczMDhWMTUuNzc1OVYxNS44MjFWMTUuODY2M1YxNS45MTE2VjE1Ljk1N1YxNi4wMDI1VjE2LjA0ODFWMTYuMDkzN1YxNi4xMzk1VjE2LjE4NTNWMTYuMjMxMlYxNi4yNzcxVjE2LjMyMzJWMTYuMzY5M1YxNi40MTU1VjE2LjQ2MThWMTYuNTA4MlYxNi41NTQ2VjE2LjYwMTFWMTYuNjQ3N1YxNi42OTQ0VjE2Ljc0MTJWMTYuNzg4VjE2LjgzNDlWMTYuODgxOVYxNi45MjlWMTYuOTc2MVYxNy4wMjM0VjE3LjA3MDdWMTcuMTE4MVYxNy4xNjU1VjE3LjIxMzFWMTcuMjYwN1YxNy4yOTI5TDcuODc4NjggMTcuNDE0MkM3LjUwMzYxIDE3Ljc4OTMgNi45OTQ5IDE4IDYuNDY0NDcgMThINS41QzUuMjIzODYgMTggNSAxOC4yMjM5IDUgMTguNUM1IDE4Ljc3NjEgNS4yMjM4NiAxOSA1LjUgMTlINi40NjQ0N0M3LjIyMDM3IDE5IDcuOTQ2ODcgMTguNzE0NyA4LjUgMTguMjAzOEM5LjA1MzE0IDE4LjcxNDcgOS43Nzk2MyAxOSAxMC41MzU1IDE5SDExLjVDMTEuNzc2MSAxOSAxMiAxOC43NzYxIDEyIDE4LjVDMTIgMTguMjIzOSAxMS43NzYxIDE4IDExLjUgMThIMTAuNTM1NUMxMC4wMDUxIDE4IDkuNDk2MzkgMTcuNzg5MyA5LjEyMTMyIDE3LjQxNDJMOSAxNy4yOTI5VjE3LjI2MDdWMTcuMjEzMVYxNy4xNjU1VjE3LjExODFWMTcuMDcwN1YxNy4wMjM0VjE2Ljk3NjFWMTYuOTI5VjE2Ljg4MTlWMTYuODM0OVYxNi43ODhWMTYuNzQxMlYxNi42OTQ0VjE2LjY0NzdWMTYuNjAxMVYxNi41NTQ2VjE2LjUwODJWMTYuNDYxOFYxNi40MTU1VjE2LjM2OTNWMTYuMzIzMlYxNi4yNzcxVjE2LjIzMTJWMTYuMTg1M1YxNi4xMzk1VjE2LjA5MzdWMTYuMDQ4MVYxNi4wMDI1VjE1Ljk1N1YxNS45MTE2VjE1Ljg2NjNWMTUuODIxVjE1Ljc3NTlWMTUuNzMwOFYxNS42ODU4VjE1LjY0MDhWMTUuNTk2VjE1LjU1MTJWMTUuNTA2NVYxNS40NjE5VjE1LjQxNzRWMTUuMzczVjE1LjMyODZWMTUuMjg0M1YxNS4yNDAxVjE1LjE5NlYxNS4xNTJWMTUuMTA4VjE1LjA2NDFWMTUuMDIwM1YxNC45NzY2VjE0LjkzM1YxNC44ODk0VjE0Ljg0NTlWMTQuODAyNVYxNC43NTkyVjE0LjcxNlYxNC42NzI5VjE0LjYyOThWMTQuNTg2OFYxNC41NDM5VjE0LjUwMTFWMTQuNDU4NFYxNC40MTU3VjE0LjM3MzFWMTQuMzMwNlYxNC4yODgyVjE0LjI0NTlWMTQuMjAzN1YxNC4xNjE1VjE0LjExOTRWMTQuMDc3NFYxNC4wMzU1VjEzLjk5MzdWMTMuOTUxOVYxMy45MTAzVjEzLjg2ODdWMTMuODI3MlYxMy43ODU4VjEzLjc0NDRWMTMuNzAzMlYxMy42NjJWMTMuNjIwOVYxMy41Nzk5VjEzLjUzOVYxMy40OTgyVjEzLjQ1NzRWMTMuNDE2OFYxMy4zNzYyVjEzLjMzNTdWMTMuMjk1M1YxMy4yNTQ5VjEzLjIxNDdWMTMuMTc0NVYxMy4xMzQ1VjEzLjA5NDVWMTMuMDU0NVYxMy4wMTQ3VjEyLjk3NVYxMi45MzUzVjEyLjg5NTdWMTIuODU2M1YxMi44MTY4VjEyLjc3NzVWMTIuNzM4M1YxMi42OTkxVjEyLjY2MDFWMTIuNjIxMVYxMi41ODIyVjEyLjU0MzRWMTIuNTA0NlYxMi40NjZWMTIuNDI3NFYxMi4zODlWMTIuMzUwNlYxMi4zMTIzVjEyLjI3NDFWMTIuMjM1OVYxMi4xOTc5VjEyLjE1OTlWMTIuMTIyMVYxMi4wODQzVjEyLjA0NjZWMTIuMDA4OVYxMkg5LjVDOS43NzYxNCAxMiAxMCAxMS43NzYxIDEwIDExLjVDMTAgMTEuMjIzOSA5Ljc3NjE0IDExIDkuNSAxMUg5VjEwLjk5MDhWMTAuOTU1N1YxMC45MjA2VjEwLjg4NTdWMTAuODUwOVYxMC44MTYxVjEwLjc4MTVWMTAuNzQ2OVYxMC43MTI0VjEwLjY3OFYxMC42NDM3VjEwLjYwOTVWMTAuNTc1M1YxMC41NDEzVjEwLjUwNzNWMTAuNDczNVYxMC40Mzk3VjEwLjQwNlYxMC4zNzI0VjEwLjMzODlWMTAuMzA1NFYxMC4yNzIxVjEwLjIzODlWMTAuMjA1N1YxMC4xNzI2VjEwLjEzOTZWMTAuMTA2OFYxMC4wNzRWMTAuMDQxMlYxMC4wMDg2VjkuOTc2MDhWOS45NDM2NFY5LjkxMTI4VjkuODc5MDJWOS44NDY4NFY5LjgxNDc2VjkuNzgyNzZWOS43NTA4NVY5LjcxOTA0VjkuNjg3MzFWOS42NTU2N1Y5LjYyNDEzVjkuNTkyNjdWOS41NjEzVjkuNTMwMDNWOS40OTg4NFY5LjQ2Nzc1VjkuNDM2NzRWOS40MDU4M1Y5LjM3NTAxVjkuMzQ0MjdWOS4zMTM2M1Y5LjI4MzA4VjkuMjUyNjJWOS4yMjIyNVY5LjE5MTk3VjkuMTYxNzhWOS4xMzE2OVY5LjEwMTY4VjkuMDcxNzdWOS4wNDE5NVY5LjAxMjIyVjguOTgyNThWOC45NTMwM1Y4LjkyMzU3VjguODk0MjFWOC44NjQ5M1Y4LjgzNTc1VjguODA2NjZWOC43Nzc2NlY4Ljc0ODc2VjguNzE5OTRWOC42OTEyMlY4LjY2MjU5VjguNjM0MDVWOC42MDU2MVY4LjU3NzI1VjguNTQ4OTlWOC41MjA4MlY4LjQ5Mjc1VjguNDY0NzZWOC40MzY4N1Y4LjQwOTA3VjguMzgxMzdWOC4zNTM3NlY4LjMyNjI0VjguMjk4ODFWOC4yNzE0N1Y4LjI0NDIzVjguMjE3MDlWOC4xOTAwM1Y4LjE2MzA3VjguMTM2MlY4LjEwOTQzVjguMDgyNzRWOC4wNTYxNlY4LjAyOTY2VjguMDAzMjZWNy45NzY5NVY3Ljk1MDc0VjcuOTI0NjJWNy44OTg2VjcuODcyNjZWNy44NDY4M1Y3LjgyMTA4VjcuNzk1NDNWNy43Njk4OFY3Ljc0NDQxVjcuNzE5MDVWNy42OTM3OFY3LjY2ODZWNy42NDM1MVY3LjYxODUyVjcuNTkzNjNWNy41Njg4M1Y3LjU0NDEyVjcuNTE5NTFWNy40OTVWNy40NzA1OFY3LjQ0NjI1VjcuNDIyMDJWNy4zOTc4OFY3LjM3Mzg0VjcuMzQ5OVY3LjMyNjA1VjcuMzAyMjlWNy4yNzg2NFY3LjI1NTA3VjcuMjMxNlY3LjIwODIzVjcuMTg0OTVWNy4xNjE3N1Y3LjEzODY5VjcuMTE1N1Y3LjA5MjhWNy4wNzAwMVY3LjA0NzMxVjcuMDI0N1Y3LjAwMjE5VjYuOTc5NzhWNi45NTc0NlY2LjkzNTI0VjYuOTEzMTJWNi44OTEwOVY2Ljg2OTE2VjYuODQ3MzJWNi44MjU1OFY2LjgwMzk0VjYuNzgyNFY2Ljc2MDk1VjYuNzM5NlY2LjcxODM1VjYuNjk3MTlWNi42NzYxM1Y2LjY1NTE3VjYuNjM0MzFWNi42MTM1NFY2LjU5Mjg3VjYuNTcyMjlWNi41NTE4MlY2LjUzMTQ0VjYuNTExMTZWNi40OTA5OFY2LjQ3MDg5VjYuNDUwOTFWNi40MzEwMlY2LjQxMTIyVjYuMzkxNTNWNi4zNzE5NFY2LjM1MjQ0VjYuMzMzMDRWNi4zMTM3NFY2LjI5NDU0VjYuMjc1NDNWNi4yNTY0M1Y2LjIzNzUyVjYuMjE4NzFWNi4yVjYuMTgxMzlWNi4xNjI4N1Y2LjE0NDQ2VjYuMTI2MTVWNi4xMDc5M1Y2LjA4OTgxVjYuMDcxNzlWNi4wNTM4N1Y2LjAzNjA1VjYuMDE4MzNWNi4wMDA3MVY1Ljk4MzE5VjUuOTY1NzdWNS45NDg0NFY1LjkzMTIyVjUuOTE0MVY1Ljg5NzA3VjUuODgwMTVWNS44NjMzMlY1Ljg0NjZWNS44Mjk5N1Y1LjgxMzQ1VjUuNzk3MDJWNS43ODA3VjUuNzY0NDdWNS43NDgzNVY1LjczMjMyVjUuNzE2NFY1LjcwMDU3VjUuNjg0ODVWNS42NjkyM1Y1LjY1MzcxVjUuNjM4MjhWNS42MjI5NlY1LjYwNzc0VjUuNTkyNjJWNS41Nzc2MVY1LjU2MjY5VjUuNTQ3ODdWNS41MzMxNlY1LjUxODU0VjUuNTA0MDNWNS40ODk2MlY1LjQ3NTMxVjUuNDYxMVY1LjQ0Njk5VjUuNDMyOTlWNS40MTkwOFY1LjQwNTI4VjUuMzkxNThWNS4zNzc5OFY1LjM2NDQ5VjUuMzUxMDlWNS4zMzc4VjUuMzI0NjFWNS4zMTE1MlY1LjI5ODUzVjUuMjg1NjVWNS4yNzI4NlY1LjI2MDE4VjUuMjQ3NjFWNS4yMzUxM1Y1LjIyMjc2VjUuMjEwNDlWNS4xOTgzMlY1LjE4NjI2VjUuMTc0MjlWNS4xNjI0NFY1LjE1MDY4VjUuMTM5MDNWNS4xMjc0OFY1LjExNjAzVjUuMTA0NjlWNS4wOTM0NFY1LjA4MjMxVjUuMDcxMjdWNS4wNjAzNFY1LjA0OTUyVjUuMDM4NzlWNS4wMjgxN1Y1LjAxNzY2VjUuMDA3MjRWNC45OTY5M1Y0Ljk4NjczVjQuOTc2NjNWNC45NjY2M1Y0Ljk1Njc0VjQuOTQ2OTVWNC45MzcyN1Y0LjkyNzY4VjQuOTE4MjFWNC45MDg4NFY0Ljg5OTU3VjQuODkwNDFWNC44ODEzNVY0Ljg3MjM5VjQuODYzNTRWNC44NTQ4VjQuODQ2MTZWNC44Mzc2MlY0LjgyOTE5VjQuODIwODdWNC44MTI2NVY0LjgwNDUzVjQuNzk2NTJWNC43ODg2MlY0Ljc4MDgyVjQuNzczMTNWNC43NjU1NFY0Ljc1ODA2VjQuNzUwNjhWNC43NDM0MVY0LjczNjI0VjQuNzI5MThWNC43MjIyMlY0LjcxNTM4VjQuNzA4NjNWNC43MDcxMUw5LjEyMTMyIDQuNTg1NzlDOS40OTYzOSA0LjIxMDcxIDEwLjAwNTEgNCAxMC41MzU1IDRIMTEuNUMxMS43NzYxIDQgMTIgMy43NzYxNCAxMiAzLjVDMTIgMy4yMjM4NiAxMS43NzYxIDMgMTEuNSAzSDEwLjUzNTVDOS43Nzk2MyAzIDkuMDUzMTMgMy4yODUyOCA4LjUgMy43OTYyM0M3Ljk0Njg3IDMuMjg1MjggNy4yMjAzNyAzIDYuNDY0NDcgM0g1LjVaIi8+CjwvbWFzaz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjUgM0M1LjIyMzg2IDMgNSAzLjIyMzg2IDUgMy41QzUgMy43NzYxNCA1LjIyMzg2IDQgNS41IDRINi40NjQ0N0M2Ljk5NDkgNCA3LjUwMzYxIDQuMjEwNzEgNy44Nzg2OCA0LjU4NTc5TDggNC43MDcxMVY0LjcwODYzVjQuNzE1MzhWNC43MjIyMlY0LjcyOTE4VjQuNzM2MjRWNC43NDM0MVY0Ljc1MDY4VjQuNzU4MDZWNC43NjU1NFY0Ljc3MzEzVjQuNzgwODJWNC43ODg2MlY0Ljc5NjUyVjQuODA0NTNWNC44MTI2NVY0LjgyMDg3VjQuODI5MTlWNC44Mzc2MlY0Ljg0NjE2VjQuODU0OFY0Ljg2MzU0VjQuODcyMzlWNC44ODEzNVY0Ljg5MDQxVjQuODk5NTdWNC45MDg4NFY0LjkxODIxVjQuOTI3NjhWNC45MzcyN1Y0Ljk0Njk1VjQuOTU2NzRWNC45NjY2M1Y0Ljk3NjYzVjQuOTg2NzNWNC45OTY5M1Y1LjAwNzI0VjUuMDE3NjZWNS4wMjgxN1Y1LjAzODc5VjUuMDQ5NTJWNS4wNjAzNFY1LjA3MTI3VjUuMDgyMzFWNS4wOTM0NFY1LjEwNDY5VjUuMTE2MDNWNS4xMjc0OFY1LjEzOTAzVjUuMTUwNjhWNS4xNjI0NFY1LjE3NDI5VjUuMTg2MjZWNS4xOTgzMlY1LjIxMDQ5VjUuMjIyNzZWNS4yMzUxM1Y1LjI0NzYxVjUuMjYwMThWNS4yNzI4NlY1LjI4NTY1VjUuMjk4NTNWNS4zMTE1MlY1LjMyNDYxVjUuMzM3OFY1LjM1MTA5VjUuMzY0NDlWNS4zNzc5OFY1LjM5MTU4VjUuNDA1MjhWNS40MTkwOFY1LjQzMjk5VjUuNDQ2OTlWNS40NjExVjUuNDc1MzFWNS40ODk2MlY1LjUwNDAzVjUuNTE4NTRWNS41MzMxNlY1LjU0Nzg3VjUuNTYyNjlWNS41Nzc2MVY1LjU5MjYyVjUuNjA3NzRWNS42MjI5NlY1LjYzODI4VjUuNjUzNzFWNS42NjkyM1Y1LjY4NDg1VjUuNzAwNTdWNS43MTY0VjUuNzMyMzJWNS43NDgzNVY1Ljc2NDQ3VjUuNzgwN1Y1Ljc5NzAyVjUuODEzNDVWNS44Mjk5N1Y1Ljg0NjZWNS44NjMzMlY1Ljg4MDE1VjUuODk3MDdWNS45MTQxVjUuOTMxMjJWNS45NDg0NFY1Ljk2NTc3VjUuOTgzMTlWNi4wMDA3MVY2LjAxODMzVjYuMDM2MDVWNi4wNTM4N1Y2LjA3MTc5VjYuMDg5ODFWNi4xMDc5M1Y2LjEyNjE1VjYuMTQ0NDZWNi4xNjI4N1Y2LjE4MTM5VjYuMlY2LjIxODcxVjYuMjM3NTJWNi4yNTY0M1Y2LjI3NTQzVjYuMjk0NTRWNi4zMTM3NFY2LjMzMzA0VjYuMzUyNDRWNi4zNzE5NFY2LjM5MTUzVjYuNDExMjJWNi40MzEwMlY2LjQ1MDkxVjYuNDcwODlWNi40OTA5OFY2LjUxMTE2VjYuNTMxNDRWNi41NTE4MlY2LjU3MjI5VjYuNTkyODdWNi42MTM1NFY2LjYzNDMxVjYuNjU1MTdWNi42NzYxM1Y2LjY5NzE5VjYuNzE4MzVWNi43Mzk2VjYuNzYwOTVWNi43ODI0VjYuODAzOTRWNi44MjU1OFY2Ljg0NzMyVjYuODY5MTZWNi44OTEwOVY2LjkxMzEyVjYuOTM1MjRWNi45NTc0NlY2Ljk3OTc4VjcuMDAyMTlWNy4wMjQ3VjcuMDQ3MzFWNy4wNzAwMVY3LjA5MjhWNy4xMTU3VjcuMTM4NjlWNy4xNjE3N1Y3LjE4NDk1VjcuMjA4MjNWNy4yMzE2VjcuMjU1MDdWNy4yNzg2NFY3LjMwMjI5VjcuMzI2MDVWNy4zNDk5VjcuMzczODRWNy4zOTc4OFY3LjQyMjAyVjcuNDQ2MjVWNy40NzA1OFY3LjQ5NVY3LjUxOTUxVjcuNTQ0MTJWNy41Njg4M1Y3LjU5MzYzVjcuNjE4NTJWNy42NDM1MVY3LjY2ODZWNy42OTM3OFY3LjcxOTA1VjcuNzQ0NDFWNy43Njk4OFY3Ljc5NTQzVjcuODIxMDhWNy44NDY4M1Y3Ljg3MjY2VjcuODk4NlY3LjkyNDYyVjcuOTUwNzRWNy45NzY5NVY4LjAwMzI2VjguMDI5NjZWOC4wNTYxNlY4LjA4Mjc0VjguMTA5NDNWOC4xMzYyVjguMTYzMDdWOC4xOTAwM1Y4LjIxNzA5VjguMjQ0MjNWOC4yNzE0N1Y4LjI5ODgxVjguMzI2MjRWOC4zNTM3NlY4LjM4MTM3VjguNDA5MDdWOC40MzY4N1Y4LjQ2NDc2VjguNDkyNzVWOC41MjA4MlY4LjU0ODk5VjguNTc3MjVWOC42MDU2MVY4LjYzNDA1VjguNjYyNTlWOC42OTEyMlY4LjcxOTk0VjguNzQ4NzZWOC43Nzc2NlY4LjgwNjY2VjguODM1NzVWOC44NjQ5M1Y4Ljg5NDIxVjguOTIzNTdWOC45NTMwM1Y4Ljk4MjU4VjkuMDEyMjJWOS4wNDE5NVY5LjA3MTc3VjkuMTAxNjhWOS4xMzE2OVY5LjE2MTc4VjkuMTkxOTdWOS4yMjIyNVY5LjI1MjYyVjkuMjgzMDhWOS4zMTM2M1Y5LjM0NDI3VjkuMzc1MDFWOS40MDU4M1Y5LjQzNjc0VjkuNDY3NzVWOS40OTg4NFY5LjUzMDAzVjkuNTYxM1Y5LjU5MjY3VjkuNjI0MTNWOS42NTU2N1Y5LjY4NzMxVjkuNzE5MDRWOS43NTA4NVY5Ljc4Mjc2VjkuODE0NzZWOS44NDY4NFY5Ljg3OTAyVjkuOTExMjhWOS45NDM2NFY5Ljk3NjA4VjEwLjAwODZWMTAuMDQxMlYxMC4wNzRWMTAuMTA2OFYxMC4xMzk2VjEwLjE3MjZWMTAuMjA1N1YxMC4yMzg5VjEwLjI3MjFWMTAuMzA1NFYxMC4zMzg5VjEwLjM3MjRWMTAuNDA2VjEwLjQzOTdWMTAuNDczNVYxMC41MDczVjEwLjU0MTNWMTAuNTc1M1YxMC42MDk1VjEwLjY0MzdWMTAuNjc4VjEwLjcxMjRWMTAuNzQ2OVYxMC43ODE1VjEwLjgxNjFWMTAuODUwOVYxMC44ODU3VjEwLjkyMDZWMTAuOTU1N1YxMC45OTA4VjExSDcuNUM3LjIyMzg2IDExIDcgMTEuMjIzOSA3IDExLjVDNyAxMS43NzYxIDcuMjIzODYgMTIgNy41IDEySDhWMTIuMDA4OVYxMi4wNDY2VjEyLjA4NDNWMTIuMTIyMVYxMi4xNTk5VjEyLjE5NzlWMTIuMjM1OVYxMi4yNzQxVjEyLjMxMjNWMTIuMzUwNlYxMi4zODlWMTIuNDI3NFYxMi40NjZWMTIuNTA0NlYxMi41NDM0VjEyLjU4MjJWMTIuNjIxMVYxMi42NjAxVjEyLjY5OTFWMTIuNzM4M1YxMi43Nzc1VjEyLjgxNjhWMTIuODU2M1YxMi44OTU3VjEyLjkzNTNWMTIuOTc1VjEzLjAxNDdWMTMuMDU0NVYxMy4wOTQ1VjEzLjEzNDVWMTMuMTc0NVYxMy4yMTQ3VjEzLjI1NDlWMTMuMjk1M1YxMy4zMzU3VjEzLjM3NjJWMTMuNDE2OFYxMy40NTc0VjEzLjQ5ODJWMTMuNTM5VjEzLjU3OTlWMTMuNjIwOVYxMy42NjJWMTMuNzAzMlYxMy43NDQ0VjEzLjc4NThWMTMuODI3MlYxMy44Njg3VjEzLjkxMDNWMTMuOTUxOVYxMy45OTM3VjE0LjAzNTVWMTQuMDc3NFYxNC4xMTk0VjE0LjE2MTVWMTQuMjAzN1YxNC4yNDU5VjE0LjI4ODJWMTQuMzMwNlYxNC4zNzMxVjE0LjQxNTdWMTQuNDU4NFYxNC41MDExVjE0LjU0MzlWMTQuNTg2OFYxNC42Mjk4VjE0LjY3MjlWMTQuNzE2VjE0Ljc1OTJWMTQuODAyNVYxNC44NDU5VjE0Ljg4OTRWMTQuOTMzVjE0Ljk3NjZWMTUuMDIwM1YxNS4wNjQxVjE1LjEwOFYxNS4xNTJWMTUuMTk2VjE1LjI0MDFWMTUuMjg0M1YxNS4zMjg2VjE1LjM3M1YxNS40MTc0VjE1LjQ2MTlWMTUuNTA2NVYxNS41NTEyVjE1LjU5NlYxNS42NDA4VjE1LjY4NThWMTUuNzMwOFYxNS43NzU5VjE1LjgyMVYxNS44NjYzVjE1LjkxMTZWMTUuOTU3VjE2LjAwMjVWMTYuMDQ4MVYxNi4wOTM3VjE2LjEzOTVWMTYuMTg1M1YxNi4yMzEyVjE2LjI3NzFWMTYuMzIzMlYxNi4zNjkzVjE2LjQxNTVWMTYuNDYxOFYxNi41MDgyVjE2LjU1NDZWMTYuNjAxMVYxNi42NDc3VjE2LjY5NDRWMTYuNzQxMlYxNi43ODhWMTYuODM0OVYxNi44ODE5VjE2LjkyOVYxNi45NzYxVjE3LjAyMzRWMTcuMDcwN1YxNy4xMTgxVjE3LjE2NTVWMTcuMjEzMVYxNy4yNjA3VjE3LjI5MjlMNy44Nzg2OCAxNy40MTQyQzcuNTAzNjEgMTcuNzg5MyA2Ljk5NDkgMTggNi40NjQ0NyAxOEg1LjVDNS4yMjM4NiAxOCA1IDE4LjIyMzkgNSAxOC41QzUgMTguNzc2MSA1LjIyMzg2IDE5IDUuNSAxOUg2LjQ2NDQ3QzcuMjIwMzcgMTkgNy45NDY4NyAxOC43MTQ3IDguNSAxOC4yMDM4QzkuMDUzMTQgMTguNzE0NyA5Ljc3OTYzIDE5IDEwLjUzNTUgMTlIMTEuNUMxMS43NzYxIDE5IDEyIDE4Ljc3NjEgMTIgMTguNUMxMiAxOC4yMjM5IDExLjc3NjEgMTggMTEuNSAxOEgxMC41MzU1QzEwLjAwNTEgMTggOS40OTYzOSAxNy43ODkzIDkuMTIxMzIgMTcuNDE0Mkw5IDE3LjI5MjlWMTcuMjYwN1YxNy4yMTMxVjE3LjE2NTVWMTcuMTE4MVYxNy4wNzA3VjE3LjAyMzRWMTYuOTc2MVYxNi45MjlWMTYuODgxOVYxNi44MzQ5VjE2Ljc4OFYxNi43NDEyVjE2LjY5NDRWMTYuNjQ3N1YxNi42MDExVjE2LjU1NDZWMTYuNTA4MlYxNi40NjE4VjE2LjQxNTVWMTYuMzY5M1YxNi4zMjMyVjE2LjI3NzFWMTYuMjMxMlYxNi4xODUzVjE2LjEzOTVWMTYuMDkzN1YxNi4wNDgxVjE2LjAwMjVWMTUuOTU3VjE1LjkxMTZWMTUuODY2M1YxNS44MjFWMTUuNzc1OVYxNS43MzA4VjE1LjY4NThWMTUuNjQwOFYxNS41OTZWMTUuNTUxMlYxNS41MDY1VjE1LjQ2MTlWMTUuNDE3NFYxNS4zNzNWMTUuMzI4NlYxNS4yODQzVjE1LjI0MDFWMTUuMTk2VjE1LjE1MlYxNS4xMDhWMTUuMDY0MVYxNS4wMjAzVjE0Ljk3NjZWMTQuOTMzVjE0Ljg4OTRWMTQuODQ1OVYxNC44MDI1VjE0Ljc1OTJWMTQuNzE2VjE0LjY3MjlWMTQuNjI5OFYxNC41ODY4VjE0LjU0MzlWMTQuNTAxMVYxNC40NTg0VjE0LjQxNTdWMTQuMzczMVYxNC4zMzA2VjE0LjI4ODJWMTQuMjQ1OVYxNC4yMDM3VjE0LjE2MTVWMTQuMTE5NFYxNC4wNzc0VjE0LjAzNTVWMTMuOTkzN1YxMy45NTE5VjEzLjkxMDNWMTMuODY4N1YxMy44MjcyVjEzLjc4NThWMTMuNzQ0NFYxMy43MDMyVjEzLjY2MlYxMy42MjA5VjEzLjU3OTlWMTMuNTM5VjEzLjQ5ODJWMTMuNDU3NFYxMy40MTY4VjEzLjM3NjJWMTMuMzM1N1YxMy4yOTUzVjEzLjI1NDlWMTMuMjE0N1YxMy4xNzQ1VjEzLjEzNDVWMTMuMDk0NVYxMy4wNTQ1VjEzLjAxNDdWMTIuOTc1VjEyLjkzNTNWMTIuODk1N1YxMi44NTYzVjEyLjgxNjhWMTIuNzc3NVYxMi43MzgzVjEyLjY5OTFWMTIuNjYwMVYxMi42MjExVjEyLjU4MjJWMTIuNTQzNFYxMi41MDQ2VjEyLjQ2NlYxMi40Mjc0VjEyLjM4OVYxMi4zNTA2VjEyLjMxMjNWMTIuMjc0MVYxMi4yMzU5VjEyLjE5NzlWMTIuMTU5OVYxMi4xMjIxVjEyLjA4NDNWMTIuMDQ2NlYxMi4wMDg5VjEySDkuNUM5Ljc3NjE0IDEyIDEwIDExLjc3NjEgMTAgMTEuNUMxMCAxMS4yMjM5IDkuNzc2MTQgMTEgOS41IDExSDlWMTAuOTkwOFYxMC45NTU3VjEwLjkyMDZWMTAuODg1N1YxMC44NTA5VjEwLjgxNjFWMTAuNzgxNVYxMC43NDY5VjEwLjcxMjRWMTAuNjc4VjEwLjY0MzdWMTAuNjA5NVYxMC41NzUzVjEwLjU0MTNWMTAuNTA3M1YxMC40NzM1VjEwLjQzOTdWMTAuNDA2VjEwLjM3MjRWMTAuMzM4OVYxMC4zMDU0VjEwLjI3MjFWMTAuMjM4OVYxMC4yMDU3VjEwLjE3MjZWMTAuMTM5NlYxMC4xMDY4VjEwLjA3NFYxMC4wNDEyVjEwLjAwODZWOS45NzYwOFY5Ljk0MzY0VjkuOTExMjhWOS44NzkwMlY5Ljg0Njg0VjkuODE0NzZWOS43ODI3NlY5Ljc1MDg1VjkuNzE5MDRWOS42ODczMVY5LjY1NTY3VjkuNjI0MTNWOS41OTI2N1Y5LjU2MTNWOS41MzAwM1Y5LjQ5ODg0VjkuNDY3NzVWOS40MzY3NFY5LjQwNTgzVjkuMzc1MDFWOS4zNDQyN1Y5LjMxMzYzVjkuMjgzMDhWOS4yNTI2MlY5LjIyMjI1VjkuMTkxOTdWOS4xNjE3OFY5LjEzMTY5VjkuMTAxNjhWOS4wNzE3N1Y5LjA0MTk1VjkuMDEyMjJWOC45ODI1OFY4Ljk1MzAzVjguOTIzNTdWOC44OTQyMVY4Ljg2NDkzVjguODM1NzVWOC44MDY2NlY4Ljc3NzY2VjguNzQ4NzZWOC43MTk5NFY4LjY5MTIyVjguNjYyNTlWOC42MzQwNVY4LjYwNTYxVjguNTc3MjVWOC41NDg5OVY4LjUyMDgyVjguNDkyNzVWOC40NjQ3NlY4LjQzNjg3VjguNDA5MDdWOC4zODEzN1Y4LjM1Mzc2VjguMzI2MjRWOC4yOTg4MVY4LjI3MTQ3VjguMjQ0MjNWOC4yMTcwOVY4LjE5MDAzVjguMTYzMDdWOC4xMzYyVjguMTA5NDNWOC4wODI3NFY4LjA1NjE2VjguMDI5NjZWOC4wMDMyNlY3Ljk3Njk1VjcuOTUwNzRWNy45MjQ2MlY3Ljg5ODZWNy44NzI2NlY3Ljg0NjgzVjcuODIxMDhWNy43OTU0M1Y3Ljc2OTg4VjcuNzQ0NDFWNy43MTkwNVY3LjY5Mzc4VjcuNjY4NlY3LjY0MzUxVjcuNjE4NTJWNy41OTM2M1Y3LjU2ODgzVjcuNTQ0MTJWNy41MTk1MVY3LjQ5NVY3LjQ3MDU4VjcuNDQ2MjVWNy40MjIwMlY3LjM5Nzg4VjcuMzczODRWNy4zNDk5VjcuMzI2MDVWNy4zMDIyOVY3LjI3ODY0VjcuMjU1MDdWNy4yMzE2VjcuMjA4MjNWNy4xODQ5NVY3LjE2MTc3VjcuMTM4NjlWNy4xMTU3VjcuMDkyOFY3LjA3MDAxVjcuMDQ3MzFWNy4wMjQ3VjcuMDAyMTlWNi45Nzk3OFY2Ljk1NzQ2VjYuOTM1MjRWNi45MTMxMlY2Ljg5MTA5VjYuODY5MTZWNi44NDczMlY2LjgyNTU4VjYuODAzOTRWNi43ODI0VjYuNzYwOTVWNi43Mzk2VjYuNzE4MzVWNi42OTcxOVY2LjY3NjEzVjYuNjU1MTdWNi42MzQzMVY2LjYxMzU0VjYuNTkyODdWNi41NzIyOVY2LjU1MTgyVjYuNTMxNDRWNi41MTExNlY2LjQ5MDk4VjYuNDcwODlWNi40NTA5MVY2LjQzMTAyVjYuNDExMjJWNi4zOTE1M1Y2LjM3MTk0VjYuMzUyNDRWNi4zMzMwNFY2LjMxMzc0VjYuMjk0NTRWNi4yNzU0M1Y2LjI1NjQzVjYuMjM3NTJWNi4yMTg3MVY2LjJWNi4xODEzOVY2LjE2Mjg3VjYuMTQ0NDZWNi4xMjYxNVY2LjEwNzkzVjYuMDg5ODFWNi4wNzE3OVY2LjA1Mzg3VjYuMDM2MDVWNi4wMTgzM1Y2LjAwMDcxVjUuOTgzMTlWNS45NjU3N1Y1Ljk0ODQ0VjUuOTMxMjJWNS45MTQxVjUuODk3MDdWNS44ODAxNVY1Ljg2MzMyVjUuODQ2NlY1LjgyOTk3VjUuODEzNDVWNS43OTcwMlY1Ljc4MDdWNS43NjQ0N1Y1Ljc0ODM1VjUuNzMyMzJWNS43MTY0VjUuNzAwNTdWNS42ODQ4NVY1LjY2OTIzVjUuNjUzNzFWNS42MzgyOFY1LjYyMjk2VjUuNjA3NzRWNS41OTI2MlY1LjU3NzYxVjUuNTYyNjlWNS41NDc4N1Y1LjUzMzE2VjUuNTE4NTRWNS41MDQwM1Y1LjQ4OTYyVjUuNDc1MzFWNS40NjExVjUuNDQ2OTlWNS40MzI5OVY1LjQxOTA4VjUuNDA1MjhWNS4zOTE1OFY1LjM3Nzk4VjUuMzY0NDlWNS4zNTEwOVY1LjMzNzhWNS4zMjQ2MVY1LjMxMTUyVjUuMjk4NTNWNS4yODU2NVY1LjI3Mjg2VjUuMjYwMThWNS4yNDc2MVY1LjIzNTEzVjUuMjIyNzZWNS4yMTA0OVY1LjE5ODMyVjUuMTg2MjZWNS4xNzQyOVY1LjE2MjQ0VjUuMTUwNjhWNS4xMzkwM1Y1LjEyNzQ4VjUuMTE2MDNWNS4xMDQ2OVY1LjA5MzQ0VjUuMDgyMzFWNS4wNzEyN1Y1LjA2MDM0VjUuMDQ5NTJWNS4wMzg3OVY1LjAyODE3VjUuMDE3NjZWNS4wMDcyNFY0Ljk5NjkzVjQuOTg2NzNWNC45NzY2M1Y0Ljk2NjYzVjQuOTU2NzRWNC45NDY5NVY0LjkzNzI3VjQuOTI3NjhWNC45MTgyMVY0LjkwODg0VjQuODk5NTdWNC44OTA0MVY0Ljg4MTM1VjQuODcyMzlWNC44NjM1NFY0Ljg1NDhWNC44NDYxNlY0LjgzNzYyVjQuODI5MTlWNC44MjA4N1Y0LjgxMjY1VjQuODA0NTNWNC43OTY1MlY0Ljc4ODYyVjQuNzgwODJWNC43NzMxM1Y0Ljc2NTU0VjQuNzU4MDZWNC43NTA2OFY0Ljc0MzQxVjQuNzM2MjRWNC43MjkxOFY0LjcyMjIyVjQuNzE1MzhWNC43MDg2M1Y0LjcwNzExTDkuMTIxMzIgNC41ODU3OUM5LjQ5NjM5IDQuMjEwNzEgMTAuMDA1MSA0IDEwLjUzNTUgNEgxMS41QzExLjc3NjEgNCAxMiAzLjc3NjE0IDEyIDMuNUMxMiAzLjIyMzg2IDExLjc3NjEgMyAxMS41IDNIMTAuNTM1NUM5Ljc3OTYzIDMgOS4wNTMxMyAzLjI4NTI4IDguNSAzLjc5NjIzQzcuOTQ2ODcgMy4yODUyOCA3LjIyMDM3IDMgNi40NjQ0NyAzSDUuNVoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik04IDQuNzA3MTFIOVY0LjI5Mjg5TDguNzA3MTEgNEw4IDQuNzA3MTFaTTggMTFWMTJIOVYxMUg4Wk04IDEySDlWMTFIOFYxMlpNOCAxNy4yOTI5TDguNzA3MTEgMThMOSAxNy43MDcxVjE3LjI5MjlIOFpNNy44Nzg2OCAxNy40MTQyTDguNTg1NzkgMTguMTIxM0g4LjU4NTc5TDcuODc4NjggMTcuNDE0MlpNOC41IDE4LjIwMzhMOS4xNzg1NCAxNy40NjkyTDguNSAxNi44NDI0TDcuODIxNDYgMTcuNDY5Mkw4LjUgMTguMjAzOFpNOSAxNy4yOTI5SDhWMTcuNzA3MUw4LjI5Mjg5IDE4TDkgMTcuMjkyOVpNOSAxMlYxMUg4VjEySDlaTTkgMTFIOFYxMkg5VjExWk05IDQuNzA3MTFMOC4yOTI4OSA0TDggNC4yOTI4OVY0LjcwNzExSDlaTTkuMTIxMzIgNC41ODU3OUw5LjgyODQzIDUuMjkyODlMOS44Mjg0MyA1LjI5Mjg5TDkuMTIxMzIgNC41ODU3OVpNOC41IDMuNzk2MjNMNy44MjE0NiA0LjUzMDc5TDguNSA1LjE1NzU3TDkuMTc4NTQgNC41MzA3OUw4LjUgMy43OTYyM1pNNiAzLjVDNiAzLjc3NjE0IDUuNzc2MTQgNCA1LjUgNFYyQzQuNjcxNTcgMiA0IDIuNjcxNTcgNCAzLjVINlpNNS41IDNDNS43NzYxNCAzIDYgMy4yMjM4NiA2IDMuNUg0QzQgNC4zMjg0MyA0LjY3MTU3IDUgNS41IDVWM1pNNi40NjQ0NyAzSDUuNVY1SDYuNDY0NDdWM1pNOC41ODU3OSAzLjg3ODY4QzguMDIzMTggMy4zMTYwNyA3LjI2MDEyIDMgNi40NjQ0NyAzVjVDNi43Mjk2OCA1IDYuOTg0MDQgNS4xMDUzNiA3LjE3MTU3IDUuMjkyODlMOC41ODU3OSAzLjg3ODY4Wk04LjcwNzExIDRMOC41ODU3OSAzLjg3ODY4TDcuMTcxNTcgNS4yOTI4OUw3LjI5Mjg5IDUuNDE0MjFMOC43MDcxMSA0Wk05IDQuNzA4NjNWNC43MDcxMUg3VjQuNzA4NjNIOVpNOSA0LjcxNTM4VjQuNzA4NjNIN1Y0LjcxNTM4SDlaTTkgNC43MjIyMlY0LjcxNTM4SDdWNC43MjIyMkg5Wk05IDQuNzI5MThWNC43MjIyMkg3VjQuNzI5MThIOVpNOSA0LjczNjI0VjQuNzI5MThIN1Y0LjczNjI0SDlaTTkgNC43NDM0MVY0LjczNjI0SDdWNC43NDM0MUg5Wk05IDQuNzUwNjhWNC43NDM0MUg3VjQuNzUwNjhIOVpNOSA0Ljc1ODA2VjQuNzUwNjhIN1Y0Ljc1ODA2SDlaTTkgNC43NjU1NFY0Ljc1ODA2SDdWNC43NjU1NEg5Wk05IDQuNzczMTNWNC43NjU1NEg3VjQuNzczMTNIOVpNOSA0Ljc4MDgyVjQuNzczMTNIN1Y0Ljc4MDgySDlaTTkgNC43ODg2MlY0Ljc4MDgySDdWNC43ODg2Mkg5Wk05IDQuNzk2NTJWNC43ODg2Mkg3VjQuNzk2NTJIOVpNOSA0LjgwNDUzVjQuNzk2NTJIN1Y0LjgwNDUzSDlaTTkgNC44MTI2NVY0LjgwNDUzSDdWNC44MTI2NUg5Wk05IDQuODIwODdWNC44MTI2NUg3VjQuODIwODdIOVpNOSA0LjgyOTE5VjQuODIwODdIN1Y0LjgyOTE5SDlaTTkgNC44Mzc2MlY0LjgyOTE5SDdWNC44Mzc2Mkg5Wk05IDQuODQ2MTZWNC44Mzc2Mkg3VjQuODQ2MTZIOVpNOSA0Ljg1NDhWNC44NDYxNkg3VjQuODU0OEg5Wk05IDQuODYzNTRWNC44NTQ4SDdWNC44NjM1NEg5Wk05IDQuODcyMzlWNC44NjM1NEg3VjQuODcyMzlIOVpNOSA0Ljg4MTM1VjQuODcyMzlIN1Y0Ljg4MTM1SDlaTTkgNC44OTA0MVY0Ljg4MTM1SDdWNC44OTA0MUg5Wk05IDQuODk5NTdWNC44OTA0MUg3VjQuODk5NTdIOVpNOSA0LjkwODg0VjQuODk5NTdIN1Y0LjkwODg0SDlaTTkgNC45MTgyMVY0LjkwODg0SDdWNC45MTgyMUg5Wk05IDQuOTI3NjhWNC45MTgyMUg3VjQuOTI3NjhIOVpNOSA0LjkzNzI3VjQuOTI3NjhIN1Y0LjkzNzI3SDlaTTkgNC45NDY5NVY0LjkzNzI3SDdWNC45NDY5NUg5Wk05IDQuOTU2NzRWNC45NDY5NUg3VjQuOTU2NzRIOVpNOSA0Ljk2NjYzVjQuOTU2NzRIN1Y0Ljk2NjYzSDlaTTkgNC45NzY2M1Y0Ljk2NjYzSDdWNC45NzY2M0g5Wk05IDQuOTg2NzNWNC45NzY2M0g3VjQuOTg2NzNIOVpNOSA0Ljk5NjkzVjQuOTg2NzNIN1Y0Ljk5NjkzSDlaTTkgNS4wMDcyNFY0Ljk5NjkzSDdWNS4wMDcyNEg5Wk05IDUuMDE3NjZWNS4wMDcyNEg3VjUuMDE3NjZIOVpNOSA1LjAyODE3VjUuMDE3NjZIN1Y1LjAyODE3SDlaTTkgNS4wMzg3OVY1LjAyODE3SDdWNS4wMzg3OUg5Wk05IDUuMDQ5NTJWNS4wMzg3OUg3VjUuMDQ5NTJIOVpNOSA1LjA2MDM0VjUuMDQ5NTJIN1Y1LjA2MDM0SDlaTTkgNS4wNzEyN1Y1LjA2MDM0SDdWNS4wNzEyN0g5Wk05IDUuMDgyMzFWNS4wNzEyN0g3VjUuMDgyMzFIOVpNOSA1LjA5MzQ0VjUuMDgyMzFIN1Y1LjA5MzQ0SDlaTTkgNS4xMDQ2OVY1LjA5MzQ0SDdWNS4xMDQ2OUg5Wk05IDUuMTE2MDNWNS4xMDQ2OUg3VjUuMTE2MDNIOVpNOSA1LjEyNzQ4VjUuMTE2MDNIN1Y1LjEyNzQ4SDlaTTkgNS4xMzkwM1Y1LjEyNzQ4SDdWNS4xMzkwM0g5Wk05IDUuMTUwNjhWNS4xMzkwM0g3VjUuMTUwNjhIOVpNOSA1LjE2MjQ0VjUuMTUwNjhIN1Y1LjE2MjQ0SDlaTTkgNS4xNzQyOVY1LjE2MjQ0SDdWNS4xNzQyOUg5Wk05IDUuMTg2MjZWNS4xNzQyOUg3VjUuMTg2MjZIOVpNOSA1LjE5ODMyVjUuMTg2MjZIN1Y1LjE5ODMySDlaTTkgNS4yMTA0OVY1LjE5ODMySDdWNS4yMTA0OUg5Wk05IDUuMjIyNzZWNS4yMTA0OUg3VjUuMjIyNzZIOVpNOSA1LjIzNTEzVjUuMjIyNzZIN1Y1LjIzNTEzSDlaTTkgNS4yNDc2MVY1LjIzNTEzSDdWNS4yNDc2MUg5Wk05IDUuMjYwMThWNS4yNDc2MUg3VjUuMjYwMThIOVpNOSA1LjI3Mjg2VjUuMjYwMThIN1Y1LjI3Mjg2SDlaTTkgNS4yODU2NVY1LjI3Mjg2SDdWNS4yODU2NUg5Wk05IDUuMjk4NTNWNS4yODU2NUg3VjUuMjk4NTNIOVpNOSA1LjMxMTUyVjUuMjk4NTNIN1Y1LjMxMTUySDlaTTkgNS4zMjQ2MVY1LjMxMTUySDdWNS4zMjQ2MUg5Wk05IDUuMzM3OFY1LjMyNDYxSDdWNS4zMzc4SDlaTTkgNS4zNTEwOVY1LjMzNzhIN1Y1LjM1MTA5SDlaTTkgNS4zNjQ0OVY1LjM1MTA5SDdWNS4zNjQ0OUg5Wk05IDUuMzc3OThWNS4zNjQ0OUg3VjUuMzc3OThIOVpNOSA1LjM5MTU4VjUuMzc3OThIN1Y1LjM5MTU4SDlaTTkgNS40MDUyOFY1LjM5MTU4SDdWNS40MDUyOEg5Wk05IDUuNDE5MDhWNS40MDUyOEg3VjUuNDE5MDhIOVpNOSA1LjQzMjk5VjUuNDE5MDhIN1Y1LjQzMjk5SDlaTTkgNS40NDY5OVY1LjQzMjk5SDdWNS40NDY5OUg5Wk05IDUuNDYxMVY1LjQ0Njk5SDdWNS40NjExSDlaTTkgNS40NzUzMVY1LjQ2MTFIN1Y1LjQ3NTMxSDlaTTkgNS40ODk2MlY1LjQ3NTMxSDdWNS40ODk2Mkg5Wk05IDUuNTA0MDNWNS40ODk2Mkg3VjUuNTA0MDNIOVpNOSA1LjUxODU0VjUuNTA0MDNIN1Y1LjUxODU0SDlaTTkgNS41MzMxNlY1LjUxODU0SDdWNS41MzMxNkg5Wk05IDUuNTQ3ODdWNS41MzMxNkg3VjUuNTQ3ODdIOVpNOSA1LjU2MjY5VjUuNTQ3ODdIN1Y1LjU2MjY5SDlaTTkgNS41Nzc2MVY1LjU2MjY5SDdWNS41Nzc2MUg5Wk05IDUuNTkyNjJWNS41Nzc2MUg3VjUuNTkyNjJIOVpNOSA1LjYwNzc0VjUuNTkyNjJIN1Y1LjYwNzc0SDlaTTkgNS42MjI5NlY1LjYwNzc0SDdWNS42MjI5Nkg5Wk05IDUuNjM4MjhWNS42MjI5Nkg3VjUuNjM4MjhIOVpNOSA1LjY1MzcxVjUuNjM4MjhIN1Y1LjY1MzcxSDlaTTkgNS42NjkyM1Y1LjY1MzcxSDdWNS42NjkyM0g5Wk05IDUuNjg0ODVWNS42NjkyM0g3VjUuNjg0ODVIOVpNOSA1LjcwMDU3VjUuNjg0ODVIN1Y1LjcwMDU3SDlaTTkgNS43MTY0VjUuNzAwNTdIN1Y1LjcxNjRIOVpNOSA1LjczMjMyVjUuNzE2NEg3VjUuNzMyMzJIOVpNOSA1Ljc0ODM1VjUuNzMyMzJIN1Y1Ljc0ODM1SDlaTTkgNS43NjQ0N1Y1Ljc0ODM1SDdWNS43NjQ0N0g5Wk05IDUuNzgwN1Y1Ljc2NDQ3SDdWNS43ODA3SDlaTTkgNS43OTcwMlY1Ljc4MDdIN1Y1Ljc5NzAySDlaTTkgNS44MTM0NVY1Ljc5NzAySDdWNS44MTM0NUg5Wk05IDUuODI5OTdWNS44MTM0NUg3VjUuODI5OTdIOVpNOSA1Ljg0NjZWNS44Mjk5N0g3VjUuODQ2Nkg5Wk05IDUuODYzMzJWNS44NDY2SDdWNS44NjMzMkg5Wk05IDUuODgwMTVWNS44NjMzMkg3VjUuODgwMTVIOVpNOSA1Ljg5NzA3VjUuODgwMTVIN1Y1Ljg5NzA3SDlaTTkgNS45MTQxVjUuODk3MDdIN1Y1LjkxNDFIOVpNOSA1LjkzMTIyVjUuOTE0MUg3VjUuOTMxMjJIOVpNOSA1Ljk0ODQ0VjUuOTMxMjJIN1Y1Ljk0ODQ0SDlaTTkgNS45NjU3N1Y1Ljk0ODQ0SDdWNS45NjU3N0g5Wk05IDUuOTgzMTlWNS45NjU3N0g3VjUuOTgzMTlIOVpNOSA2LjAwMDcxVjUuOTgzMTlIN1Y2LjAwMDcxSDlaTTkgNi4wMTgzM1Y2LjAwMDcxSDdWNi4wMTgzM0g5Wk05IDYuMDM2MDVWNi4wMTgzM0g3VjYuMDM2MDVIOVpNOSA2LjA1Mzg3VjYuMDM2MDVIN1Y2LjA1Mzg3SDlaTTkgNi4wNzE3OVY2LjA1Mzg3SDdWNi4wNzE3OUg5Wk05IDYuMDg5ODFWNi4wNzE3OUg3VjYuMDg5ODFIOVpNOSA2LjEwNzkzVjYuMDg5ODFIN1Y2LjEwNzkzSDlaTTkgNi4xMjYxNVY2LjEwNzkzSDdWNi4xMjYxNUg5Wk05IDYuMTQ0NDZWNi4xMjYxNUg3VjYuMTQ0NDZIOVpNOSA2LjE2Mjg3VjYuMTQ0NDZIN1Y2LjE2Mjg3SDlaTTkgNi4xODEzOVY2LjE2Mjg3SDdWNi4xODEzOUg5Wk05IDYuMlY2LjE4MTM5SDdWNi4ySDlaTTkgNi4yMTg3MVY2LjJIN1Y2LjIxODcxSDlaTTkgNi4yMzc1MlY2LjIxODcxSDdWNi4yMzc1Mkg5Wk05IDYuMjU2NDNWNi4yMzc1Mkg3VjYuMjU2NDNIOVpNOSA2LjI3NTQzVjYuMjU2NDNIN1Y2LjI3NTQzSDlaTTkgNi4yOTQ1NFY2LjI3NTQzSDdWNi4yOTQ1NEg5Wk05IDYuMzEzNzRWNi4yOTQ1NEg3VjYuMzEzNzRIOVpNOSA2LjMzMzA0VjYuMzEzNzRIN1Y2LjMzMzA0SDlaTTkgNi4zNTI0NFY2LjMzMzA0SDdWNi4zNTI0NEg5Wk05IDYuMzcxOTRWNi4zNTI0NEg3VjYuMzcxOTRIOVpNOSA2LjM5MTUzVjYuMzcxOTRIN1Y2LjM5MTUzSDlaTTkgNi40MTEyMlY2LjM5MTUzSDdWNi40MTEyMkg5Wk05IDYuNDMxMDJWNi40MTEyMkg3VjYuNDMxMDJIOVpNOSA2LjQ1MDkxVjYuNDMxMDJIN1Y2LjQ1MDkxSDlaTTkgNi40NzA4OVY2LjQ1MDkxSDdWNi40NzA4OUg5Wk05IDYuNDkwOThWNi40NzA4OUg3VjYuNDkwOThIOVpNOSA2LjUxMTE2VjYuNDkwOThIN1Y2LjUxMTE2SDlaTTkgNi41MzE0NFY2LjUxMTE2SDdWNi41MzE0NEg5Wk05IDYuNTUxODJWNi41MzE0NEg3VjYuNTUxODJIOVpNOSA2LjU3MjI5VjYuNTUxODJIN1Y2LjU3MjI5SDlaTTkgNi41OTI4N1Y2LjU3MjI5SDdWNi41OTI4N0g5Wk05IDYuNjEzNTRWNi41OTI4N0g3VjYuNjEzNTRIOVpNOSA2LjYzNDMxVjYuNjEzNTRIN1Y2LjYzNDMxSDlaTTkgNi42NTUxN1Y2LjYzNDMxSDdWNi42NTUxN0g5Wk05IDYuNjc2MTNWNi42NTUxN0g3VjYuNjc2MTNIOVpNOSA2LjY5NzE5VjYuNjc2MTNIN1Y2LjY5NzE5SDlaTTkgNi43MTgzNVY2LjY5NzE5SDdWNi43MTgzNUg5Wk05IDYuNzM5NlY2LjcxODM1SDdWNi43Mzk2SDlaTTkgNi43NjA5NVY2LjczOTZIN1Y2Ljc2MDk1SDlaTTkgNi43ODI0VjYuNzYwOTVIN1Y2Ljc4MjRIOVpNOSA2LjgwMzk0VjYuNzgyNEg3VjYuODAzOTRIOVpNOSA2LjgyNTU4VjYuODAzOTRIN1Y2LjgyNTU4SDlaTTkgNi44NDczMlY2LjgyNTU4SDdWNi44NDczMkg5Wk05IDYuODY5MTZWNi44NDczMkg3VjYuODY5MTZIOVpNOSA2Ljg5MTA5VjYuODY5MTZIN1Y2Ljg5MTA5SDlaTTkgNi45MTMxMlY2Ljg5MTA5SDdWNi45MTMxMkg5Wk05IDYuOTM1MjRWNi45MTMxMkg3VjYuOTM1MjRIOVpNOSA2Ljk1NzQ2VjYuOTM1MjRIN1Y2Ljk1NzQ2SDlaTTkgNi45Nzk3OFY2Ljk1NzQ2SDdWNi45Nzk3OEg5Wk05IDcuMDAyMTlWNi45Nzk3OEg3VjcuMDAyMTlIOVpNOSA3LjAyNDdWNy4wMDIxOUg3VjcuMDI0N0g5Wk05IDcuMDQ3MzFWNy4wMjQ3SDdWNy4wNDczMUg5Wk05IDcuMDcwMDFWNy4wNDczMUg3VjcuMDcwMDFIOVpNOSA3LjA5MjhWNy4wNzAwMUg3VjcuMDkyOEg5Wk05IDcuMTE1N1Y3LjA5MjhIN1Y3LjExNTdIOVpNOSA3LjEzODY5VjcuMTE1N0g3VjcuMTM4NjlIOVpNOSA3LjE2MTc3VjcuMTM4NjlIN1Y3LjE2MTc3SDlaTTkgNy4xODQ5NVY3LjE2MTc3SDdWNy4xODQ5NUg5Wk05IDcuMjA4MjNWNy4xODQ5NUg3VjcuMjA4MjNIOVpNOSA3LjIzMTZWNy4yMDgyM0g3VjcuMjMxNkg5Wk05IDcuMjU1MDdWNy4yMzE2SDdWNy4yNTUwN0g5Wk05IDcuMjc4NjRWNy4yNTUwN0g3VjcuMjc4NjRIOVpNOSA3LjMwMjI5VjcuMjc4NjRIN1Y3LjMwMjI5SDlaTTkgNy4zMjYwNVY3LjMwMjI5SDdWNy4zMjYwNUg5Wk05IDcuMzQ5OVY3LjMyNjA1SDdWNy4zNDk5SDlaTTkgNy4zNzM4NFY3LjM0OTlIN1Y3LjM3Mzg0SDlaTTkgNy4zOTc4OFY3LjM3Mzg0SDdWNy4zOTc4OEg5Wk05IDcuNDIyMDJWNy4zOTc4OEg3VjcuNDIyMDJIOVpNOSA3LjQ0NjI1VjcuNDIyMDJIN1Y3LjQ0NjI1SDlaTTkgNy40NzA1OFY3LjQ0NjI1SDdWNy40NzA1OEg5Wk05IDcuNDk1VjcuNDcwNThIN1Y3LjQ5NUg5Wk05IDcuNTE5NTFWNy40OTVIN1Y3LjUxOTUxSDlaTTkgNy41NDQxMlY3LjUxOTUxSDdWNy41NDQxMkg5Wk05IDcuNTY4ODNWNy41NDQxMkg3VjcuNTY4ODNIOVpNOSA3LjU5MzYzVjcuNTY4ODNIN1Y3LjU5MzYzSDlaTTkgNy42MTg1MlY3LjU5MzYzSDdWNy42MTg1Mkg5Wk05IDcuNjQzNTFWNy42MTg1Mkg3VjcuNjQzNTFIOVpNOSA3LjY2ODZWNy42NDM1MUg3VjcuNjY4Nkg5Wk05IDcuNjkzNzhWNy42Njg2SDdWNy42OTM3OEg5Wk05IDcuNzE5MDVWNy42OTM3OEg3VjcuNzE5MDVIOVpNOSA3Ljc0NDQxVjcuNzE5MDVIN1Y3Ljc0NDQxSDlaTTkgNy43Njk4OFY3Ljc0NDQxSDdWNy43Njk4OEg5Wk05IDcuNzk1NDNWNy43Njk4OEg3VjcuNzk1NDNIOVpNOSA3LjgyMTA4VjcuNzk1NDNIN1Y3LjgyMTA4SDlaTTkgNy44NDY4M1Y3LjgyMTA4SDdWNy44NDY4M0g5Wk05IDcuODcyNjZWNy44NDY4M0g3VjcuODcyNjZIOVpNOSA3Ljg5ODZWNy44NzI2Nkg3VjcuODk4Nkg5Wk05IDcuOTI0NjJWNy44OTg2SDdWNy45MjQ2Mkg5Wk05IDcuOTUwNzRWNy45MjQ2Mkg3VjcuOTUwNzRIOVpNOSA3Ljk3Njk1VjcuOTUwNzRIN1Y3Ljk3Njk1SDlaTTkgOC4wMDMyNlY3Ljk3Njk1SDdWOC4wMDMyNkg5Wk05IDguMDI5NjZWOC4wMDMyNkg3VjguMDI5NjZIOVpNOSA4LjA1NjE2VjguMDI5NjZIN1Y4LjA1NjE2SDlaTTkgOC4wODI3NFY4LjA1NjE2SDdWOC4wODI3NEg5Wk05IDguMTA5NDNWOC4wODI3NEg3VjguMTA5NDNIOVpNOSA4LjEzNjJWOC4xMDk0M0g3VjguMTM2Mkg5Wk05IDguMTYzMDdWOC4xMzYySDdWOC4xNjMwN0g5Wk05IDguMTkwMDNWOC4xNjMwN0g3VjguMTkwMDNIOVpNOSA4LjIxNzA5VjguMTkwMDNIN1Y4LjIxNzA5SDlaTTkgOC4yNDQyM1Y4LjIxNzA5SDdWOC4yNDQyM0g5Wk05IDguMjcxNDdWOC4yNDQyM0g3VjguMjcxNDdIOVpNOSA4LjI5ODgxVjguMjcxNDdIN1Y4LjI5ODgxSDlaTTkgOC4zMjYyNFY4LjI5ODgxSDdWOC4zMjYyNEg5Wk05IDguMzUzNzZWOC4zMjYyNEg3VjguMzUzNzZIOVpNOSA4LjM4MTM3VjguMzUzNzZIN1Y4LjM4MTM3SDlaTTkgOC40MDkwN1Y4LjM4MTM3SDdWOC40MDkwN0g5Wk05IDguNDM2ODdWOC40MDkwN0g3VjguNDM2ODdIOVpNOSA4LjQ2NDc2VjguNDM2ODdIN1Y4LjQ2NDc2SDlaTTkgOC40OTI3NVY4LjQ2NDc2SDdWOC40OTI3NUg5Wk05IDguNTIwODJWOC40OTI3NUg3VjguNTIwODJIOVpNOSA4LjU0ODk5VjguNTIwODJIN1Y4LjU0ODk5SDlaTTkgOC41NzcyNVY4LjU0ODk5SDdWOC41NzcyNUg5Wk05IDguNjA1NjFWOC41NzcyNUg3VjguNjA1NjFIOVpNOSA4LjYzNDA1VjguNjA1NjFIN1Y4LjYzNDA1SDlaTTkgOC42NjI1OVY4LjYzNDA1SDdWOC42NjI1OUg5Wk05IDguNjkxMjJWOC42NjI1OUg3VjguNjkxMjJIOVpNOSA4LjcxOTk0VjguNjkxMjJIN1Y4LjcxOTk0SDlaTTkgOC43NDg3NlY4LjcxOTk0SDdWOC43NDg3Nkg5Wk05IDguNzc3NjZWOC43NDg3Nkg3VjguNzc3NjZIOVpNOSA4LjgwNjY2VjguNzc3NjZIN1Y4LjgwNjY2SDlaTTkgOC44MzU3NVY4LjgwNjY2SDdWOC44MzU3NUg5Wk05IDguODY0OTNWOC44MzU3NUg3VjguODY0OTNIOVpNOSA4Ljg5NDIxVjguODY0OTNIN1Y4Ljg5NDIxSDlaTTkgOC45MjM1N1Y4Ljg5NDIxSDdWOC45MjM1N0g5Wk05IDguOTUzMDNWOC45MjM1N0g3VjguOTUzMDNIOVpNOSA4Ljk4MjU4VjguOTUzMDNIN1Y4Ljk4MjU4SDlaTTkgOS4wMTIyMlY4Ljk4MjU4SDdWOS4wMTIyMkg5Wk05IDkuMDQxOTVWOS4wMTIyMkg3VjkuMDQxOTVIOVpNOSA5LjA3MTc3VjkuMDQxOTVIN1Y5LjA3MTc3SDlaTTkgOS4xMDE2OFY5LjA3MTc3SDdWOS4xMDE2OEg5Wk05IDkuMTMxNjlWOS4xMDE2OEg3VjkuMTMxNjlIOVpNOSA5LjE2MTc4VjkuMTMxNjlIN1Y5LjE2MTc4SDlaTTkgOS4xOTE5N1Y5LjE2MTc4SDdWOS4xOTE5N0g5Wk05IDkuMjIyMjVWOS4xOTE5N0g3VjkuMjIyMjVIOVpNOSA5LjI1MjYyVjkuMjIyMjVIN1Y5LjI1MjYySDlaTTkgOS4yODMwOFY5LjI1MjYySDdWOS4yODMwOEg5Wk05IDkuMzEzNjNWOS4yODMwOEg3VjkuMzEzNjNIOVpNOSA5LjM0NDI3VjkuMzEzNjNIN1Y5LjM0NDI3SDlaTTkgOS4zNzUwMVY5LjM0NDI3SDdWOS4zNzUwMUg5Wk05IDkuNDA1ODNWOS4zNzUwMUg3VjkuNDA1ODNIOVpNOSA5LjQzNjc0VjkuNDA1ODNIN1Y5LjQzNjc0SDlaTTkgOS40Njc3NVY5LjQzNjc0SDdWOS40Njc3NUg5Wk05IDkuNDk4ODRWOS40Njc3NUg3VjkuNDk4ODRIOVpNOSA5LjUzMDAzVjkuNDk4ODRIN1Y5LjUzMDAzSDlaTTkgOS41NjEzVjkuNTMwMDNIN1Y5LjU2MTNIOVpNOSA5LjU5MjY3VjkuNTYxM0g3VjkuNTkyNjdIOVpNOSA5LjYyNDEzVjkuNTkyNjdIN1Y5LjYyNDEzSDlaTTkgOS42NTU2N1Y5LjYyNDEzSDdWOS42NTU2N0g5Wk05IDkuNjg3MzFWOS42NTU2N0g3VjkuNjg3MzFIOVpNOSA5LjcxOTA0VjkuNjg3MzFIN1Y5LjcxOTA0SDlaTTkgOS43NTA4NVY5LjcxOTA0SDdWOS43NTA4NUg5Wk05IDkuNzgyNzZWOS43NTA4NUg3VjkuNzgyNzZIOVpNOSA5LjgxNDc2VjkuNzgyNzZIN1Y5LjgxNDc2SDlaTTkgOS44NDY4NFY5LjgxNDc2SDdWOS44NDY4NEg5Wk05IDkuODc5MDJWOS44NDY4NEg3VjkuODc5MDJIOVpNOSA5LjkxMTI4VjkuODc5MDJIN1Y5LjkxMTI4SDlaTTkgOS45NDM2NFY5LjkxMTI4SDdWOS45NDM2NEg5Wk05IDkuOTc2MDhWOS45NDM2NEg3VjkuOTc2MDhIOVpNOSAxMC4wMDg2VjkuOTc2MDhIN1YxMC4wMDg2SDlaTTkgMTAuMDQxMlYxMC4wMDg2SDdWMTAuMDQxMkg5Wk05IDEwLjA3NFYxMC4wNDEySDdWMTAuMDc0SDlaTTkgMTAuMTA2OFYxMC4wNzRIN1YxMC4xMDY4SDlaTTkgMTAuMTM5NlYxMC4xMDY4SDdWMTAuMTM5Nkg5Wk05IDEwLjE3MjZWMTAuMTM5Nkg3VjEwLjE3MjZIOVpNOSAxMC4yMDU3VjEwLjE3MjZIN1YxMC4yMDU3SDlaTTkgMTAuMjM4OVYxMC4yMDU3SDdWMTAuMjM4OUg5Wk05IDEwLjI3MjFWMTAuMjM4OUg3VjEwLjI3MjFIOVpNOSAxMC4zMDU0VjEwLjI3MjFIN1YxMC4zMDU0SDlaTTkgMTAuMzM4OVYxMC4zMDU0SDdWMTAuMzM4OUg5Wk05IDEwLjM3MjRWMTAuMzM4OUg3VjEwLjM3MjRIOVpNOSAxMC40MDZWMTAuMzcyNEg3VjEwLjQwNkg5Wk05IDEwLjQzOTdWMTAuNDA2SDdWMTAuNDM5N0g5Wk05IDEwLjQ3MzVWMTAuNDM5N0g3VjEwLjQ3MzVIOVpNOSAxMC41MDczVjEwLjQ3MzVIN1YxMC41MDczSDlaTTkgMTAuNTQxM1YxMC41MDczSDdWMTAuNTQxM0g5Wk05IDEwLjU3NTNWMTAuNTQxM0g3VjEwLjU3NTNIOVpNOSAxMC42MDk1VjEwLjU3NTNIN1YxMC42MDk1SDlaTTkgMTAuNjQzN1YxMC42MDk1SDdWMTAuNjQzN0g5Wk05IDEwLjY3OFYxMC42NDM3SDdWMTAuNjc4SDlaTTkgMTAuNzEyNFYxMC42NzhIN1YxMC43MTI0SDlaTTkgMTAuNzQ2OVYxMC43MTI0SDdWMTAuNzQ2OUg5Wk05IDEwLjc4MTVWMTAuNzQ2OUg3VjEwLjc4MTVIOVpNOSAxMC44MTYxVjEwLjc4MTVIN1YxMC44MTYxSDlaTTkgMTAuODUwOVYxMC44MTYxSDdWMTAuODUwOUg5Wk05IDEwLjg4NTdWMTAuODUwOUg3VjEwLjg4NTdIOVpNOSAxMC45MjA2VjEwLjg4NTdIN1YxMC45MjA2SDlaTTkgMTAuOTU1N1YxMC45MjA2SDdWMTAuOTU1N0g5Wk05IDEwLjk5MDhWMTAuOTU1N0g3VjEwLjk5MDhIOVpNOSAxMVYxMC45OTA4SDdWMTFIOVpNNy41IDEySDhWMTBINy41VjEyWk04IDExLjVDOCAxMS43NzYxIDcuNzc2MTQgMTIgNy41IDEyVjEwQzYuNjcxNTcgMTAgNiAxMC42NzE2IDYgMTEuNUg4Wk03LjUgMTFDNy43NzYxNCAxMSA4IDExLjIyMzkgOCAxMS41SDZDNiAxMi4zMjg0IDYuNjcxNTcgMTMgNy41IDEzVjExWk04IDExSDcuNVYxM0g4VjExWk05IDEyLjAwODlWMTJIN1YxMi4wMDg5SDlaTTkgMTIuMDQ2NlYxMi4wMDg5SDdWMTIuMDQ2Nkg5Wk05IDEyLjA4NDNWMTIuMDQ2Nkg3VjEyLjA4NDNIOVpNOSAxMi4xMjIxVjEyLjA4NDNIN1YxMi4xMjIxSDlaTTkgMTIuMTU5OVYxMi4xMjIxSDdWMTIuMTU5OUg5Wk05IDEyLjE5NzlWMTIuMTU5OUg3VjEyLjE5NzlIOVpNOSAxMi4yMzU5VjEyLjE5NzlIN1YxMi4yMzU5SDlaTTkgMTIuMjc0MVYxMi4yMzU5SDdWMTIuMjc0MUg5Wk05IDEyLjMxMjNWMTIuMjc0MUg3VjEyLjMxMjNIOVpNOSAxMi4zNTA2VjEyLjMxMjNIN1YxMi4zNTA2SDlaTTkgMTIuMzg5VjEyLjM1MDZIN1YxMi4zODlIOVpNOSAxMi40Mjc0VjEyLjM4OUg3VjEyLjQyNzRIOVpNOSAxMi40NjZWMTIuNDI3NEg3VjEyLjQ2Nkg5Wk05IDEyLjUwNDZWMTIuNDY2SDdWMTIuNTA0Nkg5Wk05IDEyLjU0MzRWMTIuNTA0Nkg3VjEyLjU0MzRIOVpNOSAxMi41ODIyVjEyLjU0MzRIN1YxMi41ODIySDlaTTkgMTIuNjIxMVYxMi41ODIySDdWMTIuNjIxMUg5Wk05IDEyLjY2MDFWMTIuNjIxMUg3VjEyLjY2MDFIOVpNOSAxMi42OTkxVjEyLjY2MDFIN1YxMi42OTkxSDlaTTkgMTIuNzM4M1YxMi42OTkxSDdWMTIuNzM4M0g5Wk05IDEyLjc3NzVWMTIuNzM4M0g3VjEyLjc3NzVIOVpNOSAxMi44MTY4VjEyLjc3NzVIN1YxMi44MTY4SDlaTTkgMTIuODU2M1YxMi44MTY4SDdWMTIuODU2M0g5Wk05IDEyLjg5NTdWMTIuODU2M0g3VjEyLjg5NTdIOVpNOSAxMi45MzUzVjEyLjg5NTdIN1YxMi45MzUzSDlaTTkgMTIuOTc1VjEyLjkzNTNIN1YxMi45NzVIOVpNOSAxMy4wMTQ3VjEyLjk3NUg3VjEzLjAxNDdIOVpNOSAxMy4wNTQ1VjEzLjAxNDdIN1YxMy4wNTQ1SDlaTTkgMTMuMDk0NVYxMy4wNTQ1SDdWMTMuMDk0NUg5Wk05IDEzLjEzNDVWMTMuMDk0NUg3VjEzLjEzNDVIOVpNOSAxMy4xNzQ1VjEzLjEzNDVIN1YxMy4xNzQ1SDlaTTkgMTMuMjE0N1YxMy4xNzQ1SDdWMTMuMjE0N0g5Wk05IDEzLjI1NDlWMTMuMjE0N0g3VjEzLjI1NDlIOVpNOSAxMy4yOTUzVjEzLjI1NDlIN1YxMy4yOTUzSDlaTTkgMTMuMzM1N1YxMy4yOTUzSDdWMTMuMzM1N0g5Wk05IDEzLjM3NjJWMTMuMzM1N0g3VjEzLjM3NjJIOVpNOSAxMy40MTY4VjEzLjM3NjJIN1YxMy40MTY4SDlaTTkgMTMuNDU3NFYxMy40MTY4SDdWMTMuNDU3NEg5Wk05IDEzLjQ5ODJWMTMuNDU3NEg3VjEzLjQ5ODJIOVpNOSAxMy41MzlWMTMuNDk4Mkg3VjEzLjUzOUg5Wk05IDEzLjU3OTlWMTMuNTM5SDdWMTMuNTc5OUg5Wk05IDEzLjYyMDlWMTMuNTc5OUg3VjEzLjYyMDlIOVpNOSAxMy42NjJWMTMuNjIwOUg3VjEzLjY2Mkg5Wk05IDEzLjcwMzJWMTMuNjYySDdWMTMuNzAzMkg5Wk05IDEzLjc0NDRWMTMuNzAzMkg3VjEzLjc0NDRIOVpNOSAxMy43ODU4VjEzLjc0NDRIN1YxMy43ODU4SDlaTTkgMTMuODI3MlYxMy43ODU4SDdWMTMuODI3Mkg5Wk05IDEzLjg2ODdWMTMuODI3Mkg3VjEzLjg2ODdIOVpNOSAxMy45MTAzVjEzLjg2ODdIN1YxMy45MTAzSDlaTTkgMTMuOTUxOVYxMy45MTAzSDdWMTMuOTUxOUg5Wk05IDEzLjk5MzdWMTMuOTUxOUg3VjEzLjk5MzdIOVpNOSAxNC4wMzU1VjEzLjk5MzdIN1YxNC4wMzU1SDlaTTkgMTQuMDc3NFYxNC4wMzU1SDdWMTQuMDc3NEg5Wk05IDE0LjExOTRWMTQuMDc3NEg3VjE0LjExOTRIOVpNOSAxNC4xNjE1VjE0LjExOTRIN1YxNC4xNjE1SDlaTTkgMTQuMjAzN1YxNC4xNjE1SDdWMTQuMjAzN0g5Wk05IDE0LjI0NTlWMTQuMjAzN0g3VjE0LjI0NTlIOVpNOSAxNC4yODgyVjE0LjI0NTlIN1YxNC4yODgySDlaTTkgMTQuMzMwNlYxNC4yODgySDdWMTQuMzMwNkg5Wk05IDE0LjM3MzFWMTQuMzMwNkg3VjE0LjM3MzFIOVpNOSAxNC40MTU3VjE0LjM3MzFIN1YxNC40MTU3SDlaTTkgMTQuNDU4NFYxNC40MTU3SDdWMTQuNDU4NEg5Wk05IDE0LjUwMTFWMTQuNDU4NEg3VjE0LjUwMTFIOVpNOSAxNC41NDM5VjE0LjUwMTFIN1YxNC41NDM5SDlaTTkgMTQuNTg2OFYxNC41NDM5SDdWMTQuNTg2OEg5Wk05IDE0LjYyOThWMTQuNTg2OEg3VjE0LjYyOThIOVpNOSAxNC42NzI5VjE0LjYyOThIN1YxNC42NzI5SDlaTTkgMTQuNzE2VjE0LjY3MjlIN1YxNC43MTZIOVpNOSAxNC43NTkyVjE0LjcxNkg3VjE0Ljc1OTJIOVpNOSAxNC44MDI1VjE0Ljc1OTJIN1YxNC44MDI1SDlaTTkgMTQuODQ1OVYxNC44MDI1SDdWMTQuODQ1OUg5Wk05IDE0Ljg4OTRWMTQuODQ1OUg3VjE0Ljg4OTRIOVpNOSAxNC45MzNWMTQuODg5NEg3VjE0LjkzM0g5Wk05IDE0Ljk3NjZWMTQuOTMzSDdWMTQuOTc2Nkg5Wk05IDE1LjAyMDNWMTQuOTc2Nkg3VjE1LjAyMDNIOVpNOSAxNS4wNjQxVjE1LjAyMDNIN1YxNS4wNjQxSDlaTTkgMTUuMTA4VjE1LjA2NDFIN1YxNS4xMDhIOVpNOSAxNS4xNTJWMTUuMTA4SDdWMTUuMTUySDlaTTkgMTUuMTk2VjE1LjE1Mkg3VjE1LjE5Nkg5Wk05IDE1LjI0MDFWMTUuMTk2SDdWMTUuMjQwMUg5Wk05IDE1LjI4NDNWMTUuMjQwMUg3VjE1LjI4NDNIOVpNOSAxNS4zMjg2VjE1LjI4NDNIN1YxNS4zMjg2SDlaTTkgMTUuMzczVjE1LjMyODZIN1YxNS4zNzNIOVpNOSAxNS40MTc0VjE1LjM3M0g3VjE1LjQxNzRIOVpNOSAxNS40NjE5VjE1LjQxNzRIN1YxNS40NjE5SDlaTTkgMTUuNTA2NVYxNS40NjE5SDdWMTUuNTA2NUg5Wk05IDE1LjU1MTJWMTUuNTA2NUg3VjE1LjU1MTJIOVpNOSAxNS41OTZWMTUuNTUxMkg3VjE1LjU5Nkg5Wk05IDE1LjY0MDhWMTUuNTk2SDdWMTUuNjQwOEg5Wk05IDE1LjY4NThWMTUuNjQwOEg3VjE1LjY4NThIOVpNOSAxNS43MzA4VjE1LjY4NThIN1YxNS43MzA4SDlaTTkgMTUuNzc1OVYxNS43MzA4SDdWMTUuNzc1OUg5Wk05IDE1LjgyMVYxNS43NzU5SDdWMTUuODIxSDlaTTkgMTUuODY2M1YxNS44MjFIN1YxNS44NjYzSDlaTTkgMTUuOTExNlYxNS44NjYzSDdWMTUuOTExNkg5Wk05IDE1Ljk1N1YxNS45MTE2SDdWMTUuOTU3SDlaTTkgMTYuMDAyNVYxNS45NTdIN1YxNi4wMDI1SDlaTTkgMTYuMDQ4MVYxNi4wMDI1SDdWMTYuMDQ4MUg5Wk05IDE2LjA5MzdWMTYuMDQ4MUg3VjE2LjA5MzdIOVpNOSAxNi4xMzk1VjE2LjA5MzdIN1YxNi4xMzk1SDlaTTkgMTYuMTg1M1YxNi4xMzk1SDdWMTYuMTg1M0g5Wk05IDE2LjIzMTJWMTYuMTg1M0g3VjE2LjIzMTJIOVpNOSAxNi4yNzcxVjE2LjIzMTJIN1YxNi4yNzcxSDlaTTkgMTYuMzIzMlYxNi4yNzcxSDdWMTYuMzIzMkg5Wk05IDE2LjM2OTNWMTYuMzIzMkg3VjE2LjM2OTNIOVpNOSAxNi40MTU1VjE2LjM2OTNIN1YxNi40MTU1SDlaTTkgMTYuNDYxOFYxNi40MTU1SDdWMTYuNDYxOEg5Wk05IDE2LjUwODJWMTYuNDYxOEg3VjE2LjUwODJIOVpNOSAxNi41NTQ2VjE2LjUwODJIN1YxNi41NTQ2SDlaTTkgMTYuNjAxMVYxNi41NTQ2SDdWMTYuNjAxMUg5Wk05IDE2LjY0NzdWMTYuNjAxMUg3VjE2LjY0NzdIOVpNOSAxNi42OTQ0VjE2LjY0NzdIN1YxNi42OTQ0SDlaTTkgMTYuNzQxMlYxNi42OTQ0SDdWMTYuNzQxMkg5Wk05IDE2Ljc4OFYxNi43NDEySDdWMTYuNzg4SDlaTTkgMTYuODM0OVYxNi43ODhIN1YxNi44MzQ5SDlaTTkgMTYuODgxOVYxNi44MzQ5SDdWMTYuODgxOUg5Wk05IDE2LjkyOVYxNi44ODE5SDdWMTYuOTI5SDlaTTkgMTYuOTc2MVYxNi45MjlIN1YxNi45NzYxSDlaTTkgMTcuMDIzNFYxNi45NzYxSDdWMTcuMDIzNEg5Wk05IDE3LjA3MDdWMTcuMDIzNEg3VjE3LjA3MDdIOVpNOSAxNy4xMTgxVjE3LjA3MDdIN1YxNy4xMTgxSDlaTTkgMTcuMTY1NVYxNy4xMTgxSDdWMTcuMTY1NUg5Wk05IDE3LjIxMzFWMTcuMTY1NUg3VjE3LjIxMzFIOVpNOSAxNy4yNjA3VjE3LjIxMzFIN1YxNy4yNjA3SDlaTTkgMTcuMjkyOVYxNy4yNjA3SDdWMTcuMjkyOUg5Wk04LjU4NTc5IDE4LjEyMTNMOC43MDcxMSAxOEw3LjI5Mjg5IDE2LjU4NThMNy4xNzE1NyAxNi43MDcxTDguNTg1NzkgMTguMTIxM1pNNi40NjQ0NyAxOUM3LjI2MDEyIDE5IDguMDIzMTggMTguNjgzOSA4LjU4NTc5IDE4LjEyMTNMNy4xNzE1NyAxNi43MDcxQzYuOTg0MDQgMTYuODk0NiA2LjcyOTY4IDE3IDYuNDY0NDcgMTdWMTlaTTUuNSAxOUg2LjQ2NDQ3VjE3SDUuNVYxOVpNNiAxOC41QzYgMTguNzc2MSA1Ljc3NjE0IDE5IDUuNSAxOVYxN0M0LjY3MTU3IDE3IDQgMTcuNjcxNiA0IDE4LjVINlpNNS41IDE4QzUuNzc2MTQgMTggNiAxOC4yMjM5IDYgMTguNUg0QzQgMTkuMzI4NCA0LjY3MTU3IDIwIDUuNSAyMFYxOFpNNi40NjQ0NyAxOEg1LjVWMjBINi40NjQ0N1YxOFpNNy44MjE0NiAxNy40NjkyQzcuNDUyNzQgMTcuODA5OCA2Ljk2ODM5IDE4IDYuNDY0NDcgMThWMjBDNy40NzIzNSAyMCA4LjQ0MSAxOS42MTk2IDkuMTc4NTQgMTguOTM4M0w3LjgyMTQ2IDE3LjQ2OTJaTTEwLjUzNTUgMThDMTAuMDMxNiAxOCA5LjU0NzI3IDE3LjgwOTggOS4xNzg1NCAxNy40NjkyTDcuODIxNDYgMTguOTM4M0M4LjU1OSAxOS42MTk2IDkuNTI3NjQgMjAgMTAuNTM1NSAyMFYxOFpNMTEuNSAxOEgxMC41MzU1VjIwSDExLjVWMThaTTExIDE4LjVDMTEgMTguMjIzOSAxMS4yMjM5IDE4IDExLjUgMThWMjBDMTIuMzI4NCAyMCAxMyAxOS4zMjg0IDEzIDE4LjVIMTFaTTExLjUgMTlDMTEuMjIzOSAxOSAxMSAxOC43NzYxIDExIDE4LjVIMTNDMTMgMTcuNjcxNiAxMi4zMjg0IDE3IDExLjUgMTdWMTlaTTEwLjUzNTUgMTlIMTEuNVYxN0gxMC41MzU1VjE5Wk04LjQxNDIxIDE4LjEyMTNDOC45NzY4MiAxOC42ODM5IDkuNzM5ODggMTkgMTAuNTM1NSAxOVYxN0MxMC4yNzAzIDE3IDEwLjAxNiAxNi44OTQ2IDkuODI4NDMgMTYuNzA3MUw4LjQxNDIxIDE4LjEyMTNaTTguMjkyODkgMThMOC40MTQyMSAxOC4xMjEzTDkuODI4NDMgMTYuNzA3MUw5LjcwNzExIDE2LjU4NThMOC4yOTI4OSAxOFpNOCAxNy4yNjA3VjE3LjI5MjlIMTBWMTcuMjYwN0g4Wk04IDE3LjIxMzFWMTcuMjYwN0gxMFYxNy4yMTMxSDhaTTggMTcuMTY1NVYxNy4yMTMxSDEwVjE3LjE2NTVIOFpNOCAxNy4xMTgxVjE3LjE2NTVIMTBWMTcuMTE4MUg4Wk04IDE3LjA3MDdWMTcuMTE4MUgxMFYxNy4wNzA3SDhaTTggMTcuMDIzNFYxNy4wNzA3SDEwVjE3LjAyMzRIOFpNOCAxNi45NzYxVjE3LjAyMzRIMTBWMTYuOTc2MUg4Wk04IDE2LjkyOVYxNi45NzYxSDEwVjE2LjkyOUg4Wk04IDE2Ljg4MTlWMTYuOTI5SDEwVjE2Ljg4MTlIOFpNOCAxNi44MzQ5VjE2Ljg4MTlIMTBWMTYuODM0OUg4Wk04IDE2Ljc4OFYxNi44MzQ5SDEwVjE2Ljc4OEg4Wk04IDE2Ljc0MTJWMTYuNzg4SDEwVjE2Ljc0MTJIOFpNOCAxNi42OTQ0VjE2Ljc0MTJIMTBWMTYuNjk0NEg4Wk04IDE2LjY0NzdWMTYuNjk0NEgxMFYxNi42NDc3SDhaTTggMTYuNjAxMVYxNi42NDc3SDEwVjE2LjYwMTFIOFpNOCAxNi41NTQ2VjE2LjYwMTFIMTBWMTYuNTU0Nkg4Wk04IDE2LjUwODJWMTYuNTU0NkgxMFYxNi41MDgySDhaTTggMTYuNDYxOFYxNi41MDgySDEwVjE2LjQ2MThIOFpNOCAxNi40MTU1VjE2LjQ2MThIMTBWMTYuNDE1NUg4Wk04IDE2LjM2OTNWMTYuNDE1NUgxMFYxNi4zNjkzSDhaTTggMTYuMzIzMlYxNi4zNjkzSDEwVjE2LjMyMzJIOFpNOCAxNi4yNzcxVjE2LjMyMzJIMTBWMTYuMjc3MUg4Wk04IDE2LjIzMTJWMTYuMjc3MUgxMFYxNi4yMzEySDhaTTggMTYuMTg1M1YxNi4yMzEySDEwVjE2LjE4NTNIOFpNOCAxNi4xMzk1VjE2LjE4NTNIMTBWMTYuMTM5NUg4Wk04IDE2LjA5MzdWMTYuMTM5NUgxMFYxNi4wOTM3SDhaTTggMTYuMDQ4MVYxNi4wOTM3SDEwVjE2LjA0ODFIOFpNOCAxNi4wMDI1VjE2LjA0ODFIMTBWMTYuMDAyNUg4Wk04IDE1Ljk1N1YxNi4wMDI1SDEwVjE1Ljk1N0g4Wk04IDE1LjkxMTZWMTUuOTU3SDEwVjE1LjkxMTZIOFpNOCAxNS44NjYzVjE1LjkxMTZIMTBWMTUuODY2M0g4Wk04IDE1LjgyMVYxNS44NjYzSDEwVjE1LjgyMUg4Wk04IDE1Ljc3NTlWMTUuODIxSDEwVjE1Ljc3NTlIOFpNOCAxNS43MzA4VjE1Ljc3NTlIMTBWMTUuNzMwOEg4Wk04IDE1LjY4NThWMTUuNzMwOEgxMFYxNS42ODU4SDhaTTggMTUuNjQwOFYxNS42ODU4SDEwVjE1LjY0MDhIOFpNOCAxNS41OTZWMTUuNjQwOEgxMFYxNS41OTZIOFpNOCAxNS41NTEyVjE1LjU5NkgxMFYxNS41NTEySDhaTTggMTUuNTA2NVYxNS41NTEySDEwVjE1LjUwNjVIOFpNOCAxNS40NjE5VjE1LjUwNjVIMTBWMTUuNDYxOUg4Wk04IDE1LjQxNzRWMTUuNDYxOUgxMFYxNS40MTc0SDhaTTggMTUuMzczVjE1LjQxNzRIMTBWMTUuMzczSDhaTTggMTUuMzI4NlYxNS4zNzNIMTBWMTUuMzI4Nkg4Wk04IDE1LjI4NDNWMTUuMzI4NkgxMFYxNS4yODQzSDhaTTggMTUuMjQwMVYxNS4yODQzSDEwVjE1LjI0MDFIOFpNOCAxNS4xOTZWMTUuMjQwMUgxMFYxNS4xOTZIOFpNOCAxNS4xNTJWMTUuMTk2SDEwVjE1LjE1Mkg4Wk04IDE1LjEwOFYxNS4xNTJIMTBWMTUuMTA4SDhaTTggMTUuMDY0MVYxNS4xMDhIMTBWMTUuMDY0MUg4Wk04IDE1LjAyMDNWMTUuMDY0MUgxMFYxNS4wMjAzSDhaTTggMTQuOTc2NlYxNS4wMjAzSDEwVjE0Ljk3NjZIOFpNOCAxNC45MzNWMTQuOTc2NkgxMFYxNC45MzNIOFpNOCAxNC44ODk0VjE0LjkzM0gxMFYxNC44ODk0SDhaTTggMTQuODQ1OVYxNC44ODk0SDEwVjE0Ljg0NTlIOFpNOCAxNC44MDI1VjE0Ljg0NTlIMTBWMTQuODAyNUg4Wk04IDE0Ljc1OTJWMTQuODAyNUgxMFYxNC43NTkySDhaTTggMTQuNzE2VjE0Ljc1OTJIMTBWMTQuNzE2SDhaTTggMTQuNjcyOVYxNC43MTZIMTBWMTQuNjcyOUg4Wk04IDE0LjYyOThWMTQuNjcyOUgxMFYxNC42Mjk4SDhaTTggMTQuNTg2OFYxNC42Mjk4SDEwVjE0LjU4NjhIOFpNOCAxNC41NDM5VjE0LjU4NjhIMTBWMTQuNTQzOUg4Wk04IDE0LjUwMTFWMTQuNTQzOUgxMFYxNC41MDExSDhaTTggMTQuNDU4NFYxNC41MDExSDEwVjE0LjQ1ODRIOFpNOCAxNC40MTU3VjE0LjQ1ODRIMTBWMTQuNDE1N0g4Wk04IDE0LjM3MzFWMTQuNDE1N0gxMFYxNC4zNzMxSDhaTTggMTQuMzMwNlYxNC4zNzMxSDEwVjE0LjMzMDZIOFpNOCAxNC4yODgyVjE0LjMzMDZIMTBWMTQuMjg4Mkg4Wk04IDE0LjI0NTlWMTQuMjg4MkgxMFYxNC4yNDU5SDhaTTggMTQuMjAzN1YxNC4yNDU5SDEwVjE0LjIwMzdIOFpNOCAxNC4xNjE1VjE0LjIwMzdIMTBWMTQuMTYxNUg4Wk04IDE0LjExOTRWMTQuMTYxNUgxMFYxNC4xMTk0SDhaTTggMTQuMDc3NFYxNC4xMTk0SDEwVjE0LjA3NzRIOFpNOCAxNC4wMzU1VjE0LjA3NzRIMTBWMTQuMDM1NUg4Wk04IDEzLjk5MzdWMTQuMDM1NUgxMFYxMy45OTM3SDhaTTggMTMuOTUxOVYxMy45OTM3SDEwVjEzLjk1MTlIOFpNOCAxMy45MTAzVjEzLjk1MTlIMTBWMTMuOTEwM0g4Wk04IDEzLjg2ODdWMTMuOTEwM0gxMFYxMy44Njg3SDhaTTggMTMuODI3MlYxMy44Njg3SDEwVjEzLjgyNzJIOFpNOCAxMy43ODU4VjEzLjgyNzJIMTBWMTMuNzg1OEg4Wk04IDEzLjc0NDRWMTMuNzg1OEgxMFYxMy43NDQ0SDhaTTggMTMuNzAzMlYxMy43NDQ0SDEwVjEzLjcwMzJIOFpNOCAxMy42NjJWMTMuNzAzMkgxMFYxMy42NjJIOFpNOCAxMy42MjA5VjEzLjY2MkgxMFYxMy42MjA5SDhaTTggMTMuNTc5OVYxMy42MjA5SDEwVjEzLjU3OTlIOFpNOCAxMy41MzlWMTMuNTc5OUgxMFYxMy41MzlIOFpNOCAxMy40OTgyVjEzLjUzOUgxMFYxMy40OTgySDhaTTggMTMuNDU3NFYxMy40OTgySDEwVjEzLjQ1NzRIOFpNOCAxMy40MTY4VjEzLjQ1NzRIMTBWMTMuNDE2OEg4Wk04IDEzLjM3NjJWMTMuNDE2OEgxMFYxMy4zNzYySDhaTTggMTMuMzM1N1YxMy4zNzYySDEwVjEzLjMzNTdIOFpNOCAxMy4yOTUzVjEzLjMzNTdIMTBWMTMuMjk1M0g4Wk04IDEzLjI1NDlWMTMuMjk1M0gxMFYxMy4yNTQ5SDhaTTggMTMuMjE0N1YxMy4yNTQ5SDEwVjEzLjIxNDdIOFpNOCAxMy4xNzQ1VjEzLjIxNDdIMTBWMTMuMTc0NUg4Wk04IDEzLjEzNDVWMTMuMTc0NUgxMFYxMy4xMzQ1SDhaTTggMTMuMDk0NVYxMy4xMzQ1SDEwVjEzLjA5NDVIOFpNOCAxMy4wNTQ1VjEzLjA5NDVIMTBWMTMuMDU0NUg4Wk04IDEzLjAxNDdWMTMuMDU0NUgxMFYxMy4wMTQ3SDhaTTggMTIuOTc1VjEzLjAxNDdIMTBWMTIuOTc1SDhaTTggMTIuOTM1M1YxMi45NzVIMTBWMTIuOTM1M0g4Wk04IDEyLjg5NTdWMTIuOTM1M0gxMFYxMi44OTU3SDhaTTggMTIuODU2M1YxMi44OTU3SDEwVjEyLjg1NjNIOFpNOCAxMi44MTY4VjEyLjg1NjNIMTBWMTIuODE2OEg4Wk04IDEyLjc3NzVWMTIuODE2OEgxMFYxMi43Nzc1SDhaTTggMTIuNzM4M1YxMi43Nzc1SDEwVjEyLjczODNIOFpNOCAxMi42OTkxVjEyLjczODNIMTBWMTIuNjk5MUg4Wk04IDEyLjY2MDFWMTIuNjk5MUgxMFYxMi42NjAxSDhaTTggMTIuNjIxMVYxMi42NjAxSDEwVjEyLjYyMTFIOFpNOCAxMi41ODIyVjEyLjYyMTFIMTBWMTIuNTgyMkg4Wk04IDEyLjU0MzRWMTIuNTgyMkgxMFYxMi41NDM0SDhaTTggMTIuNTA0NlYxMi41NDM0SDEwVjEyLjUwNDZIOFpNOCAxMi40NjZWMTIuNTA0NkgxMFYxMi40NjZIOFpNOCAxMi40Mjc0VjEyLjQ2NkgxMFYxMi40Mjc0SDhaTTggMTIuMzg5VjEyLjQyNzRIMTBWMTIuMzg5SDhaTTggMTIuMzUwNlYxMi4zODlIMTBWMTIuMzUwNkg4Wk04IDEyLjMxMjNWMTIuMzUwNkgxMFYxMi4zMTIzSDhaTTggMTIuMjc0MVYxMi4zMTIzSDEwVjEyLjI3NDFIOFpNOCAxMi4yMzU5VjEyLjI3NDFIMTBWMTIuMjM1OUg4Wk04IDEyLjE5NzlWMTIuMjM1OUgxMFYxMi4xOTc5SDhaTTggMTIuMTU5OVYxMi4xOTc5SDEwVjEyLjE1OTlIOFpNOCAxMi4xMjIxVjEyLjE1OTlIMTBWMTIuMTIyMUg4Wk04IDEyLjA4NDNWMTIuMTIyMUgxMFYxMi4wODQzSDhaTTggMTIuMDQ2NlYxMi4wODQzSDEwVjEyLjA0NjZIOFpNOCAxMi4wMDg5VjEyLjA0NjZIMTBWMTIuMDA4OUg4Wk04IDEyVjEyLjAwODlIMTBWMTJIOFpNOS41IDExSDlWMTNIOS41VjExWk05IDExLjVDOSAxMS4yMjM5IDkuMjIzODYgMTEgOS41IDExVjEzQzEwLjMyODQgMTMgMTEgMTIuMzI4NCAxMSAxMS41SDlaTTkuNSAxMkM5LjIyMzg2IDEyIDkgMTEuNzc2MSA5IDExLjVIMTFDMTEgMTAuNjcxNiAxMC4zMjg0IDEwIDkuNSAxMFYxMlpNOSAxMkg5LjVWMTBIOVYxMlpNOCAxMC45OTA4VjExSDEwVjEwLjk5MDhIOFpNOCAxMC45NTU3VjEwLjk5MDhIMTBWMTAuOTU1N0g4Wk04IDEwLjkyMDZWMTAuOTU1N0gxMFYxMC45MjA2SDhaTTggMTAuODg1N1YxMC45MjA2SDEwVjEwLjg4NTdIOFpNOCAxMC44NTA5VjEwLjg4NTdIMTBWMTAuODUwOUg4Wk04IDEwLjgxNjFWMTAuODUwOUgxMFYxMC44MTYxSDhaTTggMTAuNzgxNVYxMC44MTYxSDEwVjEwLjc4MTVIOFpNOCAxMC43NDY5VjEwLjc4MTVIMTBWMTAuNzQ2OUg4Wk04IDEwLjcxMjRWMTAuNzQ2OUgxMFYxMC43MTI0SDhaTTggMTAuNjc4VjEwLjcxMjRIMTBWMTAuNjc4SDhaTTggMTAuNjQzN1YxMC42NzhIMTBWMTAuNjQzN0g4Wk04IDEwLjYwOTVWMTAuNjQzN0gxMFYxMC42MDk1SDhaTTggMTAuNTc1M1YxMC42MDk1SDEwVjEwLjU3NTNIOFpNOCAxMC41NDEzVjEwLjU3NTNIMTBWMTAuNTQxM0g4Wk04IDEwLjUwNzNWMTAuNTQxM0gxMFYxMC41MDczSDhaTTggMTAuNDczNVYxMC41MDczSDEwVjEwLjQ3MzVIOFpNOCAxMC40Mzk3VjEwLjQ3MzVIMTBWMTAuNDM5N0g4Wk04IDEwLjQwNlYxMC40Mzk3SDEwVjEwLjQwNkg4Wk04IDEwLjM3MjRWMTAuNDA2SDEwVjEwLjM3MjRIOFpNOCAxMC4zMzg5VjEwLjM3MjRIMTBWMTAuMzM4OUg4Wk04IDEwLjMwNTRWMTAuMzM4OUgxMFYxMC4zMDU0SDhaTTggMTAuMjcyMVYxMC4zMDU0SDEwVjEwLjI3MjFIOFpNOCAxMC4yMzg5VjEwLjI3MjFIMTBWMTAuMjM4OUg4Wk04IDEwLjIwNTdWMTAuMjM4OUgxMFYxMC4yMDU3SDhaTTggMTAuMTcyNlYxMC4yMDU3SDEwVjEwLjE3MjZIOFpNOCAxMC4xMzk2VjEwLjE3MjZIMTBWMTAuMTM5Nkg4Wk04IDEwLjEwNjhWMTAuMTM5NkgxMFYxMC4xMDY4SDhaTTggMTAuMDc0VjEwLjEwNjhIMTBWMTAuMDc0SDhaTTggMTAuMDQxMlYxMC4wNzRIMTBWMTAuMDQxMkg4Wk04IDEwLjAwODZWMTAuMDQxMkgxMFYxMC4wMDg2SDhaTTggOS45NzYwOFYxMC4wMDg2SDEwVjkuOTc2MDhIOFpNOCA5Ljk0MzY0VjkuOTc2MDhIMTBWOS45NDM2NEg4Wk04IDkuOTExMjhWOS45NDM2NEgxMFY5LjkxMTI4SDhaTTggOS44NzkwMlY5LjkxMTI4SDEwVjkuODc5MDJIOFpNOCA5Ljg0Njg0VjkuODc5MDJIMTBWOS44NDY4NEg4Wk04IDkuODE0NzZWOS44NDY4NEgxMFY5LjgxNDc2SDhaTTggOS43ODI3NlY5LjgxNDc2SDEwVjkuNzgyNzZIOFpNOCA5Ljc1MDg1VjkuNzgyNzZIMTBWOS43NTA4NUg4Wk04IDkuNzE5MDRWOS43NTA4NUgxMFY5LjcxOTA0SDhaTTggOS42ODczMVY5LjcxOTA0SDEwVjkuNjg3MzFIOFpNOCA5LjY1NTY3VjkuNjg3MzFIMTBWOS42NTU2N0g4Wk04IDkuNjI0MTNWOS42NTU2N0gxMFY5LjYyNDEzSDhaTTggOS41OTI2N1Y5LjYyNDEzSDEwVjkuNTkyNjdIOFpNOCA5LjU2MTNWOS41OTI2N0gxMFY5LjU2MTNIOFpNOCA5LjUzMDAzVjkuNTYxM0gxMFY5LjUzMDAzSDhaTTggOS40OTg4NFY5LjUzMDAzSDEwVjkuNDk4ODRIOFpNOCA5LjQ2Nzc1VjkuNDk4ODRIMTBWOS40Njc3NUg4Wk04IDkuNDM2NzRWOS40Njc3NUgxMFY5LjQzNjc0SDhaTTggOS40MDU4M1Y5LjQzNjc0SDEwVjkuNDA1ODNIOFpNOCA5LjM3NTAxVjkuNDA1ODNIMTBWOS4zNzUwMUg4Wk04IDkuMzQ0MjdWOS4zNzUwMUgxMFY5LjM0NDI3SDhaTTggOS4zMTM2M1Y5LjM0NDI3SDEwVjkuMzEzNjNIOFpNOCA5LjI4MzA4VjkuMzEzNjNIMTBWOS4yODMwOEg4Wk04IDkuMjUyNjJWOS4yODMwOEgxMFY5LjI1MjYySDhaTTggOS4yMjIyNVY5LjI1MjYySDEwVjkuMjIyMjVIOFpNOCA5LjE5MTk3VjkuMjIyMjVIMTBWOS4xOTE5N0g4Wk04IDkuMTYxNzhWOS4xOTE5N0gxMFY5LjE2MTc4SDhaTTggOS4xMzE2OVY5LjE2MTc4SDEwVjkuMTMxNjlIOFpNOCA5LjEwMTY4VjkuMTMxNjlIMTBWOS4xMDE2OEg4Wk04IDkuMDcxNzdWOS4xMDE2OEgxMFY5LjA3MTc3SDhaTTggOS4wNDE5NVY5LjA3MTc3SDEwVjkuMDQxOTVIOFpNOCA5LjAxMjIyVjkuMDQxOTVIMTBWOS4wMTIyMkg4Wk04IDguOTgyNThWOS4wMTIyMkgxMFY4Ljk4MjU4SDhaTTggOC45NTMwM1Y4Ljk4MjU4SDEwVjguOTUzMDNIOFpNOCA4LjkyMzU3VjguOTUzMDNIMTBWOC45MjM1N0g4Wk04IDguODk0MjFWOC45MjM1N0gxMFY4Ljg5NDIxSDhaTTggOC44NjQ5M1Y4Ljg5NDIxSDEwVjguODY0OTNIOFpNOCA4LjgzNTc1VjguODY0OTNIMTBWOC44MzU3NUg4Wk04IDguODA2NjZWOC44MzU3NUgxMFY4LjgwNjY2SDhaTTggOC43Nzc2NlY4LjgwNjY2SDEwVjguNzc3NjZIOFpNOCA4Ljc0ODc2VjguNzc3NjZIMTBWOC43NDg3Nkg4Wk04IDguNzE5OTRWOC43NDg3NkgxMFY4LjcxOTk0SDhaTTggOC42OTEyMlY4LjcxOTk0SDEwVjguNjkxMjJIOFpNOCA4LjY2MjU5VjguNjkxMjJIMTBWOC42NjI1OUg4Wk04IDguNjM0MDVWOC42NjI1OUgxMFY4LjYzNDA1SDhaTTggOC42MDU2MVY4LjYzNDA1SDEwVjguNjA1NjFIOFpNOCA4LjU3NzI1VjguNjA1NjFIMTBWOC41NzcyNUg4Wk04IDguNTQ4OTlWOC41NzcyNUgxMFY4LjU0ODk5SDhaTTggOC41MjA4MlY4LjU0ODk5SDEwVjguNTIwODJIOFpNOCA4LjQ5Mjc1VjguNTIwODJIMTBWOC40OTI3NUg4Wk04IDguNDY0NzZWOC40OTI3NUgxMFY4LjQ2NDc2SDhaTTggOC40MzY4N1Y4LjQ2NDc2SDEwVjguNDM2ODdIOFpNOCA4LjQwOTA3VjguNDM2ODdIMTBWOC40MDkwN0g4Wk04IDguMzgxMzdWOC40MDkwN0gxMFY4LjM4MTM3SDhaTTggOC4zNTM3NlY4LjM4MTM3SDEwVjguMzUzNzZIOFpNOCA4LjMyNjI0VjguMzUzNzZIMTBWOC4zMjYyNEg4Wk04IDguMjk4ODFWOC4zMjYyNEgxMFY4LjI5ODgxSDhaTTggOC4yNzE0N1Y4LjI5ODgxSDEwVjguMjcxNDdIOFpNOCA4LjI0NDIzVjguMjcxNDdIMTBWOC4yNDQyM0g4Wk04IDguMjE3MDlWOC4yNDQyM0gxMFY4LjIxNzA5SDhaTTggOC4xOTAwM1Y4LjIxNzA5SDEwVjguMTkwMDNIOFpNOCA4LjE2MzA3VjguMTkwMDNIMTBWOC4xNjMwN0g4Wk04IDguMTM2MlY4LjE2MzA3SDEwVjguMTM2Mkg4Wk04IDguMTA5NDNWOC4xMzYySDEwVjguMTA5NDNIOFpNOCA4LjA4Mjc0VjguMTA5NDNIMTBWOC4wODI3NEg4Wk04IDguMDU2MTZWOC4wODI3NEgxMFY4LjA1NjE2SDhaTTggOC4wMjk2NlY4LjA1NjE2SDEwVjguMDI5NjZIOFpNOCA4LjAwMzI2VjguMDI5NjZIMTBWOC4wMDMyNkg4Wk04IDcuOTc2OTVWOC4wMDMyNkgxMFY3Ljk3Njk1SDhaTTggNy45NTA3NFY3Ljk3Njk1SDEwVjcuOTUwNzRIOFpNOCA3LjkyNDYyVjcuOTUwNzRIMTBWNy45MjQ2Mkg4Wk04IDcuODk4NlY3LjkyNDYySDEwVjcuODk4Nkg4Wk04IDcuODcyNjZWNy44OTg2SDEwVjcuODcyNjZIOFpNOCA3Ljg0NjgzVjcuODcyNjZIMTBWNy44NDY4M0g4Wk04IDcuODIxMDhWNy44NDY4M0gxMFY3LjgyMTA4SDhaTTggNy43OTU0M1Y3LjgyMTA4SDEwVjcuNzk1NDNIOFpNOCA3Ljc2OTg4VjcuNzk1NDNIMTBWNy43Njk4OEg4Wk04IDcuNzQ0NDFWNy43Njk4OEgxMFY3Ljc0NDQxSDhaTTggNy43MTkwNVY3Ljc0NDQxSDEwVjcuNzE5MDVIOFpNOCA3LjY5Mzc4VjcuNzE5MDVIMTBWNy42OTM3OEg4Wk04IDcuNjY4NlY3LjY5Mzc4SDEwVjcuNjY4Nkg4Wk04IDcuNjQzNTFWNy42Njg2SDEwVjcuNjQzNTFIOFpNOCA3LjYxODUyVjcuNjQzNTFIMTBWNy42MTg1Mkg4Wk04IDcuNTkzNjNWNy42MTg1MkgxMFY3LjU5MzYzSDhaTTggNy41Njg4M1Y3LjU5MzYzSDEwVjcuNTY4ODNIOFpNOCA3LjU0NDEyVjcuNTY4ODNIMTBWNy41NDQxMkg4Wk04IDcuNTE5NTFWNy41NDQxMkgxMFY3LjUxOTUxSDhaTTggNy40OTVWNy41MTk1MUgxMFY3LjQ5NUg4Wk04IDcuNDcwNThWNy40OTVIMTBWNy40NzA1OEg4Wk04IDcuNDQ2MjVWNy40NzA1OEgxMFY3LjQ0NjI1SDhaTTggNy40MjIwMlY3LjQ0NjI1SDEwVjcuNDIyMDJIOFpNOCA3LjM5Nzg4VjcuNDIyMDJIMTBWNy4zOTc4OEg4Wk04IDcuMzczODRWNy4zOTc4OEgxMFY3LjM3Mzg0SDhaTTggNy4zNDk5VjcuMzczODRIMTBWNy4zNDk5SDhaTTggNy4zMjYwNVY3LjM0OTlIMTBWNy4zMjYwNUg4Wk04IDcuMzAyMjlWNy4zMjYwNUgxMFY3LjMwMjI5SDhaTTggNy4yNzg2NFY3LjMwMjI5SDEwVjcuMjc4NjRIOFpNOCA3LjI1NTA3VjcuMjc4NjRIMTBWNy4yNTUwN0g4Wk04IDcuMjMxNlY3LjI1NTA3SDEwVjcuMjMxNkg4Wk04IDcuMjA4MjNWNy4yMzE2SDEwVjcuMjA4MjNIOFpNOCA3LjE4NDk1VjcuMjA4MjNIMTBWNy4xODQ5NUg4Wk04IDcuMTYxNzdWNy4xODQ5NUgxMFY3LjE2MTc3SDhaTTggNy4xMzg2OVY3LjE2MTc3SDEwVjcuMTM4NjlIOFpNOCA3LjExNTdWNy4xMzg2OUgxMFY3LjExNTdIOFpNOCA3LjA5MjhWNy4xMTU3SDEwVjcuMDkyOEg4Wk04IDcuMDcwMDFWNy4wOTI4SDEwVjcuMDcwMDFIOFpNOCA3LjA0NzMxVjcuMDcwMDFIMTBWNy4wNDczMUg4Wk04IDcuMDI0N1Y3LjA0NzMxSDEwVjcuMDI0N0g4Wk04IDcuMDAyMTlWNy4wMjQ3SDEwVjcuMDAyMTlIOFpNOCA2Ljk3OTc4VjcuMDAyMTlIMTBWNi45Nzk3OEg4Wk04IDYuOTU3NDZWNi45Nzk3OEgxMFY2Ljk1NzQ2SDhaTTggNi45MzUyNFY2Ljk1NzQ2SDEwVjYuOTM1MjRIOFpNOCA2LjkxMzEyVjYuOTM1MjRIMTBWNi45MTMxMkg4Wk04IDYuODkxMDlWNi45MTMxMkgxMFY2Ljg5MTA5SDhaTTggNi44NjkxNlY2Ljg5MTA5SDEwVjYuODY5MTZIOFpNOCA2Ljg0NzMyVjYuODY5MTZIMTBWNi44NDczMkg4Wk04IDYuODI1NThWNi44NDczMkgxMFY2LjgyNTU4SDhaTTggNi44MDM5NFY2LjgyNTU4SDEwVjYuODAzOTRIOFpNOCA2Ljc4MjRWNi44MDM5NEgxMFY2Ljc4MjRIOFpNOCA2Ljc2MDk1VjYuNzgyNEgxMFY2Ljc2MDk1SDhaTTggNi43Mzk2VjYuNzYwOTVIMTBWNi43Mzk2SDhaTTggNi43MTgzNVY2LjczOTZIMTBWNi43MTgzNUg4Wk04IDYuNjk3MTlWNi43MTgzNUgxMFY2LjY5NzE5SDhaTTggNi42NzYxM1Y2LjY5NzE5SDEwVjYuNjc2MTNIOFpNOCA2LjY1NTE3VjYuNjc2MTNIMTBWNi42NTUxN0g4Wk04IDYuNjM0MzFWNi42NTUxN0gxMFY2LjYzNDMxSDhaTTggNi42MTM1NFY2LjYzNDMxSDEwVjYuNjEzNTRIOFpNOCA2LjU5Mjg3VjYuNjEzNTRIMTBWNi41OTI4N0g4Wk04IDYuNTcyMjlWNi41OTI4N0gxMFY2LjU3MjI5SDhaTTggNi41NTE4MlY2LjU3MjI5SDEwVjYuNTUxODJIOFpNOCA2LjUzMTQ0VjYuNTUxODJIMTBWNi41MzE0NEg4Wk04IDYuNTExMTZWNi41MzE0NEgxMFY2LjUxMTE2SDhaTTggNi40OTA5OFY2LjUxMTE2SDEwVjYuNDkwOThIOFpNOCA2LjQ3MDg5VjYuNDkwOThIMTBWNi40NzA4OUg4Wk04IDYuNDUwOTFWNi40NzA4OUgxMFY2LjQ1MDkxSDhaTTggNi40MzEwMlY2LjQ1MDkxSDEwVjYuNDMxMDJIOFpNOCA2LjQxMTIyVjYuNDMxMDJIMTBWNi40MTEyMkg4Wk04IDYuMzkxNTNWNi40MTEyMkgxMFY2LjM5MTUzSDhaTTggNi4zNzE5NFY2LjM5MTUzSDEwVjYuMzcxOTRIOFpNOCA2LjM1MjQ0VjYuMzcxOTRIMTBWNi4zNTI0NEg4Wk04IDYuMzMzMDRWNi4zNTI0NEgxMFY2LjMzMzA0SDhaTTggNi4zMTM3NFY2LjMzMzA0SDEwVjYuMzEzNzRIOFpNOCA2LjI5NDU0VjYuMzEzNzRIMTBWNi4yOTQ1NEg4Wk04IDYuMjc1NDNWNi4yOTQ1NEgxMFY2LjI3NTQzSDhaTTggNi4yNTY0M1Y2LjI3NTQzSDEwVjYuMjU2NDNIOFpNOCA2LjIzNzUyVjYuMjU2NDNIMTBWNi4yMzc1Mkg4Wk04IDYuMjE4NzFWNi4yMzc1MkgxMFY2LjIxODcxSDhaTTggNi4yVjYuMjE4NzFIMTBWNi4ySDhaTTggNi4xODEzOVY2LjJIMTBWNi4xODEzOUg4Wk04IDYuMTYyODdWNi4xODEzOUgxMFY2LjE2Mjg3SDhaTTggNi4xNDQ0NlY2LjE2Mjg3SDEwVjYuMTQ0NDZIOFpNOCA2LjEyNjE1VjYuMTQ0NDZIMTBWNi4xMjYxNUg4Wk04IDYuMTA3OTNWNi4xMjYxNUgxMFY2LjEwNzkzSDhaTTggNi4wODk4MVY2LjEwNzkzSDEwVjYuMDg5ODFIOFpNOCA2LjA3MTc5VjYuMDg5ODFIMTBWNi4wNzE3OUg4Wk04IDYuMDUzODdWNi4wNzE3OUgxMFY2LjA1Mzg3SDhaTTggNi4wMzYwNVY2LjA1Mzg3SDEwVjYuMDM2MDVIOFpNOCA2LjAxODMzVjYuMDM2MDVIMTBWNi4wMTgzM0g4Wk04IDYuMDAwNzFWNi4wMTgzM0gxMFY2LjAwMDcxSDhaTTggNS45ODMxOVY2LjAwMDcxSDEwVjUuOTgzMTlIOFpNOCA1Ljk2NTc3VjUuOTgzMTlIMTBWNS45NjU3N0g4Wk04IDUuOTQ4NDRWNS45NjU3N0gxMFY1Ljk0ODQ0SDhaTTggNS45MzEyMlY1Ljk0ODQ0SDEwVjUuOTMxMjJIOFpNOCA1LjkxNDFWNS45MzEyMkgxMFY1LjkxNDFIOFpNOCA1Ljg5NzA3VjUuOTE0MUgxMFY1Ljg5NzA3SDhaTTggNS44ODAxNVY1Ljg5NzA3SDEwVjUuODgwMTVIOFpNOCA1Ljg2MzMyVjUuODgwMTVIMTBWNS44NjMzMkg4Wk04IDUuODQ2NlY1Ljg2MzMySDEwVjUuODQ2Nkg4Wk04IDUuODI5OTdWNS44NDY2SDEwVjUuODI5OTdIOFpNOCA1LjgxMzQ1VjUuODI5OTdIMTBWNS44MTM0NUg4Wk04IDUuNzk3MDJWNS44MTM0NUgxMFY1Ljc5NzAySDhaTTggNS43ODA3VjUuNzk3MDJIMTBWNS43ODA3SDhaTTggNS43NjQ0N1Y1Ljc4MDdIMTBWNS43NjQ0N0g4Wk04IDUuNzQ4MzVWNS43NjQ0N0gxMFY1Ljc0ODM1SDhaTTggNS43MzIzMlY1Ljc0ODM1SDEwVjUuNzMyMzJIOFpNOCA1LjcxNjRWNS43MzIzMkgxMFY1LjcxNjRIOFpNOCA1LjcwMDU3VjUuNzE2NEgxMFY1LjcwMDU3SDhaTTggNS42ODQ4NVY1LjcwMDU3SDEwVjUuNjg0ODVIOFpNOCA1LjY2OTIzVjUuNjg0ODVIMTBWNS42NjkyM0g4Wk04IDUuNjUzNzFWNS42NjkyM0gxMFY1LjY1MzcxSDhaTTggNS42MzgyOFY1LjY1MzcxSDEwVjUuNjM4MjhIOFpNOCA1LjYyMjk2VjUuNjM4MjhIMTBWNS42MjI5Nkg4Wk04IDUuNjA3NzRWNS42MjI5NkgxMFY1LjYwNzc0SDhaTTggNS41OTI2MlY1LjYwNzc0SDEwVjUuNTkyNjJIOFpNOCA1LjU3NzYxVjUuNTkyNjJIMTBWNS41Nzc2MUg4Wk04IDUuNTYyNjlWNS41Nzc2MUgxMFY1LjU2MjY5SDhaTTggNS41NDc4N1Y1LjU2MjY5SDEwVjUuNTQ3ODdIOFpNOCA1LjUzMzE2VjUuNTQ3ODdIMTBWNS41MzMxNkg4Wk04IDUuNTE4NTRWNS41MzMxNkgxMFY1LjUxODU0SDhaTTggNS41MDQwM1Y1LjUxODU0SDEwVjUuNTA0MDNIOFpNOCA1LjQ4OTYyVjUuNTA0MDNIMTBWNS40ODk2Mkg4Wk04IDUuNDc1MzFWNS40ODk2MkgxMFY1LjQ3NTMxSDhaTTggNS40NjExVjUuNDc1MzFIMTBWNS40NjExSDhaTTggNS40NDY5OVY1LjQ2MTFIMTBWNS40NDY5OUg4Wk04IDUuNDMyOTlWNS40NDY5OUgxMFY1LjQzMjk5SDhaTTggNS40MTkwOFY1LjQzMjk5SDEwVjUuNDE5MDhIOFpNOCA1LjQwNTI4VjUuNDE5MDhIMTBWNS40MDUyOEg4Wk04IDUuMzkxNThWNS40MDUyOEgxMFY1LjM5MTU4SDhaTTggNS4zNzc5OFY1LjM5MTU4SDEwVjUuMzc3OThIOFpNOCA1LjM2NDQ5VjUuMzc3OThIMTBWNS4zNjQ0OUg4Wk04IDUuMzUxMDlWNS4zNjQ0OUgxMFY1LjM1MTA5SDhaTTggNS4zMzc4VjUuMzUxMDlIMTBWNS4zMzc4SDhaTTggNS4zMjQ2MVY1LjMzNzhIMTBWNS4zMjQ2MUg4Wk04IDUuMzExNTJWNS4zMjQ2MUgxMFY1LjMxMTUySDhaTTggNS4yOTg1M1Y1LjMxMTUySDEwVjUuMjk4NTNIOFpNOCA1LjI4NTY1VjUuMjk4NTNIMTBWNS4yODU2NUg4Wk04IDUuMjcyODZWNS4yODU2NUgxMFY1LjI3Mjg2SDhaTTggNS4yNjAxOFY1LjI3Mjg2SDEwVjUuMjYwMThIOFpNOCA1LjI0NzYxVjUuMjYwMThIMTBWNS4yNDc2MUg4Wk04IDUuMjM1MTNWNS4yNDc2MUgxMFY1LjIzNTEzSDhaTTggNS4yMjI3NlY1LjIzNTEzSDEwVjUuMjIyNzZIOFpNOCA1LjIxMDQ5VjUuMjIyNzZIMTBWNS4yMTA0OUg4Wk04IDUuMTk4MzJWNS4yMTA0OUgxMFY1LjE5ODMySDhaTTggNS4xODYyNlY1LjE5ODMySDEwVjUuMTg2MjZIOFpNOCA1LjE3NDI5VjUuMTg2MjZIMTBWNS4xNzQyOUg4Wk04IDUuMTYyNDRWNS4xNzQyOUgxMFY1LjE2MjQ0SDhaTTggNS4xNTA2OFY1LjE2MjQ0SDEwVjUuMTUwNjhIOFpNOCA1LjEzOTAzVjUuMTUwNjhIMTBWNS4xMzkwM0g4Wk04IDUuMTI3NDhWNS4xMzkwM0gxMFY1LjEyNzQ4SDhaTTggNS4xMTYwM1Y1LjEyNzQ4SDEwVjUuMTE2MDNIOFpNOCA1LjEwNDY5VjUuMTE2MDNIMTBWNS4xMDQ2OUg4Wk04IDUuMDkzNDRWNS4xMDQ2OUgxMFY1LjA5MzQ0SDhaTTggNS4wODIzMVY1LjA5MzQ0SDEwVjUuMDgyMzFIOFpNOCA1LjA3MTI3VjUuMDgyMzFIMTBWNS4wNzEyN0g4Wk04IDUuMDYwMzRWNS4wNzEyN0gxMFY1LjA2MDM0SDhaTTggNS4wNDk1MlY1LjA2MDM0SDEwVjUuMDQ5NTJIOFpNOCA1LjAzODc5VjUuMDQ5NTJIMTBWNS4wMzg3OUg4Wk04IDUuMDI4MTdWNS4wMzg3OUgxMFY1LjAyODE3SDhaTTggNS4wMTc2NlY1LjAyODE3SDEwVjUuMDE3NjZIOFpNOCA1LjAwNzI0VjUuMDE3NjZIMTBWNS4wMDcyNEg4Wk04IDQuOTk2OTNWNS4wMDcyNEgxMFY0Ljk5NjkzSDhaTTggNC45ODY3M1Y0Ljk5NjkzSDEwVjQuOTg2NzNIOFpNOCA0Ljk3NjYzVjQuOTg2NzNIMTBWNC45NzY2M0g4Wk04IDQuOTY2NjNWNC45NzY2M0gxMFY0Ljk2NjYzSDhaTTggNC45NTY3NFY0Ljk2NjYzSDEwVjQuOTU2NzRIOFpNOCA0Ljk0Njk1VjQuOTU2NzRIMTBWNC45NDY5NUg4Wk04IDQuOTM3MjdWNC45NDY5NUgxMFY0LjkzNzI3SDhaTTggNC45Mjc2OFY0LjkzNzI3SDEwVjQuOTI3NjhIOFpNOCA0LjkxODIxVjQuOTI3NjhIMTBWNC45MTgyMUg4Wk04IDQuOTA4ODRWNC45MTgyMUgxMFY0LjkwODg0SDhaTTggNC44OTk1N1Y0LjkwODg0SDEwVjQuODk5NTdIOFpNOCA0Ljg5MDQxVjQuODk5NTdIMTBWNC44OTA0MUg4Wk04IDQuODgxMzVWNC44OTA0MUgxMFY0Ljg4MTM1SDhaTTggNC44NzIzOVY0Ljg4MTM1SDEwVjQuODcyMzlIOFpNOCA0Ljg2MzU0VjQuODcyMzlIMTBWNC44NjM1NEg4Wk04IDQuODU0OFY0Ljg2MzU0SDEwVjQuODU0OEg4Wk04IDQuODQ2MTZWNC44NTQ4SDEwVjQuODQ2MTZIOFpNOCA0LjgzNzYyVjQuODQ2MTZIMTBWNC44Mzc2Mkg4Wk04IDQuODI5MTlWNC44Mzc2MkgxMFY0LjgyOTE5SDhaTTggNC44MjA4N1Y0LjgyOTE5SDEwVjQuODIwODdIOFpNOCA0LjgxMjY1VjQuODIwODdIMTBWNC44MTI2NUg4Wk04IDQuODA0NTNWNC44MTI2NUgxMFY0LjgwNDUzSDhaTTggNC43OTY1MlY0LjgwNDUzSDEwVjQuNzk2NTJIOFpNOCA0Ljc4ODYyVjQuNzk2NTJIMTBWNC43ODg2Mkg4Wk04IDQuNzgwODJWNC43ODg2MkgxMFY0Ljc4MDgySDhaTTggNC43NzMxM1Y0Ljc4MDgySDEwVjQuNzczMTNIOFpNOCA0Ljc2NTU0VjQuNzczMTNIMTBWNC43NjU1NEg4Wk04IDQuNzU4MDZWNC43NjU1NEgxMFY0Ljc1ODA2SDhaTTggNC43NTA2OFY0Ljc1ODA2SDEwVjQuNzUwNjhIOFpNOCA0Ljc0MzQxVjQuNzUwNjhIMTBWNC43NDM0MUg4Wk04IDQuNzM2MjRWNC43NDM0MUgxMFY0LjczNjI0SDhaTTggNC43MjkxOFY0LjczNjI0SDEwVjQuNzI5MThIOFpNOCA0LjcyMjIyVjQuNzI5MThIMTBWNC43MjIyMkg4Wk04IDQuNzE1MzhWNC43MjIyMkgxMFY0LjcxNTM4SDhaTTggNC43MDg2M1Y0LjcxNTM4SDEwVjQuNzA4NjNIOFpNOCA0LjcwNzExVjQuNzA4NjNIMTBWNC43MDcxMUg4Wk04LjQxNDIxIDMuODc4NjhMOC4yOTI4OSA0TDkuNzA3MTEgNS40MTQyMUw5LjgyODQzIDUuMjkyODlMOC40MTQyMSAzLjg3ODY4Wk0xMC41MzU1IDNDOS43Mzk4OCAzIDguOTc2ODIgMy4zMTYwNyA4LjQxNDIxIDMuODc4NjhMOS44Mjg0MyA1LjI5Mjg5QzEwLjAxNiA1LjEwNTM2IDEwLjI3MDMgNSAxMC41MzU1IDVWM1pNMTEuNSAzSDEwLjUzNTVWNUgxMS41VjNaTTExIDMuNUMxMSAzLjIyMzg2IDExLjIyMzkgMyAxMS41IDNWNUMxMi4zMjg0IDUgMTMgNC4zMjg0MyAxMyAzLjVIMTFaTTExLjUgNEMxMS4yMjM5IDQgMTEgMy43NzYxNCAxMSAzLjVIMTNDMTMgMi42NzE1NyAxMi4zMjg0IDIgMTEuNSAyVjRaTTEwLjUzNTUgNEgxMS41VjJIMTAuNTM1NVY0Wk05LjE3ODU0IDQuNTMwNzlDOS41NDcyNyA0LjE5MDE5IDEwLjAzMTYgNCAxMC41MzU1IDRWMkM5LjUyNzY1IDIgOC41NTkgMi4zODAzOCA3LjgyMTQ2IDMuMDYxNjZMOS4xNzg1NCA0LjUzMDc5Wk02LjQ2NDQ3IDRDNi45NjgzOSA0IDcuNDUyNzMgNC4xOTAxOSA3LjgyMTQ2IDQuNTMwNzlMOS4xNzg1NCAzLjA2MTY2QzguNDQxIDIuMzgwMzggNy40NzIzNSAyIDYuNDY0NDcgMlY0Wk01LjUgNEg2LjQ2NDQ3VjJINS41VjRaIiBmaWxsPSJ3aGl0ZSIgbWFzaz0idXJsKCNwYXRoLTEtb3V0c2lkZS0xXzQ4MV8yNDEpIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjMuMDI3NyA5SDI0LjAyNzdDMjUuMTI5MyA5IDI2LjAyNzcgOS44OTk5OSAyNi4wMjc3IDExVjE3LjVDMjYuMDI3NyAxOC4zMyAyNS4zNTc4IDE5IDI0LjUyNzcgMTlIMTYuODc5M0MxNi40MjgxIDE5IDE2LjAwODIgMTguOCAxNS43Mjg5IDE4LjQ1QzE1LjQzNzkgMTguMDkgMTUuMzM4MyAxNy42MiAxNS40Mzc5IDE3LjE3QzE1LjgzODMgMTUuMzcgMTUuOTY5MSAxMi40OSAxNi4wMDgyIDEwLjk0QzE2LjAzNzUgOS44NTAwMSAxNi45MTgzIDkgMTguMDA4MiA5SDE5LjAyNzdWNUMxOS4wMjc3IDMuODk5OTkgMTkuOTI4MSAzIDIxLjAyNzcgM0MyMi4xMjczIDMgMjMuMDI3NyAzLjg5OTk5IDIzLjAyNzcgNVY5Wk0yNS4wMjc3IDExLjAxVjEySDE2Ljk3NUMxNi45ODg2IDExLjY0MSAxNy4wMDA0IDExLjI5NTEgMTcuMDA4MiAxMC45N0MxNy4wMjc3IDEwLjQzIDE3LjQ1OTQgMTAgMTguMDA4MiAxMFYxMC4wMUgyNC4wMjc3QzI0LjU3ODUgMTAuMDEgMjUuMDI3NyAxMC40NiAyNS4wMjc3IDExLjAxWk0xNi40MDg2IDE3LjM5QzE2LjY4MiAxNi4xNjQyIDE2LjgzODMgMTQuNTMwNCAxNi45MjYxIDEzSDI1LjAyNzdWMTQuMTkxMUwxNy4zOTEgMTguMDFIMTYuODc5M0MxNi43MjUgMTguMDEgMTYuNjE3NiAxNy45NDQ3IDE2LjU1NTEgMTcuODgyN0MxNi41MzU1IDE3Ljg2NDIgMTYuNTE5OSAxNy44NDYxIDE2LjUwODIgMTcuODNDMTYuNDA4NiAxNy43MSAxNi4zNjc2IDE3LjU1IDE2LjQwODYgMTcuMzlaTTE5LjYyNzMgMTguMDFIMjQuNTI3N0MyNC44MDkgMTguMDEgMjUuMDI3NyAxNy43OSAyNS4wMjc3IDE3LjUxVjE1LjMwOTJMMTkuNjI3MyAxOC4wMVpNMjIuMDI3NyA5VjVDMjIuMDI3NyA0LjQ1MDAxIDIxLjU3ODUgNCAyMS4wMjc3IDRDMjAuNDc2OSA0IDIwLjAyNzcgNC40NTAwMSAyMC4wMjc3IDVWOUgyMi4wMjc3WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTE5LjYyNzMgMTguMDFIMjQuNTI3N0MyNC44MDkgMTguMDEgMjUuMDI3NyAxNy43OSAyNS4wMjc3IDE3LjUxVjE1LjMwOTJMMTkuNjI3MyAxOC4wMVoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xNi45MjYxIDEzQzE2LjgzODMgMTQuNTMwNCAxNi42ODIgMTYuMTY0MiAxNi40MDg2IDE3LjM5QzE2LjM2NzYgMTcuNTUgMTYuNDA4NiAxNy43MSAxNi41MDgyIDE3LjgzQzE2LjUxOTkgMTcuODQ2MSAxNi41MzU1IDE3Ljg2NDIgMTYuNTU1MSAxNy44ODI3QzE2LjYxNzYgMTcuOTQ0NyAxNi43MjUgMTguMDEgMTYuODc5MyAxOC4wMUgxNy4zOTFMMjUuMDI3NyAxNC4xOTExVjEzSDE2LjkyNjFaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNMjUuMDI3NyAxMlYxMS4wMUMyNS4wMjc3IDEwLjQ2IDI0LjU3ODUgMTAuMDEgMjQuMDI3NyAxMC4wMUgxOC4wMDgyVjEwQzE3LjQ1OTQgMTAgMTcuMDI3NyAxMC40MyAxNy4wMDgyIDEwLjk3QzE3LjAwMDQgMTEuMjk1MSAxNi45ODg2IDExLjY0MSAxNi45NzUgMTJIMjUuMDI3N1oiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0yMi4wMjc3IDVWOUgyMC4wMjc3VjVDMjAuMDI3NyA0LjQ1MDAxIDIwLjQ3NjkgNCAyMS4wMjc3IDRDMjEuNTc4NSA0IDIyLjAyNzcgNC40NTAwMSAyMi4wMjc3IDVaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K')  8 1, auto;

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

  /*! tab layout */

  .e-bigger .e-richtexteditor,
  .e-richtexteditor.e-bigger {

    .e-rte-toolbar {
      .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
        margin-left: $rte-big-tb-items-margin-left;
      }
    }

    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
      .e-rte-toolbar .e-toolbar-item .e-dropdown-btn .e-dropdown-btn {
        font-size: $dropdown-btn-big-font-size;
      }
    }

    &.e-rtl .e-rte-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
      margin-left: 0;
      margin-right: $rte-big-tb-items-margin-left;
    }

    .e-rte-toolbar,
    .e-rte-toolbar.e-toolbar.e-extended-toolbar {

      .e-toolbar-extended {
        padding-left: $rte-big-tb-items-padding-left;
      }

      .e-toolbar-items,
      .e-toolbar-extended {

        .e-toolbar-item .e-tbar-btn .e-order-list.e-icons,
        .e-toolbar-item .e-tbar-btn .e-unorder-list.e-icons,
        .e-toolbar-item .e-tbar-btn .e-icons.e-btn-icon:not(.e-caret) {
          font-size: $rte-toolbar-big-icon-size;
        }

        .e-toolbar-item .e-rte-font-color .e-selected-color.e-icons::before,
        .e-toolbar-item .e-background-color .e-selected-color.e-icons::before {
          top: -20px;
        }

        .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-dropdown-btn.e-rte-dropdown-btn {
          padding-left: $rte-big-drop-btn-padding-left;
          padding-right: $rte-big-drop-btn-padding-right;
        }

        .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-rte-dropdown-btn.e-dropdown-btn:hover,
        .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-rte-dropdown-btn.e-dropdown-btn:focus,
        .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-rte-dropdown-btn.e-dropdown-btn:active {
          padding-left: $rte-big-drop-btn-action-padding-left;
          padding-right: $rte-big-drop-btn-action-padding-right;
        }

        .e-toolbar-item.e-active .e-tbar-btn.e-btn {
          padding: $rte-big-active-tb-item-btn-padding;
          @if $skin-name == 'FluentUI' {
            border-radius: 0;
          }
        }
        .e-dropdown-btn .e-rte-color-content{
          padding-top: $rte-big-dropdown-btn-color-content-padding;
          height: $rte-big-dropdown-btn-color-content-height;
        }
      }

      @if $skin-name == 'bootstrap5' {
        .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
          padding: 0 8px;
        }
      }
    }

    &.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-rte-toolbar,
    .e-rte-toolbar.e-toolbar.e-extended-toolbar {
      .e-toolbar-items,
      .e-toolbar-extended {
        .e-toolbar-item {
          .e-rte-numberformatlist-dropdown .e-rte-list-primary-content,
          .e-rte-bulletformatlist-dropdown .e-rte-list-primary-content {
            line-height: $rte-big-formatlists-dropdown-line-height;
            @if $skin-name == 'FluentUI' {
              padding: 5.5px;
            }
          }
        }
      }
    }
    .e-dialog.e-rte-dialog-minheight {
      min-height: 324px;
      @if $skin-name == 'FluentUI' {
        min-height: 350px;
      }
    }
  }

  .e-richtexteditor {
    color: $rte-content-color;
    display: block;
    position: relative;

    & textarea.e-content {
      border: 0;
      display: block;
      height: 100%;
      margin: 0;
      outline: 0;
      padding: 8px;
      resize: none;
      width: 100%;
    }

    & .e-rte-hidden {
      display: none;
    }

    &.e-disabled {
      pointer-events: none;
    }

    &.e-rte-full-screen {
      bottom: 0;
      height: 100% !important; /* stylelint-disable-line declaration-no-important */
      left: 0;
      overflow: auto;
      position: fixed;
      right: 0;
      top: 0;
      width: 100% !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-character-count {
      left: 0;
      padding-left: 30px;
      padding-right: unset;
      right: unset;
    }

    &.e-rtl .e-rte-content .e-content blockquote {
      padding-left: 0;
      padding-right: 5px;
    }

    .e-rte-toolbar {

      @if $skin-name == 'bootstrap5' {
        &.e-toolbar .e-hor-nav {
          min-height: $toolbar-expand-icon-min-height;
        }
      }

      .e-toolbar-items:not(.e-tbar-pos):not(.e-toolbar-multirow) .e-toolbar-item:first-child {
        margin-left: $rte-tb-items-margin-left;
      }

      .e-hor-nav.e-expended-nav {
        height: auto;
        min-height: $rte-tb-expended-min-height;
        padding-left: $rte-tb-expended-padding-left;
      }

      .e-toolbar-multirow {
        margin-left: 7px;
        margin-right: 7px;
      }
    }

    &.e-rtl .e-rte-toolbar .e-toolbar-items:not(.e-tbar-pos):not(.e-toolbar-multirow) .e-toolbar-item:first-child {
      margin-left: 0;
      margin-right: $rte-tb-items-margin-left;
    }

    &.e-rtl .e-rte-toolbar .e-toolbar-multirow:not(.e-tbar-pos) .e-toolbar-item:first-child {
      margin-right: 0;
    }

    .e-rte-toolbar.e-rte-tb-mobile .e-toolbar-multirow {
      display: inline-block;
      margin-left: 0;
      margin-right: 0;
      overflow-x: auto;
      white-space: nowrap;
      width: 100%;
    }

    .e-rte-toolbar,
    .e-rte-toolbar.e-toolbar.e-extended-toolbar {
      position: inherit;
      z-index: 101;

      .e-toolbar-extended {
        margin-left: 0;
        padding-left: $rte-tb-items-padding-left;
      }
    
      .e-toolbar-items,
      .e-toolbar-extended {

        .e-toolbar-item {

          .e-formats-tbar-btn > :first-child {
            min-width: $rte-format-btn-min-width;
          }

          .e-font-name-tbar-btn > :first-child {
            min-width: $rte-font-name-btn-min-width;
          }

          .e-font-size-tbar-btn > :first-child {
            min-width: $rte-font-size-btn-min-width;
          }

          .e-dropdown-btn {
            padding-left: $rte-drop-btn-padding-left;
            padding-right: $rte-drop-btn-padding-right;

            @if $skin-name == 'bootstrap5' {
              border: 1px solid $transparent;
            }

            .e-rte-dropdown-btn-text {
              font-size: $dropdown-btn-font-size;
              font-weight: $font-weight;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          .e-dropdown-btn:hover,
          .e-dropdown-btn:focus,
          .e-dropdown-btn:active {
            padding-left: $rte-drop-btn-action-padding-left;
            padding-right: $rte-drop-btn-action-padding-right;
          }

          .e-rte-font-color .e-selected-color.e-icons::before {
            font-size: 12px;
            position: relative;
            top: -18px;
          }

          .e-rte-numberformatlist-dropdown .e-rte-list-primary-content,
          .e-rte-bulletformatlist-dropdown .e-rte-list-primary-content {
            line-height: $rte-formatlists-dropdown-line-height;
            @if $skin-name == 'FluentUI' {
              padding: 5px;
            }
          }

          .e-background-color.e-icons::before {
            display: inline;
            font-size: $rte-background-color-icon-fontsize;
          }

          .e-tbar-btn {

            .e-order-list.e-icons,
            .e-unorder-list.e-icons,
            .e-icons.e-btn-icon:not(.e-caret) {
              font-size: $rte-toolbar-icon-size;
            }
          }

          &.e-active .e-tbar-btn.e-btn {
            padding: $rte-active-tb-item-btn-padding;
            @if $skin-name == 'FluentUI' {
              border-radius: 0;
            }
          }
        }
        .e-dropdown-btn .e-rte-color-content {
          padding-top: $rte-dropdown-btn-color-content-padding;
          height: $rte-dropdown-btn-color-content-height;
        }
      }

      @if $skin-name == 'bootstrap5' {
        .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
          padding: 0 4px;
        }
      }

      &.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-tb-float {
        position: fixed;
        top: 0;

        &.e-rte-tb-abs-float {
          position: absolute;
        }
      }
    }

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

    .e-rte-content {
      position: relative;
      z-index: 1;
    }

    .e-rte-content,
    .e-source-content  {
      /* 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;
      width: 100%;

      .e-content {
        background: unset;
        box-sizing: border-box;
        height: 100%;
        min-height: 100px;
        outline: 0 solid transparent;
        overflow-x: auto;
        padding: $rte-content-padding;
        position: relative;
        text-align: inherit;
        z-index: 2;

        @media screen and (min-width: 992px) {
          font-size: $rte-content-font-size;
        }
      }

      .e-content p {
        margin: 0 0 10px;
        margin-bottom: 10px;
      }

      .e-content li {
        margin-bottom: 10px;
      }

      .e-content h1 {
        font-size: 2.17em;
        font-weight: normal;
        line-height: 1;
        margin: 10px 0;
      }

      .e-content h2 {
        font-size: 1.74em;
        font-weight: normal;
        margin: 10px 0;
      }

      .e-content h3 {
        font-size: 1.31em;
        font-weight: normal;
        margin: 10px 0;
      }

      .e-content h4 {
        font-size: 16px;
        font-weight: normal;
        line-height: 1.5;
        margin: 0;
      }

      .e-content h5 {
        font-size: .8em;
        font-weight: normal;
        margin: 0;
      }

      .e-content h6 {
        font-size: .65em;
        font-weight: normal;
        margin: 0;
      }

      .e-content blockquote {
        margin: 10px 0;
        margin-left: 0;
        padding-left: 5px;
      }

      .e-content pre {
        background-color: inherit;
        border: 0;
        border-radius: 0;
        color: $rte-content-color;
        font-size: inherit;
        line-height: inherit;
        margin: 0 0 10px;
        overflow: visible;
        padding: 0;
        white-space: pre-wrap;
        word-break: inherit;
        word-wrap: break-word;
      }

      .e-content strong,
      .e-content b {
        font-weight: bold;
      }

      .e-content a {
        text-decoration: none;
        user-select: auto;
      }

      .e-content a:hover {
        text-decoration: underline;
      }

      .e-content p:last-child,
      .e-content pre:last-child,
      .e-content blockquote:last-child {
        margin-bottom: 0;
      }

      .e-content h3 + h4,
      .e-content h4 + h5,
      .e-content h5 + h6 {
        margin-top: .6em;
      }

      .e-content ul:last-child {
        margin-bottom: 0;
      }
    }

    .e-rte-character-count {
      bottom: 0;
      color: $rte-default-character-count-color;
      font-size: 14px;
      margin-right: 30px;
      opacity: $rte-default-character-count-opacity;
      padding-bottom: 2px;
      position: absolute;
      right: 0;
      z-index: 100;

      &.e-warning {
        color: $rte-warning-character-count-color;
        opacity: unset;
      }

      &.e-error {
        color: $rte-error-character-count-color;
        opacity: unset;
      }
    }

    .e-rte-srctextarea {
      background-color: transparent;
      border: 0;
      color: $rte-content-color;
      display: block;
      height: 100%;
      line-height: 22px;
      overflow: auto;
      padding: 16px;
      resize: none;
      transition: 100ms ease-out;
      width: 100%;
    }

    .e-resize-handle {
      height: $rte-resize-handler-height;
      position: absolute;
      width: $rte-resize-handler-width;

      &.e-south-east {
        bottom: $rte-resize-handler-position;
        cursor: nwse-resize;
        right: $rte-resize-handler-position;
        z-index: 100;
      }

      &.e-south-west {
        bottom: $rte-resize-handler-position;
        cursor: sw-resize;
        left: $rte-resize-handler-position;
        transform: rotate(90deg);
        z-index: 100;
      }
    }

    &.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-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon:not(.e-toolbar-pop) {
      padding: $rte-extended-toolbar-items-padding;
    }
    .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
      background: $rte-expand-tbar-hover-bg;
    }
    .e-toolbar .e-toolbar-item .e-tbar-btn,
    .e-toolbar.e-extended-toolbar .e-toolbar-extended.e-toolbar-pop .e-toolbar-item .e-tbar-btn{
      font-size: $rte-tbar-icon-size;
    }
  }

  .e-rte-linkcontent .e-rte-label {
    padding-top: $rte-insert-dialog-label-padding-top;
  }

  .e-rte-label label {
    font-weight: normal;
  }

  .e-rte-linkcontent .e-rte-label:first-child {
    padding-top: 0;
  }

  .e-bigger .e-rte-dropdown-popup {

    ul {
      min-width: 84px;
    }
  }

  .e-rte-dropdown-popup {

    &.e-rte-inline-dropdown {

      @media screen and (max-width: 768px) {
        ul {
          padding: 7px 0;

          li.e-item {
            height: 34px;
            line-height: 34px;
            padding: 0 6.5px;
          }

          .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: 0 6px;
          width: auto;
        }

        &.e-h1 {
          font-size: 2em;
          font-weight: bold;
          height: 40px;
          line-height: 40px;
        }

        &.e-h2 {
          font-size: 1.5em;
          font-weight: bold;
          height: 40px;
          line-height: 40px;
        }

        &.e-h3 {
          font-size: 1.16em;
          font-weight: bold;
        }

        &.e-h4 {
          font-size: 1em;
          font-weight: bold;
        }

        &.e-h5 {
          font-size: .83em;
          font-weight: bold;
        }

        &.e-h6 {
          font-size: .7em;
          font-weight: bold;
        }

        &.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: auto;
      }

      @media screen and (max-width: 768px) {

        ul {
          min-width: 30px;
        }
      }
    }

    &.e-rtl {
      ul .e-item .e-menu-icon {
        margin: 0 6px;
      }
    }
  }

  .e-rte-image.e-imgbreak,
  .e-rte-audio.e-audio-break,
  .e-rte-video.e-video-break {
    border: 0;
    cursor: pointer;
    display: block;
    float: none;
    max-width: 100%;
    padding: 1px;
    position: relative;
  }

  .e-rte-image,
  .e-rte-audio,
  .e-rte-video  {
    border: 0;
    cursor: pointer;
    display: block;
    float: none;
    margin: auto;
    max-width: 100%;
    position: relative;
  }

  .e-rte-image.e-imginline,
  .e-rte-audio.e-audio-inline,
  .e-rte-video.e-video-inline  {
    display: inline-block;
    float: none;
    max-width: calc(100% - (2 * 5px));
    padding: 1px;
    vertical-align: bottom;
  }

  .e-rte-image.e-imgcenter,
  .e-rte-video.e-video-center {
    cursor: pointer;
    display: block;
    float: none;
    margin: 5px auto;
    max-width: 100%;
    position: relative;
  }

  .e-rte-image.e-imgleft,
  .e-rte-video.e-video-left {
    float: left;
    margin: 0 auto;
    margin-right: 5px;
    text-align: left;
  }

  .e-rte-image.e-imgright,
  .e-rte-video.e-video-right {
    float: right;
    margin: 0 auto;
    margin-left: 5px;
    text-align: right;
  }

  .e-rte-img-popup .e-item {
    height: 106px;
    width: 300px;
  }

  .e-rte-img-caption {
    display: inline-block;
    margin: 5px auto;
    max-width: 100%;
    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: block;
    margin-left: auto;
    margin-right: auto;
  }

  .e-rte-img-caption.e-imgright {
    display: block;
    margin-left: auto;
    margin-right: 0;
  }

  .e-rte-img-caption.e-imgleft {
    display: block;
    margin-left: 0;
    margin-right: auto;
  }

  .e-rte-img-caption .e-rte-image.e-imgright {
    float: none;
    margin-left: auto;
    margin-right: 0;
  }

  .e-rte-img-caption .e-rte-image.e-imgleft {
    float: none;
    margin: 0;
  }

  .e-img-caption.e-rte-img-caption.e-imgbreak {
    display: block;
  }

  .e-rte-table {
    border-collapse: collapse;
    empty-cells: show;
  }

  .e-rte-table td,
  .e-rte-table th {
    border: 1px solid $rte-table-border-color;
    height: 20px;
    min-width: 20px;
    padding: 2px 5px;
    vertical-align: middle;
  }

  .e-rte-table.e-dashed-border td,
  .e-rte-table.e-dashed-border 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: initial;
    margin: auto;
    opacity: .9;
    position: relative;
    text-align: center;
    width: 100%;
  }

  .e-rte-img-caption.e-imgleft .e-img-inner {
    text-align: left;
  }

  .e-rte-img-caption.e-imgright .e-img-inner {
    text-align: right;
  }

  .e-rte-img-caption .e-img-wrap {
    display: inline-block;
    margin: auto;
    padding: 0;
    width: 100%;
  }

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

  .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-richtexteditor {
    .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-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn,
    .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control {
      padding: $rte-toolbar-expaned-padding;
    }

    .e-toolbar .e-toolbar-pop .e-toolbar-item.e-tbtn-align .e-btn.e-control .e-icons.e-btn-icon {
      min-width: $rte-toolbar-expaned-minwidth;
    }

    .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
      padding: $rte-toolbar-expaned-padding-hover;
    }

    .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  {
      margin-top: 0;
    }

    .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-abort-btn.e-icons,
    .e-vid-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
      margin-right: 30px;
    }

    .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  {
      border-bottom: 0 solid transparent;
      min-height: initial;
    }

    .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 {
      margin-left: 0;
      margin-right: 0;
    }

    .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 {
      border-top: 0 solid transparent;
    }

    .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 {
      display: none;
    }

    .e-img-uploadwrap.e-droparea .e-upload,
    .e-aud-uploadwrap.e-droparea .e-upload,
    .e-vid-uploadwrap.e-droparea .e-upload {
      border: 0 solid transparent;
      float: none;
    }

    .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 {
      display: block;
      height: $rte-droparea-browsebtn-height;
      margin: 0 auto;
      padding: $rte-droparea-browsebtn-padding;
      position: relative;
      top: $rte-droparea-browsebtn-top;
      @if $skin-name == 'FluentUI' {
        outline: none;
      }
    }

    .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,
    .e-rte-video-dialog.e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap.e-droparea .e-browsebtn {
      top: -130px;
    }

    .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 {
      display: none;
    }

    .e-dialog .e-img-uploadwrap.e-droparea,
    .e-dialog .e-aud-uploadwrap.e-droparea,
    .e-dialog .e-vid-uploadwrap.e-droparea {
      line-height: $rte-droparea-line-height;
      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 {
      display: inline-block;
      line-height: normal;
    }

    .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 {
      line-height: 4;
    }

    .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-bigger .e-rte-dropdown-popup.e-rte-dropdown-items ul {
      max-height: 360px;
      overflow-y: auto;
    }

    .e-dropdown-btn.e-rte-backgroundcolor-dropdown,
    .e-dropdown-btn.e-rte-fontcolor-dropdown,
    .e-dropdown-btn.e-rte-numberformatlist-dropdown,
    .e-dropdown-btn.e-rte-bulletformatlist-dropdown {
      line-height: $rte-inline-dropdown-line-height;
    }

    .e-rte-table-popup.e-popup.e-popup-open {
      border-radius: $rte-table-popup-bdr-radius;
      box-shadow: $rte-table-popup-box;
      font-size: 14px;
      font-weight: normal;
      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: 100%;
    }

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

    .e-rte-content .e-content table td.e-cell-select,
    .e-rte-content .e-content table th.e-cell-select {
      border: 1px double $rte-table-select-border-color;
      height: 24.67px;
    }

    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: 50px;
    }

    .e-rte-upload-popup {
      width: 250px;
    }

    .e-rte-dialog-upload .e-upload-files {
      border-top: 0;
    }

    .e-rte-dialog-upload .e-upload-files .e-upload-file-list {
      border-bottom: 0;
    }

    .e-rte-emojipicker-popup.e-popup.e-popup-open {
      border: $rte-emoji-pop-border;
      min-width: 120px;
      height: 330px;
      width: 308px;

      .e-toolbar .e-toolbar-item .e-tbar-btn {
        padding: 7px 3px;
        border-radius: 4px;
        
        @if $skin-name =='bootstrap' or $skin-name =='botstrap-dark' {
          &:hover,
          &:focus{
            padding: 6px 2px;
          }
        }

        @if $skin-name =='material' or $skin-name =='material-dark' {
          padding: 3px;
        }

        .e-tbar-btn-text {
          font-size: 24px;
          padding: 1px;
        }
      }

      .e-input-group.e-control-wrapper {
        margin: 10px;
        width: 94%;

        .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: 10px;
        height: $rte-emoji-btn-height;
        overflow: auto;
        padding: 10px;

        .e-rte-emojipicker-group .e-rte-emojipickerbtn-group {
          display: grid;
          grid-template-columns: repeat(6, 1fr);
          gap: 6px;

          .e-btn.e-control {
            display: inline-block;
            box-shadow: none;
            font-size: 24px;
            padding: 6px 0;
            width: 40px;
            height: 40px;
            border: none;
            line-height: $rte-emoji-grp-btn-line-height;
          }
        }

        .e-rte-emojisearch-btn {
          display: grid;
          grid-template-columns: repeat(6, 1fr);
          gap: 6px;
          height: 0;

          .e-btn.e-control {
            display: inline-block;
            box-shadow: none;
            font-size: 24px;
            padding: 6px 0;
            width: 40px;
            height: 40px;
            border: none;
            line-height: $rte-emoji-grp-btn-line-height;
          }
        }

        .e-rte-emojipicker-group .e-rte-emojipicker-name {
          font-weight: $rte-emoji-headname-font-weight;
          font-size: 14px;
        }

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

      & .e-switch-ctrl-btn {
        padding: 5px;
        .e-bigger & {
          padding: 5px;
        }
      }
    }
  }

  .e-rte-quick-popup {
    border-radius: 2px;
    overflow: hidden;

    .e-rte-quick-toolbar {
      border-radius: 2px;
      min-height: 42px;

      .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
        white-space: nowrap;
        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) {
        border-radius: 2px;
        margin: $rte-quick-toolbar-item-margin;
        min-height: 42px;

        .e-toolbar-item.e-rte-horizontal-separator,
        .e-toolbar-item.e-separator.e-multirow-separator.e-rte-horizontal-separator {
          display: block;
          height: 1px;
          margin: 0;
          min-height: 1px;
        }

        .e-toolbar-item {
          margin: $rte-toolbar-item-frist-last-child-margin;
          min-height: 42px;

          &:first-child,
          &:last-child {
            margin: 0;
          }

          .e-tbar-btn:not(.e-rte-dropdown-btn) {
            line-height: 20px;
          }

          .e-tbar-btn:not(.e-rte-dropdown-btn) .e-icons {
            min-width: $rte-quick-item-icon-min-width;
          }
        }

        .e-toolbar-item .e-btn,
        .e-toolbar-item .e-btn:hover {
          min-height: $rte-quick-item-btn-height;
          min-width: $rte-quick-item-btn-width;
          padding: $rte-quick-item-padding;
          @if $skin-name == 'FluentUI' {
            padding-left: $rte-quick-item-padding-left;
            padding-right: $rte-quick-item-padding-right;
          }
        }
      }

      .e-tbar-btn {
        .e-icons.e-btn-icon:not(.e-caret) {
          font-size: $rte-toolbar-icon-size;
        }
      }

      .e-background-color.e-icons::before {
        display: inline;
      }

      .e-rte-fontcolor-dropdown .e-btn-icon.e-caret,
      .e-rte-backgroundcolor-dropdown .e-btn-icon.e-caret,
      .e-rte-numberformatlist-dropdown .e-btn-icon.e-caret,
      .e-rte-bulletformatlist-dropdown .e-btn-icon.e-caret {
        font-size: 10px;
      }
    }

    .e-rte-dropdown-btn.e-tbar-btn {
      line-height: $rte-quick-drop-btn-line-height;
      margin: $rte-quick-drop-btn-margin;
      padding: $rte-quick-drop-btn-padding;

      .e-rte-dropdown-btn-text {
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .e-order-list.e-icons,
      .e-unorder-list.e-icons,
      .e-icons:not(.e-caret) {
        font-size: 14px;
      }

      .e-caret {
        font-size: $rte-quick-drop-btn-caret-font-size;
        width: 12px;
      }
    }

    &.e-hide {
      display: block;
      visibility: hidden;
    }
  }

  .e-bigger .e-rte-quick-popup {
    .e-rte-quick-toolbar {
      min-height: 48px;

      .e-toolbar-items:not(.e-tbar-pos) {
        margin: $rte-big-quick-toolbar-items-margin;
        min-height: 48px;

        .e-toolbar-item:not(.e-separator) {
          margin: $rte-big-quick-toolbar-item-margin;
          min-height: 48px;
          min-width: 36px;
          padding: $rte-big-quick-toolbar-item-btn-padding;
        }

        .e-toolbar-item .e-tbar-btn:not(.e-rte-dropdown-btn) {
          line-height: $rte-big-quick-item-line-height;
        }

        .e-toolbar-item .e-btn,
        .e-toolbar-item .e-btn:hover {
          min-height: $rte-big-quick-item-btn-height;
          min-width: $rte-big-quick-item-btn-width;
          padding: $rte-big-quick-item-padding;
          @if $skin-name == 'FluentUI' {
            padding-left: $rte-quick-item-padding-left;
            padding-right: $rte-quick-item-padding-right;
          }
        }

        .e-toolbar-item:first-child,
        .e-toolbar-item:last-child {
          margin: $rte-big-toolbar-item-frist-last-child-margin;
        }

        .e-toolbar-item .e-tbar-btn.e-btn.e-control {
          height: $rte-big-quick-tbar-item-min-height;
          line-height: normal;
          margin: 0;
          min-height: $rte-big-quick-tbar-item-min-height;
          min-width: $rte-big-quick-tbar-item-min-width;
        }

        .e-toolbar-item .e-tbar-btn .e-order-list.e-icons,
        .e-toolbar-item .e-tbar-btn .e-unorder-list.e-icons,
        .e-toolbar-item .e-tbar-btn .e-icons.e-btn-icon:not(.e-caret) {
          font-size: $rte-toolbar-big-icon-size;
        }
      }
    }
    .e-bigger .e-rte-emojipicker-popup.e-popup.e-popup-open {
      min-width: 120px;
      height: 337px;
      width: 335px;

      .e-toolbar .e-toolbar-item .e-tbar-btn {
        // padding: 2px 5px;
        border-radius: 4px;
        padding: 0;
        @if $skin-name =='material' or $skin-name =='material-dark' {
          padding: 3px 7px;
        }
        
        &:hover {
          padding: 0;
        }

        &:active {
          padding: 0;
        }

        .e-tbar-btn-text {
          font-size: 26px;
          padding: 9px 5px;
        }
      }

      .e-rte-emojipicker-btn {
        gap: 10px;
        height: $rte-big-emoji-btn-height;
        padding: 12px;

        .e-rte-emojipicker-group .e-rte-emojipickerbtn-group {
          gap: 8px;

          .e-btn.e-control {
            font-size: 26px;
            padding: 8px 0;
            width: 42px;
            height: 42px;
            line-height: 0;
          }
        }

        .e-rte-emojisearch-btn {
          gap: 6px;

          .e-btn.e-control {
            font-size: 26px;
            padding: 8px 0;
            width: 40px;
            height: 40px;
            border: none;
            line-height: 0;
          }
        }

        .e-rte-emojipicker-group .e-rte-emojipicker-name {
          font-weight: 500;
          font-size: 16px;
        }
      }
    }
    .e-rte-dropdown-btn.e-tbar-btn {
      line-height: $rte-big-quick-drop-btn-line-height;
      margin: $rte-big-quick-drop-btn-margin;
      padding: $rte-big-quick-drop-btn-padding;

      .e-order-list.e-icons,
      .e-unorder-list.e-icons,
      .e-icons:not(.e-caret) {
        font-size: $rte-toolbar-icon-size;
      }

      .e-caret {
        font-size: $rte-big-quick-drop-btn-caret-font-size;
        width: 20px;
      }
    }
  }

  .e-bigger .e-rte-quick-popup.e-rte-inline-popup {
    .e-rte-quick-toolbar {
      .e-toolbar-items:not(.e-tbar-pos) {
        .e-toolbar-item:not(.e-separator).e-rte-inline-template {
          min-width: $rte-big-inline-tmp-min-width;
        }

        .e-toolbar-item:not(.e-separator).e-rte-inline-size-template {
          min-width: $rte-big-inline-tmp-size-min-width;
        }

        .e-toolbar-item:not(.e-separator).e-rte-inline-color-template {
          min-width: $rte-big-inline-tmp-color-min-width;
        }
      }
    }
  }

  .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-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item {
    button.e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
    button.e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
    button.e-rte-numberformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
    button.e-rte-bulletformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control {
      @if $skin-name == 'FluentUI' {
        .e-btn-icon.e-icons.e-caret {
          padding-top: 0;
        }
      }
    }
  }

  .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item,
  .e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item,
  .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item,
  .e-rte-toolbar.e-toolbar .e-toolbar-extended .e-toolbar-item {

    .e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
    .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
    .e-rte-numberformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
    .e-rte-bulletformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control {
      display: flex;
      padding-left: $rte-colorpicker-parent-padding;
      padding-right: $rte-colorpicker-parent-padding;
      @if $skin-name == 'FluentUI' {
        padding-top: $rte-colorpicker-parent-padding-top;
      }

      &:hover,
      &:active,
      &.e-active,
      &.e-active:hover {
        padding-left: $rte-colorpicker-parent-padding-hover;
        padding-right: $rte-colorpicker-parent-padding-hover;
        @if $skin-name == 'FluentUI' {
          padding-top: $rte-colorpicker-parent-padding-hover-top;
        }
      }

      .e-rte-color-content,
      .e-rte-list-primary-content {
        position: relative;
        vertical-align: middle;
        width: $rte-font-icon-width;
      }

      .e-rte-color-content {
        .e-rte-elements {
          border-bottom-style: solid;
          border-bottom-width: 3px;
          padding-bottom: 1px;
        }
      }

      .e-rte-list-primary-content .e-order-list,
      &.e-active .e-rte-list-primary-content .e-order-list,
      .e-rte-list-primary-content .e-unorder-list,
      &.e-active .e-rte-list-primary-content .e-unorder-list {
        line-height: $rte-split-btn-active-color-icon-line-height;
      }

      .e-rte-color-content::after {
        content: '';
        height: 100%;
        position: absolute;
        right: 0;
        width: $rte-split-btn-bar-size;
      }

      .e-icons.e-btn-icon {
        display: flex;
        flex-direction: $rte-list-btn-flex;
        justify-content: center;
        line-height: $rte-list-btn-line-height;
        min-width: $rte-font-arrow-width;
        text-align: center;
        width: $rte-font-arrow-width;
      }

      @if $skin-name == 'bootstrap5' {

        .e-icons.e-btn-icon.e-caret:not(.e-toolbar-pop) {
          padding-left: 0;
          padding-right: 0;
        }
      }
    }

    .e-dropdown-btn.e-tbar-btn .e-icons.e-btn-icon.e-caret {
      font-size: $rte-dropdown-caret-icon-size;

      @if $skin-name == 'bootstrap5' {
        &:not(.e-toolbar-pop) {
          font-size: 12px;
        }
      }
    }
    @if $skin-name == 'bootstrap5' {
      .e-dropdown-btn.e-alignment-tbar-btn .e-btn-icon.e-caret {
        min-width: $rte-align-caret-icon-min-width;
      }
    }

    @if $skin-name == 'FluentUI' {
      .e-dropdown-btn:focus,
      .e-dropdown-btn.e-btn:focus {
        box-shadow: none;
      }
    }
  }

  .e-rte-inline-dropdown .e-rte-color-content .e-rte-elements {
    border-bottom-style: solid;
    border-bottom-width: 3px;
    line-height: $rte-font-icon-line-height;
    padding-bottom: 1px;
  }

  .e-bigger {
    .e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item {
      button.e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
      button.e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
      button.e-rte-numberformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
      button.e-rte-bulletformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control {
        @if $skin-name == 'FluentUI' {
          .e-btn-icon.e-icons.e-caret {
            padding-top: 0;
          }
        }
      }
    }

    .e-rte-edit-table .e-rte-field {
      padding-top: $rte-big-insert-dialog-label-padding-top;
    }
    
    .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item,
    .e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item,
    .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item,
    .e-rte-toolbar.e-toolbar .e-toolbar-extended .e-toolbar-item {
      .e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
      .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
      .e-rte-numberformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
      .e-rte-bulletformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control {
        .e-icons.e-btn-icon {
          min-width: $rte-font-arrow-touch-width;
          padding-left: 0;
          padding-right: 0;
          width: $rte-font-arrow-touch-width;
        }

        &:hover,
        &:focus,
        &:active {
          padding-left: $rte-big-color-list-span-common-padding-left-right;
          padding-right: $rte-big-color-list-span-common-padding-left-right;
        }

        .e-rte-list-primary-content .e-order-list,
        &.e-active .e-rte-list-primary-content .e-order-list,
        .e-rte-list-primary-content .e-unorder-list,
        &.e-active .e-rte-list-primary-content .e-unorder-list {
          line-height: $rte-big-split-btn-active-color-icon-line-height;
        }
      }

      .e-dropdown-btn .e-caret {
        font-size: $rte-big-dropdown-caret-icon-size;

        @if $skin-name == 'bootstrap5' {
          &.e-btn-icon:not(.e-toolbar-pop) {
            font-size: 14px;
          }
        }
      }
    }
    .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item,
    .e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item,
    .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item,
    .e-rte-toolbar.e-toolbar .e-toolbar-extended .e-toolbar-item {

      .e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
      .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
      .e-rte-numberformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
      .e-rte-bulletformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control {
        .e-icons.e-btn-icon {
          line-height: $rte-big-list-btn-line-height;
        }
      }
    }
    .e-richtexteditor{
      .e-rte-toolbar{
        .e-tbar-btn.e-dropdown-btn.e-rte-backgroundcolor-dropdown,
        .e-tbar-btn.e-dropdown-btn.e-rte-fontcolor-dropdown,
        .e-tbar-btn.e-dropdown-btn.e-rte-numberformatlist-dropdown,
        .e-tbar-btn.e-dropdown-btn.e-rte-bulletformatlist-dropdown {
          line-height: $rte-big-inline-dropdown-line-height;
        }
        .e-toolbar-item .e-tbar-btn.e-btn .e-icons {
          font-size: $rte-toolbar-big-icon-size;
        }
        .e-hor-nav.e-expended-nav {
          min-height: $rte-big-tb-expended-min-height;
        }
      }
      .e-rte-toolbar,
      .e-rte-toolbar.e-toolbar.e-extended-toolbar {
        .e-toolbar-items,
        .e-toolbar-extended {
          .e-toolbar-item {
            .e-background-color.e-icons::before {
              display: inline;
              font-size: $rte-big-background-color-icon-fontsize;
            }
          }
        }
      }
    }
  }

  .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: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
  }

  .e-popup-overlay {
    height: 100%;
    left: 0;
    opacity: .5;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .e-bigger .e-rte-table-popup.e-popup-open .e-rte-tablecell {
    height: $rte-big-tablecell-height;
    width: $rte-big-tablecell-width;
  }

  .e-bigger .e-rte-table-popup.e-popup-open .e-rte-table-row {
    height: $rte-big-table-row-height;
  }

  .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: 6px solid transparent;
    border-right: 6px solid;
    border-top: 6px solid transparent;
    content: '';
    display: block;
    height: 0;
    position: absolute;
    right: 4px;
    top: 4px;
    width: 20px;
  }

  .e-reicon::after {
    border-bottom: 6px solid transparent;
    border-left: 6px solid;
    border-top: 6px solid transparent;
    content: '';
    display: block;
    height: 0;
    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: 296px;
    @if $skin-name == 'FluentUI' {
      min-height: 308px;
    }
  }

  .e-content-placeholder.e-richtexteditor.e-placeholder-richtexteditor {
    background-size: 700px 190px;
    min-height: 190px;
  }

  .e-bigger .e-content-placeholder.e-richtexteditor.e-placeholder-richtexteditor,
  .e-bigger.e-content-placeholder.e-richtexteditor.e-placeholder-richtexteditor {
    background-size: 700px 190px;
    min-height: 190px;
  }

  .e-rte-table.e-rte-table-border {
    border: 1px solid $rte-table-border-color;
    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-img-uploadwrap.e-droparea,
    .e-aud-uploadwrap.e-droparea,
    .e-vid-uploadwrap.e-droparea {
      line-height: 10;
      min-height: 50px;
      position: relative;

      .e-browsebtn {
        display: block;
        height: 36px;
        margin: 0 auto;
        padding: 0 18px;
        position: relative;
        top: -50px;
        @if $skin-name == 'FluentUI' {
          outline: none;
        }
      }

      .e-upload {
        border: 0 solid transparent;
        float: none;
      }

      .e-file-select-wrap {
        display: none;
      }
    }

    .e-linkheader {
      font-family: $rte-font-family;
      font-size: $rte-big-insert-dialog-font-size;
      opacity: .87;
      padding-bottom: $rte-insert-dialog-label-padding-bottom;
      padding-top: $rte-insert-dialog-label-padding-top;
    }
  }

  .e-rte-file-manager-dialog {

    .e-rte-label {
      padding-bottom: 8px;
      padding-top: 15px;

      label {
        font-size: 15px;
        opacity: .87;
      }
    }
  }

  @if $skin-name == 'Material3' {
    .e-rte-toolbar .e-rte-table-popup .e-insert-table-btn{
      border-color: $outline;
    }
    .e-dialog .e-dlg-header-content + .e-dlg-content{
      padding-top: 0;
    }
    .e-bigger .e-richtexteditor,
    .e-richtexteditor.e-bigger {
      .e-dialog {
        border-radius: 16px;
      }
    }
    .e-rte-link-dialog .e-dlg-content{
      padding: 7px 20px;
    }
    .e-toolbar-wrapper .e-toolbar .e-toolbar-item:not(.e-separator),
    .e-bigger .e-toolbar .e-toolbar-item:not(.e-separator) {
      padding: 8px 4px;
    }
    .e-rte-quick-popup .e-rte-toolbar.e-rte-quick-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
    .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {
      margin: 0;
    }
  }
  
  // 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: 0;
  }

  .e-hide.e-rte-quick-popup-hide {
    border: 0;
    position: absolute;
  }

  .e-rte-popup-hide {
    display: none;
  }

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

  .e-rte-table-popup.e-dialog .e-dlg-content {
    padding: 0;
    @if $skin-name == 'FluentUI' {
      margin-bottom: 0;
    }
  }

  @if $skin-name == 'tailwind' {
    .e-rte-table-popup.e-popup.e-popup-open {
      box-shadow: $rte-table-popup-box;
    }

    .e-rte-elements.e-rte-quick-popup .e-toolbar .e-toolbar-items.e-toolbar-multirow:not(.e-tbar-pos) .e-toolbar-item:first-child {
      margin-left: 6px;
    }

    .e-rte-elements.e-rte-quick-popup .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
      min-width: 24px;
    }
  }

  @if $skin-name == 'bootstrap5' {
    .e-rte-elements.e-rte-quick-popup .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
      min-width: 24px;
    }

    .e-richtexteditor .e-toolbar .e-insert-table-btn.e-btn .e-icons {
      padding-bottom: 0;
    }
  }

  @if $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'FluentUI' {
    .e-rte-quick-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
    .e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control:hover,
    .e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control:active,
    .e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control.e-active {
      padding-left: 0;
      padding-right: 0;
    }
  }

  .e-richtexteditor .e-rte-table-popup.e-popup-open.e-dialog .e-rte-tablecell {
    margin: 1px;
  }
  .e-transparent.e-rte-elements.e-tbar-btn.e-rte-fontcolor-dropdown,
  .e-transparent.e-rte-elements.e-tbar-btn.e-rte-backgroundcolor-dropdown {
    visibility: hidden;
  }
  // Blazor styles end
}


@include export-module('richtexteditor-theme') {

  /*! tab layout */

  .e-richtexteditor {

    .e-rte-toolbar {
      border: 1px solid $rte-border-color;
      border-bottom: 0;

      .e-toolbar-item {

        @if $skin-name != 'highcontrast' {
          &.e-overlay .e-tbar-btn .e-icons {
            color: $rte-ext-tbar-overlay-icons-color;
          }
        }

        @if $skin-name == 'bootstrap5' {
          .e-tbar-btn:focus .e-icons {
            color: $rte-quick-item-active-font-color;
          }
        }

        &.e-active .e-tbar-btn,
        &.e-active .e-tbar-btn:focus {
          background: $rte-tb-item-active-bg;
          border: $rte-tb-item-active-border;

          @if $skin-name == 'bootstrap5' {
            border: 0;
          }
        }

        &.e-active .e-tbar-btn .e-icons,
        &.e-active .e-tbar-btn:focus .e-icons {
          color: $rte-tb-active-font-color;
        }

        .e-icons {
          color: $rte-icons-color;
        }

        @if $skin-name == 'bootstrap5' {
          .e-tbar-btn:hover .e-icons {
            color: $rte-tb-hover-font-color;
          }

          .e-tbar-btn:focus .e-icons {
            color: $primary-text-focus;
          }
        }

        .e-dropdown-btn.e-active {
          background: $rte-drop-btn-active-bg;
          border-color: $rte-drop-btn-active-border-color;

          .e-icons,
          .e-rte-dropdown-btn-text {
            color: $rte-drop-btn-active-color;
          }
        }

        @if $skin-name == 'bootstrap5' {
          .e-tbar-btn:hover .e-rte-dropdown-btn-text {
            color: $rte-tb-hover-font-color;
          }
        }

        & .e-rte-backgroundcolor-dropdown,
        & .e-rte-fontcolor-dropdown,
        & .e-rte-numberformatlist-dropdown,
        & .e-rte-bulletformatlist-dropdown {

          &:hover .e-rte-color-content::after {
            background: $rte-split-btn-bar-bg;
          }

          &:active:hover {

            .e-icons {
              color: $rte-split-btn-color;
            }

            @if $skin-name == 'bootstrap5' or $skin-name == 'tailwind' {
              .e-icons {
                color: $rte-tb-hover-font-color;
              }
            }

            .e-caret:active.e-icons,
            .e-rte-color-content:active .e-icons,
            .e-rte-list-primary-content:active .e-icons {
              color: $rte-split-btn-active-color;
            }
          }

          &:hover {
            background: $rte-split-btn-hover-bg;

            .e-rte-color-content,
            .e-rte-list-primary-content {

              &:hover {
                background: $rte-split-btn-span-hover-bg;
              }

              &:focus {
                background: $rte-split-btn-span-focus-bg;
              }

              &:active {
                background: $rte-split-btn-span-active-bg;
              }
            }

            .e-caret {

              &:hover {
                background: $rte-split-btn-span-hover-bg;
              }

              &:focus {
                background: $rte-split-btn-span-focus-bg;
              }

              &:active {
                background: $rte-split-btn-span-active-bg;
              }
            }
          }

          &.e-active {
            background: $rte-split-btn-active-bg;
            border: $rte-split-btn-active-border;

            .e-rte-color-content::after {
              background: $rte-split-btn-active-bar-bg;
            }

            &:hover .e-caret:hover,
            &:hover .e-rte-color-content:hover,
            &:hover .e-rte-list-primary-content:hover {
              background: transparent;
            }

            .e-icons,
            &:active .e-icons {
              color: $rte-split-btn-active-color;
            }
          }
        }
      }

      .e-toolbar-extended {

        .e-toolbar-item .e-tbar-btn .e-icons {
          color: $rte-icons-color;
        }
        .e-toolbar-item .e-tbar-btn:hover .e-icons {
          color: $rte-hover-icons-color;
        }
        .e-toolbar-item .e-tbar-btn:focus .e-icons {
          color: $rte-hover-icons-color;
        }
        .e-toolbar-item.e-active .e-tbar-btn .e-icons {
          color: $rte-tb-active-font-color;
        }

        @if $skin-name != 'highcontrast' {
          .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
            color: $rte-ext-tbar-overlay-icons-color;
          }
        }

        .e-toolbar-item .e-dropdown-btn.e-active {
          background: $rte-drop-btn-active-bg;
        }

        @if $skin-name == 'bootstrap5' {
          .e-toolbar-item .e-tbar-btn:focus,
          .e-toolbar-item .e-tbar-btn:hover {
            border-radius: 4px;
          }
        }
      }

      &.e-rte-tb-float {
        border: 1px solid $rte-border-color;
      }

      &.e-tb-static {
        border-bottom: 1px solid $rte-border-color;
      }
    }
    .e-rte-tb-expand .e-rte-content:not(e-toolbar-wrapper) {
      border-top: 0 solid $rte-border-color;
    }
  
    .e-toolbar-wrapper .e-rte-toolbar:not(.e-rte-tb-float) {
      border-bottom: 1px solid $rte-border-color;
    }
    .e-toolbar-wrapper + .e-rte-toolbar:not(.e-rte-tb-float) {
      border: 0;
    }

    .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' {
      ::selection {
        color: $rte-selection-color;
        background: $rte-selection-bg;
      }
    }
    .e-rte-content,
    .e-source-content {
      background: $rte-content-bg;
      border: 1px solid $rte-border-color;
      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: 0;
        border-right: $rte-content-blockquote-border-left-color;
      }
    }

    &.e-rte-resize {
      background: $rte-content-bg;
    }

    .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-inline {

      .e-rte-content {
        border: 0;
      }
    }

    &:not(.e-rte-toolbar-enabled) {
      border: 1px solid $rte-border-color;

      .e-rte-content {
        border: 0;
        border-bottom: 0;
        border-top: 0;
      }
    }

    &.e-rte-tb-expand {
      border: 1px solid $rte-border-color;

      .e-rte-toolbar {
        border: 0;

        &.e-extended-toolbar,
        .e-toolbar-extended {
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
          border-top-left-radius: 0;
          border-top-right-radius: 0;
        }

        .e-toolbar-extended {
          border: 0;
          border-bottom: 0;

          &.e-popup-open {
            border-bottom: 1px solid $rte-border-color;
          }
        }

        &.e-expand-open + .e-rte-content {
          border-top: 0;
        }

        &.e-rte-tb-float {
          border-bottom: 1px solid $rte-border-color;
          border-right: 0 solid $rte-border-color;
          border-top: 1px solid $rte-border-color;

          &.e-expand-open {
            border-bottom: $rte-expand-tb-border-bottom;

            .e-toolbar-extended {
              border-bottom: 1px solid $rte-border-color;
              border-right: 0 solid $rte-border-color;
            }
          }
        }
      }

      .e-rte-content,
      .e-source-content {
        border: 0;
        border-bottom: 1px solid $rte-border-color;
        border-top: 1px solid $rte-border-color;
      }

      .e-toolbar-wrapper + .e-rte-content{
        border-top: 0 solid $rte-border-color;
      }

      .e-toolbar-extended.e-popup-open {
        border-bottom: 1px solid $rte-border-color;
      }

      &.e-rte-resize {
        .e-rte-content,
        .e-source-content {
          border-bottom: 0;
        }
      }
    }

    .e-audio-wrap,
    .e-embed-video-wrap {
      display: inline-block;
    }

    .e-clickelem,
    .e-video-clickelem {
      display: block;
      margin: 0;
      outline: none;
      padding: 0;
      position: relative;
    }

    .e-clickelem::after,
    .e-video-clickelem::after {
      background: transparent;
      bottom: 0;
      content: '';
      cursor: default;
      display: block;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 1;
    }

    .e-videoheader,
    .e-embed-videoheader,
    .e-video-url-wrap {
      padding-bottom: 5px;
      padding-top: 15px;
    }

    .e-video-url-wrap .e-radio-wrapper {
      padding: 5px;
    }

    .e-video-url-wrap textarea {
      height: 80px;
    }
  }

  .e-rte-quick-popup {
    border: $rte-quick-pop-border;
    border-radius: 2px;
    box-shadow: $rte-quick-pop-shadow;

    .e-rte-quick-toolbar {
      background: $rte-quick-pop-bg;
      border: $rte-quick-tb-border;

      .e-toolbar-items {
        background: $rte-quick-pop-bg;

        .e-separator {
          border: .5px solid $rte-quick-vr-line-color;
        }

        .e-tbar-btn {
          background: $rte-quick-pop-bg;
          border: $rte-quick-item-border;
        }

        .e-tbar-btn:hover {
          background: $rte-quick-tb-btn-hover;
          border-color: $rte-quick-item-hover-border-color;
        }

        .e-tbar-btn:focus {
          background: $rte-quick-pop-item-focus-bg;
        }

        .e-tbar-btn:active {
          background: $rte-quick-item-active-bg;
          border-color: $rte-quick-item-active-border-color;

          .e-icons {
            color: $rte-quick-item-active-font-color;
          }
        }

        .e-toolbar-item.e-active .e-tbar-btn,
        .e-toolbar-item.e-active .e-tbar-btn:focus {
          background: $rte-tb-item-active-bg;
          border: $rte-tb-item-active-border;
        }

        .e-toolbar-item.e-active .e-tbar-btn .e-icons,
        .e-toolbar-item.e-active .e-tbar-btn:focus .e-icons {
          color: $rte-tb-active-font-color;
        }

        .e-icons {
          color: $rte-icons-color;
        }

        @if $skin-name == 'bootstrap5' {
          .e-tbar-btn:hover .e-icons {
            color: $rte-tb-hover-font-color;
          }

          .e-tbar-btn:focus .e-icons {
            color: $primary-text-focus;
          }
        }
      }

      .e-toolbar-extended {

        .e-toolbar-item .e-tbar-btn .e-icons {
          color: $rte-icons-color;
        }
      }
    }

    .e-rte-dropdown-btn {
      background: $rte-quick-pop-bg;
      border-color: $rte-quick-drop-btn-border-color;

      &:focus,
      &:hover {
        background: $rte-quick-tb-btn-hover;
      }

      &:hover {
        border-color: $rte-quick-drop-btn-hover-border-color;

        @if $skin-name == 'highcontrast' {
          border-width: $rte-2px-border-size;
        }
      }
    }
  }

  .e-dialog .e-img-uploadwrap .e-droptext,
  .e-dialog .e-aud-uploadwrap .e-droptext,
  .e-dialog .e-vid-uploadwrap .e-droptext,
  .e-dialog.e-device .e-vid-uploadwrap .e-droptext  {
    border: dashed 2px $rte-upload-drag-border-clr;
    border-radius: 4px;
    color: $rte-drop-text-clr;
    display: block;
    font-family: $rte-font-family;
    font-size: 14px;
    height: $rte-drop-text-height;
    margin: 0 auto;
    text-align: center;
    width: auto;
  }

  .e-dialog .e-vid-uploadwrap .e-droptext {
    height: 108px;
  }

  .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 {
    margin: 0 auto;
    width: $rte-drop-text-mobile-width;
  }
  .e-dialog.e-device .e-video-url-wrap .e-radio-wrapper {
    padding: 8px 4px;
  }
  .e-linkheader {
    color: $rte-img-header-clr;
  }

  .e-rte-img-popup.e-popup {
    background: $rte-full-screen-bg;
    border: $rte-img-popup-border;
    box-shadow: $rte-img-popup-box-shadow;
    color: $rte-img-popup-color;
    padding: 10px;
  }

  .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: 1px solid $rte-img-resize-color;
    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: 1px solid $rte-img-resize-back-color;
    border-radius: 15px;
    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: 1px solid $rte-img-resize-color;
  }

  .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-color: $rte-dropdown-selection-bgcolor;
        color: $rte-dropdown-selection-color;
      }
    }
  }

  .e-popup-overlay {
    background-color: $rte-overlay-color;
  }

  .e-rte-toolbar.e-extended-toolbar .e-toolbar-item.e-overlay .e-dropdown-btn {
    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: solid rgba(0, 0, 0, .12);
    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: 1px solid $rte-border-color;
    }
    display: block;
    margin-bottom: 8px;
    margin-top: 12px;
  }

  .e-rte-table-popup .e-rte-popup-header {
    color: $rte-table-header-color;
    font-family: $rte-font-family;
    font-size: 14px;
    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: 1px solid $rte-table-span-active-border-color;
  }

  .e-rte-table.e-alternate-border tbody tr:nth-child(2n+0) {
    background-color: $rte-table-alternate-color;
    @if $skin-name == 'highcontrast' {
      color: $rte-img-popup-color;
    }
  }

  .e-rte-table th {
    background: $rte-table-header-bg;
  }

  .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: 1px solid $rte-table-border-color;
  }

  span.e-table-box.e-rbox-select {
    background-color: $rte-table-border-color;
    border: 1px solid $rte-table-border-color;
  }

  .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-rte-inline-popup .e-rte-quick-toolbar.e-rte-toolbar .e-toolbar-items .e-toolbar-item {
    &.e-active .e-tbar-btn .e-icons,
    & .e-tbar-btn:active .e-icons,
    & .e-tbar-btn:focus .e-icons,
    & .e-tbar-btn:hover .e-icons {
      color: $rte-quick-item-active-font-color;
    }
  }
  .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-active .e-icons {
    color: $rte-tlbar-expand-active;
  }

  .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 .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: none;
      box-shadow: none;

      & .e-toolbar-items {
        background: transparent;

        & .e-scroll-nav {
          border: none;
        }
      }
    }

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

    .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn .e-icons {
      color: $rte-icons-color;
    }

    .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
      border-radius: 4px;
    }

    .e-richtexteditor .e-toolbar .e-tbar-btn {
      border-bottom: 1px solid $transparent;
      border-top: 1px solid $transparent;
    }

    .e-richtexteditor .e-toolbar .e-tbar-btn:hover {
      background: $rte-tb-hover-bg-color;
      border: 1px solid $rte-quick-item-hover-border-color;
    }

    .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
      background: $rte-tb-hover-bg-color;
      border: 1px solid $rte-quick-item-hover-border-color;
    }
  }

  @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: 4px;
    }

    .e-richtexteditor .e-toolbar .e-insert-table-btn.e-btn:hover .e-icons {
      color: $rte-tb-hover-font-color;
    }
  }

  @if $skin-name == 'Material3' {
    .e-bigger .e-richtexteditor.e-rte-tb-expand {
      border-radius: 8px;
    }
    .e-bigger .e-richtexteditor .e-toolbar-wrapper {
      border-top-left-radius: $rte-border-top-left-radius;
      border-top-right-radius: $rte-border-top-right-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-border-top-left-radius;
      border-top-right-radius: $rte-border-top-right-radius;
    }
    .e-bigger .e-rte-toolbar .e-toolbar-items {
      border-top-left-radius: $rte-border-top-left-radius;
    }
    .e-bigger .e-rte-toolbar .e-hor-nav {
      border-top-right-radius: $rte-border-top-right-radius;
    }
    .e-bigger .e-rtl .e-rte-toolbar .e-hor-nav {
      border-top-left-radius: $rte-border-top-left-radius;
      border-top-right-radius: 0;
    }
    .e-bigger .e-rtl .e-rte-toolbar .e-toolbar-items {
      border-top-right-radius: $rte-border-top-right-radius;
    }
  }
  // Blazor styles start
  .e-richtexteditor.e-rte-tb-expand .e-rte-content-border {
    border-bottom: 0;
  }

  @if $skin-name == 'bootstrap5' or $skin-name == 'tailwind' {
    .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn:active .e-icons,
    .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn:active .e-rte-dropdown-btn-text,
    .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn:focus .e-rte-dropdown-btn-text,
    .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-icon-button:focus .e-icons {
      color: $rte-quick-item-active-font-color;
    }
  }

  // Blazor styles end
}


/*! component's theme wise override definitions and variables */
@include export-module('richtexteditor-material-icons') {

  /*! richtexteditor icons */

  .e-rte-toolbar,
  .e-rte-dropdown-popup {

    .e-alignments::before {
      content: '\e7b8';
    }

    .e-justify-left::before {
      content: '\e7b8';
    }

    .e-justify-center::before {
      content: '\e813';
    }

    .e-justify-right::before {
      content: '\e719';
    }

    .e-justify-full::before {
      content: '\e721';
    }

    .e-font-name::before {
      content: '\e76f';
    }

    .e-rte-font-color::before {
      content: '\e79f';
    }

    .e-background-color::before {
      content: '\e783';
    }

    .e-bold::before {
      content: '\e737';
    }

    .e-italic::before {
      content: '\e75a';
    }

    .e-underline::before {
      content: '\e82f';
    }

    .e-strike-through::before {
      content: '\e758';
    }

    .e-clear-format::before {
      content: '\e803';
    }

    .e-clear-all::before {
      content: '\e7cc';
    }

    .e-cut::before {
      content: '\e7fb';
    }

    .e-copy::before {
      content: '\e77c';
    }

    .e-paste::before {
      content: '\e70b';
    }

    .e-unorder-list::before {
      content: '\e77e';
    }

    .e-order-list::before {
      content: '\e7cb';
    }

    .e-indent::before {
      content: '\e810';
    }

    .e-outdent::before {
      content: '\e72a';
    }

    .e-undo::before {
      content: '\e713';
    }

    .e-redo::before {
      content: '\e755';
    }

    .e-super-script::before {
      content: '\e7a7';
    }

    .e-sub-script::before {
      content: '\e80a';
    }

    .e-create-link::before {
      content: '\e757';
    }

    .e-open-link::before {
      content: '\e77a';
    }

    .e-edit-link::before {
      content: '\e722';
    }

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

    .e-image::before {
      content: '\e786';
    }

    .e-audio::before {
      content: '\e894';
    }

    .e-video::before {
      content: '\e895';
    }

    .e-replace::before,
    .e-audio-replace::before,
    .e-video-replace::before {
      content: '\e710';
    }

    .e-align::before {
      content: '\e7b8';
    }

    .e-caption::before {
      content: '\e82e';
    }

    .e-remove::before,
    .e-audio-remove::before,
    .e-video-remove::before {
      content: '\e820';
    }

    .e-insert-link::before {
      content: '\e757';
    }

    .e-display::before,
    .e-audio-display::before,
    .e-video-display::before {
      content: '\e7b7';
    }

    .e-alt-text::before {
      content: '\e769';
    }

    .e-img-dimension::before,
    .e-video-dimension::before {
      content: '\e879';
    }

    .e-maximize::before {
      content: '\e81c';
    }

    .e-minimize::before {
      content: '\e7b0';
    }

    .e-zoom-in::before {
      content: '\e795';
    }

    .e-zoom-out::before {
      content: '\e825';
    }

    .e-lower-case::before {
      content: '\e746';
    }

    .e-upper-case::before {
      content: '\e793';
    }

    .e-print::before {
      content: '\e75d';
    }

    .e-formats::before {
      content: '\e844';
    }

    .e-source-code::before {
      content: '\e80e';
    }

    .e-preview::before {
      content: '\e7de';
    }

    .e-view-side::before {
      content: '\e82b';
    }

    .e-insert-code::before {
      content: '\e831';
    }

    .e-table-header::before {
      content: '\e7c3';
    }

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

    .e-table-rows::before {
      content: '\e77f';
    }

    .e-table-columns::before {
      content: '\e841';
    }

    .e-table-cell-ver-align::before {
      content: '\e74f';
    }

    .e-table-edit-properties::before {
      content: '\e730';
    }

    .e-create-table::before {
      content: '\e7e9';
    }

    .e-align-bottom::before {
      content: '\e7a0';
    }

    .e-align-middle::before {
      content: '\e74f';
    }

    .e-align-top::before {
      content: '\e707';
    }

    .e-insert-column-left::before {
      content: '\e78b';
    }

    .e-insert-column-right::before {
      content: '\e70e';
    }

    .e-delete-column::before {
      content: '\e714';
    }

    .e-insert-row-before::before {
      content: '\e836';
    }

    .e-insert-row-after::before {
      content: '\e801';
    }

    .e-delete-row::before {
      content: '\e7f2';
    }

    .e-style::before {
      content: '\e76e';
    }

    .e-rte-file-manager::before {
      content: '\e83c';
    }

    .e-rte-format-painter::before {
      content: '\e8bd';
    }
  }

  .e-richtexteditor {
    .e-south-east::before,
    .e-south-west::before {
      content: '\e761';
    }
  }

  .e-rtl {
    .e-rte-toolbar,
    .e-rte-dropdown-popup {
      .e-unorder-list::before {
        content: '\e8c4';
      }
  
      .e-order-list::before {
        content: '\e8c5';
      }
  
      .e-indent::before {
        content: '\e8c6';
      }
  
      .e-outdent::before {
        content: '\e8c7';
      }
    }
  }

  .e-cell-merge::before {
    content: '\e83a';
  }

  .e-cell-horizontal-split::before {
    content: '\e7a4';
  }

  .e-cell-vertical-split::before {
    content: '\e732';
  }

  .e-table-cell::before {
    content: '\e7c2';
  }
  
  .e-rte-cursor-brush {
    cursor: $rte-format-painter-cursor;
  }
}

//Layout Variable Start
$editor-big-value-text-font-size: $text-base !default;
$editor-nrml-value-text-font-size: $text-sm !default;
$editor-big-value-container-padding: 7px 12px 7px 12px !default;
$editor-nrml-value-container-padding: 3px 8px 5px 8px !default;
$editor-big-value-container-spin-padding: 8px !default;
$editor-nrml-value-container-spin-padding: 8px !default;
$editor-big-value-margin: 0 30px 0 0 !default;
$editor-nrml-value-margin: 0 28px 0 0 !default;
$editor-rtl-big-value-margin: 0 0 0  30px !default;
$editor-rtl-nrml-value-margin: 0 0 0 28px !default;
$editor-big-overlay-icon-size: $text-base !default;
$editor-nrml-overlay-icon-size: $text-sm !default;
$editor-big-overlay-icon-container-size: 20px !default;
$editor-nrml-overlay-icon-container-size: 20px !default;
$editor-big-overlay-icon-left-right: 8px !default;
$editor-nrml-overlay-icon-left-right: 8px !default;
$editor-tip-content-bdr-radius: 4px !default;
$editor-popup-tip-content-bdr-radius: 4px !default;
$editor-tip-title-font-weight: $font-weight-medium !default;
$editor-big-tip-title-font-size: $text-sm !default;
$editor-nrml-tip-title-font-size: $text-xs !default;
$editor-big-tip-title-padding: 12px 16px 12px 16px !default;
$editor-nrml-tip-title-padding: 9px 12px 9px 12px !default;
$editor-rtl-big-tip-title-padding: 12px 16px 12px 16px !default;
$editor-rtl-nrml-tip-title-padding: 9px 12px 9px 12px !default;
$editor-big-tip-title-container-size: 46px !default;
$editor-nrml-tip-title-container-size: 36px !default;
$editor-big-tip-wrapper-padding: 16px !default;
$editor-nrml-tip-wrapper-padding: 12px !default;
$editor-big-wrapper-title-with-padding: 16px !default;
$editor-nrml-wrapper-title-with-padding: 12px !default;
$editor-component-bottom-margin: 4px !default;
$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;

//Layout Variable End

//Theme Variable Start
$editor-value-hover-bg: $content-bg-color-alt2 !default;
$editor-value-text-color: $content-text-color !default;
$editor-overlay-icon-color: $icon-color !default;
$editor-value-text-border: 1px dashed $content-text-color !default;
$editor-background-color: $transparent !default;
$wrapper-background-color: $flyout-bg-color !default;
$editor-tip-border: 1px solid $border !default;
$editor-tip-bg: $content-bg-color !default;
$editor-tip-arrow-icon-color: $content-bg-color-alt1 !default;
$editor-tip-title-arrow-icon-color: $content-bg-color-alt1 !default;
$editor-tip-arrow-bdr-color: $content-bg-color-alt1 !default;
$editor-tip-title-arrow-bdr-color: $border !default;
$editor-tip-box-shadow: $shadow-lg !default;
$editor-tip-title-bg: $content-bg-color-alt1 !default;
$editor-tio-title-border-bottom: 0 !default;
$editor-tip-title-color: $content-text-color !default;
$editable-overlay-icon-height: inherit !default;
$editable-overlay-icon: 0 !default;
$editor-btn-icon-color: $icon-color !default;

//Theme Variable End

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

  /*! inplaceeditor layout */

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

      .e-btn-cancel {
        margin: $editor-big-btn-cancel-margin;
      }
    }

    &.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-inplaceeditor {
    display: inline-block;
    position: relative;
    width: auto;

    .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
      display: block;
      visibility: hidden;
    }

    .e-input-group.e-numeric.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: auto;
      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: auto;
      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: inherit;
        position: absolute;
        right: $editor-nrml-overlay-icon-left-right;
        top: 0;
        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: 0;
      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: auto;
        }

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

        .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: 0;
        right: auto;
      }
    }
  }

  .e-bigger .e-inplaceeditor,
  .e-inplaceeditor.e-bigger,
  .e-bigger .e-inplaceeditor-tip,
  .e-inplaceeditor-tip.e-bigger {
    width: auto;

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

      &.e-show {
        display: block;

        &:not(.e-rte-spin-wrap) .e-spinner-inner {
          left: auto;
          right: 5px;
          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;

        .e-btn-icon.e-icons {
          font-size: $editor-btn-save-icon-size;
        }
      }

      .e-btn-cancel {
        margin: $editor-nrml-btn-cancel-margin;

        .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: 5px;
        right: auto;
        transform: translateX(30%) translateY(-50%);
      }
    }
  }

  .e-bigger .e-inplaceeditor-tip,
  .e-inplaceeditor-tip.e-bigger {

    &.e-tooltip-wrap {

      .e-tip-content {
        @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' $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-inplaceeditor-tip {
    opacity: 1;
    width: auto;

    &.e-tooltip-wrap {
      max-width: 100%;

      .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
      .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
        display: block;
        visibility: hidden;
      }

      .e-tip-content {
        padding: 0;

        .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: auto;
            top: auto;
          }
        }

        .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: auto;
            top: auto;
          }
        }

        .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: 60px;
  }

  .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: 70px;
  }

  @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
    .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: 4px;
    }
  }

  @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
    .e-control.e-inplaceeditor .e-editable-value-wrapper {
      min-height: 30px;
    }

    .e-bigger .e-inplaceeditor .e-editable-value-wrapper,
    .e-inplaceeditor.e-bigger .e-editable-value-wrapper {
      min-height: 38px;
    }

    .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: 22px;
    }
  }
}


@include export-module('inplaceeditor-theme') {

  /*! 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' {
          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: darken($gray-600, 7.5%);
            border: 1px solid darken($gray-600, 10%);
          }

          &:disabled {
            background-color: $content-bg;
            border: 1px solid $gray-400;
            box-shadow: 0 1px 4px 0 $black-color;
          }
        }
        @else if $skin-name == 'bootstrap5' {

          &:hover {
            background-color: darken($gray-600, 7.5%);
            border: 1px solid darken($gray-600, 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: darken($gray-600, 10%);
            border: 1px solid darken($gray-600, 12.5%);
          }
        }

        &:hover,
        &:active {

          .e-btn-icon.e-icons {

            @if $skin-name == 'bootstrap4' or $skin-name =='bootstrap5' {
              color: $white;
            }
          }
        }

        &:focus {

          .e-btn-icon.e-icons {

            @if $skin-name == 'bootstrap4' {
              color: $white;
            }
          }
        }
      }
    }
  }

  @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
    .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 {
        background: $editor-tip-title-bg;
        border-bottom: $editor-tio-title-border-bottom;
        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-icons') {

  /*! inplaceeditor icons */
  .e-inplaceeditor,
  .e-inplaceeditor-tip {

    .e-save-icon::before {
      content: '\e774';
    }

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

    .e-editable-overlay-icon::before {
      content: '\e730';
    }
  }
}

//Layout Variables Start
$kanban-icons-border-radius: 4px !default;
$kanban-text-base: $text-base !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;

//Layout Variables End
//Theme Variables Start
$kanban-column-bg-color: $content-bg-color-alt1 !default;
$kanban-default-font-color: $content-text-color !default;
$kanban-content-font: $content-text-color-alt1 !default;
$kanban-border-color: $border-dark !default;
$kanban-dialog-text-areas-border-color: $gray-300 !default;
$kanban-card-selection-bg-color: $content-bg-color !default;
$kanban-dropped-clone-bg-color: $primary-lighter !default;
$kanban-dropped-clone-border-color: $primary !default;
$kanban-dragged-clone-border-color: $border-dark !default;
$kanban-icons-color: $gray-500 !default;
$kanban-bg-color: $content-bg-color !default;
$kanban-card-bg-color: $content-bg-color !default;
$kanban-text-area-bg-color: initial !default;
$kanban-text-area-color: $content-text-color !default;
$kanban-popup-overlay-bg-color: $overlay-bg-color !default;
$kanban-min-color: $warning-light !default;
$kanban-max-color: $danger-light-alt !default;
$kanban-header-border-color: $gray-300 !default;
$kanban-tags-bg-color: $content-bg-color-alt3 !default;
$kanban-tags-color: $content-text-color !default;
$kanban-card-selection-box-shadow: 0 4px 6px -1px rgba($black, .05), 0 10px 15px -3px rgba($black, .1) !default;

//Theme Variables End

$kanban-table-border-spacing: 10px 4px !default;
$kanban-table-swimlane-border-spacing: 10px 0 !default;
$kanban-table-bigger-border-spacing: 12px 4px !default;
$kanban-table-bigger-swimlane-border-spacing: 12px 0 !default;
$kanban-table-col-collapse-width: 42px !default;
$kanban-table-col-collapse-bgr-width: 48px !default;
$kanban-frozen-swimlane-row-padding: 12px 12px 12px 20px !default;
$kanban-frozen-swimlane-row-bgr-padding: 16px 16px 16px 28px !default;
$kanban-frozen-swimlane-row-header-padding: 0 0 0 8px !default;
$kanban-frozen-swimlane-row-header-line-height: $leading-normal !default;
$kanban-frozen-swimlane-row-header-font-size: $text-sm !default;
$kanban-frozen-swimlane-row-header-bgr-font-size: $text-base !default;
$kanban-frozen-swl-row-head-item-count-font-size: $text-xs !default;
$kanban-frozen-swl-row-head-item-count-bgr-font-size: $text-xs !default;
$kanban-frozen-swl-row-head-item-count-line-height: $leading-normal !default;
$kanban-frozen-swl-row-head-item-count-bgr-line-height: $leading-relaxed !default;
$kanban-frozen-swl-row-head-item-count-padding: 3px !default;
$kanban-frozen-swl-row-head-item-count-bgr-padding: 4px !default;
$kanban-frozen-swl-row-head-item-count-opacity: .57 !default;
$kanban-frozen-swl-row-head-item-count-font-weight: $font-weight-medium !default;
$kanban-swl-frozen-header-item-count-color: $content-text-color-alt3 !default;
$kanban-swl-frozen-header-row-icon-border: 1px solid transparent !default;
$kanban-swl-frozen-header-row-icon-height: 20px !default;
$kanban-swl-frozen-header-row-icon-margin: 1px !default;
$kanban-swl-frozen-header-row-icon-padding: 2px !default;
$kanban-swl-frozen-header-row-icon-font-size: $text-sm !default;
$kanban-swl-frz-head-row-icon-hover-margin: 1px !default;
$kanban-swl-frz-header-row-icon-hover-padding: 2px !default;
$kanban-swl-frozen-header-row-icon-hover-bg-color: $secondary-bg-color-hover !default;
$kanban-swl-frozen-header-row-icon-focus-bg-color: $secondary-bg-color-hover !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: $white !default;
$kanban-swl-frozen-header-row-icon-focus-box-shadow: $secondary-shadow-focus !default;
$kanban-header-cell-height: 44px !default;
$kanban-header-cell-bgr-height: 48px !default;
$kanban-header-cell-padding: 8px !default;
$kanban-stacked-header-cell-border-btm: 1px solid $border !default;
$kanban-toggle-header-icon-font-size: $text-sm !default;
$kanban-toggle-header-icon-bgr-font-size: $text-sm !default;
$kanban-toggle-header-expand-icon-padding: 4px !default;
$kanban-toggle-header-collapse-icon-padding: 2px !default;
$kanban-toggle-header-collapse-width: 42px !default;
$kanban-header-text-font-size: $text-xs !default;
$kanban-header-text-font-weight: $font-weight-medium !default;
$kanban-header-text-line-height: $leading-normal !default;
$kanban-header-text-overflow: ellipsis !default;
$kanban-header-text-bgr-font-size: $text-base !default;
$kanban-header-text-bgr-font-weight: $font-weight-medium !default;
$kanban-header-text-bgr-line-height: $leading-normal !default;
$kanban-header-text-bgr-transform: uppercase !default;
$kanban-header-item-count-font-size: $text-xxs !default;
$kanban-header-item-count-font-weight: $font-weight-medium !default;
$kanban-header-item-count-line-height: $leading-relaxed !default;
$kanban-header-item-count-opacity: 1 !default;
$kanban-header-item-count-margin-top: 0 !default;
$kanban-header-item-count-text-transform: capitalize !default;
$kanban-header-item-count-bgr-font-size: $text-xs !default;
$kanban-header-item-count-bgr-font-weight: $font-weight-medium !default;
$kanban-header-item-count-bgr-line-height: $leading-normal !default;
$kanban-header-item-count-bgr-margin-top: 4px !default;
$kanban-header-item-count-bgr-text-transform: capitalize !default;
$kanban-header-min-max-count-font-size: $text-xs !default;
$kanban-header-min-max-count-font-weight: $font-weight-medium !default;
$kanban-header-min-max-count-opacity: 1 !default;
$kanban-collapse-header-text-color: $content-text-color-alt1 !default;
$kanban-collapse-header-text-font-size: $text-xs !default;
$kanban-collapse-header-text-font-weight: $font-weight-medium !default;
$kanban-collapse-header-text-padding: 12px !default;
$kanban-collapse-header-text-transform: uppercase !default;
$kanban-card-container-padding: 12px 12px 0 !default;
$kanban-card-container-bgr-padding: 16px 16px 0 !default;
$kanban-empty-card-font-size: $text-sm !default;
$kanban-empty-card-line-height: $leading-normal !default;
$kanban-empty-card-padding: 20px 0 !default;
$kanban-empty-card-color: $content-text-color-alt2 !default;
$kanban-empty-card-margin: 0 auto !default;
$kanban-empty-card-display: table !default;
$kanban-card-margin-bottom: 12px !default;
$kanban-card-bgr-margin-bottom: 16px !default;
$kanban-card-border: 1px solid $border-light !default;
$kanban-card-border-radius: 6px !default;
$kanban-card-normal-box-shadow: none !default;
$kanban-card-header-padding: 12px 14px 0 !default;
$kanban-card-header-bgr-padding: 24px 24px 0 !default;
$kanban-color-card-header-padding: 12px 14px 0 14px !default;
$kanban-color-card-header-bgr-padding: 12px 20px 0 20px !default;
$kanban-card-header-title-font-size: $text-sm !default;
$kanban-card-header-title-line-height: $leading-relaxed !default;
$kanban-card-header-title-font-weight: $font-weight-medium !default;
$kanban-card-header-title-bgr-font-size: $text-base !default;
$kanban-card-header-title-bgr-line-height: $leading-normal !default;
$kanban-card-footer-padding: 13px 14px !default;
$kanban-card-footer-bgr-padding: 0 24px 12px !default;
$kanban-color-card-footer-padding: 8px 18px 8px 16px !default;
$kanban-color-card-footer-bgr-padding: 0 24px 12px 22px !default;
$kanban-card-content-font-size: $text-sm !default;
$kanban-card-content-line-height: $leading-relaxed !default;
$kanban-card-content-padding: 8px 14px !default;
$kanban-color-card-content-padding: 8px 14px 12px 14px !default;
$kanban-card-content-bgr-font-size: $text-base !default;
$kanban-card-content-bgr-line-height: $leading-relaxed !default;
$kanban-card-content-bgr-padding: 8px 24px 12px !default;
$kanban-color-card-content-bgr-padding: 12px 20px 12px 20px !default;
$kanban-color-card-border: 1px solid $transparent !default;
$kanban-color-card-border-left: 2px solid !default;
$kanban-color-card-hover-border: 1px solid $border-dark !default;
$kanban-color-card-hover-border-left: 2px solid !default;
$kanban-color-card-hover-box-shadow: none !default;
$kanban-color-card-focus-border: 1px solid $border-dark !default;
$kanban-color-card-focus-border-left: 2px solid !default;
$kanban-color-card-tags-padding: 8px 14px 0 12px !default;
$kanban-card-tags-padding: 12px 12px 0 !default;
$kanban-color-card-selection-border: 1px solid $primary !default;
$kanban-color-card-selection-border-left: 2px solid !default;
$kanban-color-card-selection-box-shadow: $kanban-card-normal-box-shadow !default;
$kanban-color-card-selection-hover-border: 1px solid $primary !default;
$kanban-color-card-selection-hover-border-left: 2px 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: 1px solid $primary !default;
$kanban-card-selection-box-shadow: $kanban-card-normal-box-shadow !default;
$kanban-card-selection-hover-border: 1px solid $primary !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: 2px !default;
$kanban-card-tag-font-size: $text-sm !default;
$kanban-card-tag-line-height: $leading-relaxed !default;
$kanban-card-tag-margin-right: 4px !default;
$kanban-card-tag-padding: 1px 4px !default;
$kanban-card-hover-border: 1px solid $border-dark !default;
$kanban-card-normal-hover-box-shadow: $kanban-card-normal-box-shadow !default;
$kanban-card-focus-border: 1px solid $border-dark !default;
$kanban-multi-card-text-bg-color: $content-bg-color !default;
$kanban-target-drag-drop-clone-margin-bottom: 12px !default;
$kanban-target-drag-drop-clone-bgr-margin-bottom: 16px !default;
$kanban-target-drag-drop-clone-border-radius: 6px !default;
$kanban-target-dragged-clone-bg-color: $content-bg-color-alt3 !default;
$kanban-swl-row-height: 46px !default;
$kanban-swl-row-header-padding: 12px !default;
$kanban-swl-row-header-bgr-padding: 14px !default;
$kanban-swl-header-icon-border: 1px solid transparent !default;
$kanban-swl-header-icon-color: $kanban-icons-color !default;
$kanban-swl-header-icon-height: 20px !default;
$kanban-swl-header-icon-margin: 1px !default;
$kanban-swl-header-icon-rtl-margin: 1px !default;
$kanban-swl-header-icon-padding: 0 !default;
$kanban-swl-header-icon-font-size: $text-sm !default;
$kanban-swl-header-icon-bgr-font-size: $text-sm !default;
$kanban-swl-header-icon-hover-border: $kanban-swl-header-icon-border !default;
$kanban-swl-header-icon-hover-color: $primary !default;
$kanban-swl-header-icon-hover-margin: 1px !default;
$kanban-swl-header-icon-hover-padding: 0 !default;
$kanban-swl-header-icon-hover-font-size: $text-sm !default;
$kanban-swl-header-icon-hover-background: none !default;
$kanban-swl-header-icon-hover-border-radius: $kanban-icons-border-radius !default;
$kanban-swl-header-icon-hover-box-shadow: $secondary-shadow-focus !default;
$kanban-swl-header-text-line-height: $leading-normal;
$kanban-swl-header-text-bgr-line-height: $leading-normal;
$kanban-swl-header-text-padding: 0 0 0 8px;
$kanban-swl-header-text-bgr-font-size: $text-base;
$kanban-swl-header-item-count-font-size: $text-xs;
$kanban-swl-header-item-count-line-height: 20px;
$kanban-swl-header-item-count-font-opacity: .57;
$kanban-swl-header-item-count-padding: 1px 2px;
$kanban-swl-header-item-count-color: inherit;
$kanban-swl-header-item-count-font-weight: $font-weight-medium;
$kanban-swl-header-item-count-bgr-font-size: $text-xs;
$kanban-swl-header-item-count-bgr-line-height: $leading-normal;
$kanban-swl-header-item-count-bgr-padding: 5px;
$kanban-content-cells-focus-border: 1px solid $transparent;
$kanban-content-cells-focus-box-shadow: $shadow-focus-ring1;
$kanban-mb-swl-name-font-size: $text-base;
$kanban-mb-swl-name-padding: 5px;
$kanban-mb-swl-name-color: inherit;
$kanban-mb-swl-name-font-weight: $font-weight-medium;
$kanban-mb-swl-name-line-height: $leading-normal;
$kanban-mb-swl-menu-icon-font-size: $text-lg;
$kanban-mb-swl-menu-icon-bgr-font-size: $text-xl;
$kanban-mb-swl-menu-icon-color: inherit;
$kanban-mb-swl-overlay-opacity: 1;
$kanban-dialog-form-table-td-line-height: $leading-normal;
$kanban-dialog-form-table-td-opacity: 1;
$kanban-dialog-form-table-td-padding: 8px 0;
$kanban-dialog-form-table-td-color: $content-text-color-alt1;
$kanban-dialog-form-table-td-font-weight: $font-weight-medium;
$kanban-mb-popup-content-padding: 5px !default;
$kanban-mb-popup-content-color: inherit !default;
$kanban-dialog-text-area-focus-shadow: 0 0 0 2px $primary !default;

//Color Start
$kanban-header-text-color: $content-text-color-alt1 !default;
$kanban-header-item-count-color: $content-text-color-alt3 !default;
$kanban-header-limits-color: $content-text-color-alt3 !default;
$kanban-col-expand-collapse-bg-color: none;
$kanban-col-expand-collapse-color: $primary;
$kanban-col-expand-collapse-border: 1px solid $transparent;
$kanban-col-expand-collapse-box-shadow: $shadow-focus-ring1;

//Color End

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

  /*! kanban component layout */

  .e-kanban {
    display: block;
    outline: medium none;
    position: relative;
    user-select: none;

    .e-kanban-table {
      border: 0;
      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: normal;
            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-header-cells {
        @if ($skin-name != 'material3') {
          border-radius: 4px;
        }
        @if ($skin-name == 'material3') {
          border-radius: 4px 4px 0 0;
        }
        height: $kanban-header-cell-height;
        overflow: hidden;
        padding: $kanban-header-cell-padding;
        position: relative;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;

        .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: 5px;
          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: 3px;

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

          .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: 26px;
            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: 4px 8px;
          }

          .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;
              text-transform: $kanban-collapse-header-text-transform;
              white-space: nowrap;
              writing-mode: vertical-lr;

              .e-item-count {
                display: inline-block;
                font-size: 13px;
                font-weight: normal;
                opacity: .57;
              }
            }
          }

          .e-show-add-button {
            border: 1px dashed $kanban-dropped-clone-border-color;
            height: 36px;
            margin: 8px 8px 0;

            .e-show-add-icon {
              padding: 11px;
              text-align: center;
            }

            &:focus {
              border: 1px dashed $kanban-border-color;
              color: $kanban-border-color;
            }
          }

          .e-multi-card-wrapper,
          .e-multi-card-container {
            display: none;
          }

          .e-card-wrapper,
          .e-card-container {
            height: inherit;
            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;

                .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: 1px solid $kanban-dragged-clone-border-color;
              height: 34px;
            }

            .e-multi-card-text {
              background: $kanban-multi-card-text-bg-color;
              display: table-cell;
              padding-left: 8px;
              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: 1px dashed $kanban-dragged-clone-border-color;
            }

            .e-target-dropped-clone {
              background: $kanban-dropped-clone-bg-color;
              border: 1px dashed $kanban-dropped-clone-border-color;
            }
          }

          .e-target-multi-clone {
            .e-column-key {
              border-bottom: 1px dashed $kanban-border-color;
              border-left: 1px dashed $kanban-border-color;
              border-right: 1px dashed $kanban-border-color;

              .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: 1px dashed $kanban-border-color;
            }
          }
        }

        &.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;
                box-shadow: $kanban-swl-header-icon-hover-box-shadow;
                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: 14px;
              font-weight: normal;
              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-swl-header-item-count-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: 1px solid transparent;
          border-radius: 4px;
          vertical-align: top;

          &.e-dropping {
            border: 1px dashed $kanban-border-color;
          }

          &.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: 1px dashed $kanban-border-color;
          }
        }

        &.e-collapsed:not(.e-swimlane-row) .e-content-cells {
          border-bottom: 0;
          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: 5px;
            padding-right: initial;
            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: 0;
          display: flex;
          margin-bottom: 3px;
          min-height: 42px;
          padding: 10px;

          .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-menu,
          .e-toolbar-level-title {
            padding-top: 6px;

            .e-icon-menu {
              color: $kanban-mb-swl-menu-icon-color;
              font-size: $kanban-mb-swl-menu-icon-font-size;
              padding: 7px;
              padding-left: 4px;
            }
          }
        }
      }

      .e-kanban-header {
        .e-swimlane {
          .e-header-cells {
            border-bottom: 0;
          }
        }
      }

      .e-swimlane-content {
        position: absolute;
        width: 100%;

        .e-swimlane-resource {
          background: $kanban-bg-color;
          border: 1px solid $kanban-header-border-color;
          height: 100%;
          width: 225px;

          .e-swimlane-tree {
            height: 100%;
            overflow-y: auto;
          }
        }

        .e-swimlane-overlay {
          position: absolute;

          &.e-enable {
            background: $kanban-popup-overlay-bg-color;
            height: 100%;
            opacity: $kanban-mb-swl-overlay-opacity;
            width: 100%;
          }
        }
      }
    }
  }

  .e-bigger .e-kanban,
  .e-bigger.e-kanban {
    .e-swimlane-header-toolbar {
      margin-bottom: 5px;
      min-height: 56px;

      .e-toolbar-swimlane-name {
        font-size: 18px;
      }

      .e-icon-menu {
        font-size: $kanban-mb-swl-menu-icon-bgr-font-size;
      }
    }

    .e-kanban-table.e-content-table {
      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: 4px;
          }

          &:hover,
          &:focus {
            @if $skin-name == 'bootstrap5' {
              padding-top: 4px;
            }
          }
        }
      }

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

  .e-mobile-popup-wrapper.e-device,
  .e-mobile-popup-container.e-device {
    background: $kanban-bg-color;
    border-radius: 2px;
    bottom: 0;
    box-shadow: $kanban-mb-popup-container-box-shadow;
    display: flex;
    height: 60px;
    left: 0;
    margin: 0;
    max-width: 100%;
    min-width: 100%;
    opacity: 1;
    overflow: hidden;
    padding: 15px;
    position: fixed;
    right: 0;
    top: 0;
    user-select: none;
    width: 100%;
    z-index: 1004;

    .e-popup-header {
      @if $skin-name == 'bootstrap4' {
        padding-top: 3px;
      }

      .e-close {
        @if $skin-name != 'bootstrap4' {
          background: transparent;
        }

        @if ($skin-name == 'fabric' or $skin-name == 'bootstrap') {
          border: 0;
        }
      }
    }

    .e-popup-content {
      color: $kanban-mb-popup-content-color;
      font-size: 15px;
      font-weight: 500;
      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: 14px;
        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: 10px;
        vertical-align: top;
        width: 70px;
      }

      .e-field {
        width: 100%;
      }
    }

    .e-footer-content {
      .e-dialog-delete.e-btn {
        float: left;
        margin-left: 0;
      }
    }
  }

  #{if(&, '&', '*')}.e-rtl {
    .e-kanban-form-wrapper table,
    .e-kanban-form-container table {
      .e-label {
        padding-left: 10px;
        padding-right: 0;
        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: inherit;
    overflow: hidden;
    padding: $kanban-card-container-padding;
  }
}


@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: 1px solid transparent;
          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;
            }
          }
        }

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

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

        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
          border-color: $kanban-dialog-text-areas-border-color;
          border-radius: 4px;
          outline: none;
          padding: 4px 8px 4px 12px;
        }

        &:focus {
          box-shadow: $kanban-dialog-text-area-focus-shadow;
        }
      }
    }
  }

  .e-card-virtual-skeleton-wrapper,
  .e-card-skeleton-wrapper {
    background: $kanban-column-bg-color;
  }
}


@include export-module('kanban-bootstrap-icons') {
  .e-kanban {
    .e-column-expand::before {
      content: '\e765';
    }

    .e-column-collapse::before {
      content: '\e748';
    }

    .e-swimlane-row-expand::before {
      content: '\e729';
    }

    .e-swimlane-row-collapse::before {
      content: '\e748';
    }

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

    .e-swimlane-header-toolbar {
      & .e-icon-menu::before {
        content: '\e799';
      }
    }

    &.e-rtl {
      .e-column-collapse::before {
        content: '\e765';
      }

      .e-column-expand::before {
        content: '\e748';
      }

      .e-swimlane-row-collapse::before {
        content: '\e765';
      }
    }
  }

  .e-mobile-popup-wrapper .e-close-icon::before {
    content: '\e7e7';
  }
}

//Layout Variables Start
//Mouse Mode Start
$toast-icon-nrml-height: 20px !default;
$toast-icon-nrml-width: 20px !default;
$toast-icon-nrml-size: $text-sm !default;
$toast-icon-nrml-right-margin: 14px !default;
$toast-close-icon-nrml-height: 20px !default;
$toast-close-icon-nrml-width: 20px !default;
$toast-close-icon-nrml-size: $text-sm !default;
$toast-position-nrml-distance: 10px !default;
$multitoast-nrml-gap-distance: 10px !default;
$toast-nrml-min-height: 48px !default;
$toast-nrml-padding: 0 !default;
$toast-action-btn-nrml-padding: 12px 0 !default;
$toast-action-btn-nrml-margin: 10px !default;
$toast-progressbar-nrml-height: 4px !default;
$toast-content-nrml-padding: 12px !default;
$toast-nrml-border-radious: 4px !default;
$toast-font-nrml-size: $text-sm !default;
$toast-title-font-nrml-size: $text-sm !default;

//Mouse Mode End

//Touch Mode Start
$toast-icon-bgr-height: 24px !default;
$toast-icon-bgr-width: 24px !default;
$toast-icon-bgr-size: 18px !default;
$toast-icon-bgr-right-margin: 16px !default;
$toast-close-icon-bgr-height: 24px !default;
$toast-close-icon-bgr-width: 24px !default;
$toast-close-icon-bgr-size: $text-sm !default;
$toast-position-bgr-distance: 10px !default;
$multitoast-bgr-gap-distance: 10px !default;
$toast-bgr-min-height: 48px !default;
$toast-action-btn-bgr-padding: 16px 0 !default;
$toast-action-btn-bgr-margin: 10px !default;
$toast-progressbar-bgr-height: 4px !default;
$toast-content-bgr-padding: 16px !default;
$toast-bgr-border-radious: 4px !default;
$toast-font-bgr-size: $text-sm !default;
$toast-title-font-weight: $font-weight-medium !default;

//Touch Mode End
//Layout Variables End

//Theme Variables Start
$toast-border: 1px solid $border-light !default;
$toast-box-shadow: $shadow !default;
$toast-hover-box-shadow: $shadow !default;
$toast-progress-color: $primary !default;
$toast-bg-color: $content-bg-color !default;
$toast-hover-bg-color: $content-bg-color !default;
$toast-active-bg-color: $content-bg-color !default;
$toast-font-color: $content-bg-color !default;
$toast-icon-color: $icon-color !default;
$toast-close-icon-color: $icon-color !default;
$toast-title-color: $content-text-color !default;
$toast-content-color: $content-text-color-alt1 !default;

// Toast Type Definitions Start
$toast-success-bg-color: $success-light !default;
$toast-success-color: $success-bg-color !default;
$toast-success-title-color: $success-bg-color !default;
$toast-success-title-border-color: $success-border-color !default;
$toast-success-icon-color: $success-bg-color !default;
$toast-success-content-color: $success-bg-color !default;
$toast-success-hover-bg-color: $success-light !default;
$toast-success-hover-color: $success-bg-color !default;
$toast-success-hover-box-shadow: $shadow !default;

$toast-info-bg-color: $info-light !default;
$toast-info-color: $info-dark !default;
$toast-info-title-color: $info-dark !default;
$toast-info-title-border-color: $info-dark !default;
$toast-info-icon-color: $info-dark !default;
$toast-info-content-color: $info-dark !default;
$toast-info-hover-bg-color: $info-light !default;
$toast-info-hover-color: $info-dark !default;
$toast-info-hover-box-shadow: $shadow !default;

$toast-warning-bg-color: $warning-light !default;
$toast-warning-color: $warning-dark !default;
$toast-warning-title-color: $warning-dark !default;
$toast-warning-title-border-color: $warning-dark !default;
$toast-warning-icon-color: $warning-dark !default;
$toast-warning-content-color: $warning-dark !default;
$toast-warning-hover-bg-color: $warning-light !default;
$toast-warning-hover-color: $warning-dark !default;
$toast-warning-hover-box-shadow: $shadow !default;

$toast-danger-bg-color: $danger-light !default;
$toast-danger-color: $danger-bg-color !default;
$toast-danger-title-color: $danger-bg-color !default;
$toast-danger-title-border-color: $border-error !default;
$toast-danger-icon-color: $danger-bg-color !default;
$toast-danger-content-color: $danger-bg-color !default;
$toast-danger-hover-bg-color: $danger-light !default;
$toast-danger-hover-color: $danger-bg-color !default;
$toast-danger-hover-box-shadow: $shadow !default;

// Toast Type Definitions End
//Theme Variables End

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

  /*! toast layout */
  /* stylelint-disable property-no-vendor-prefix */
  .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: 0 auto $multitoast-bgr-gap-distance;
      }
    }

    &.e-toast-top-center {
      top: $toast-position-bgr-distance;

      .e-toast {
        margin: 0 auto $multitoast-bgr-gap-distance;
      }
    }

    &.e-toast-full-width {
      left: 0;
      right: 0;

      .e-toast {
        margin: 0 auto $multitoast-bgr-gap-distance;
      }
    }

    &.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: auto;
        }

        .e-toast-icon {
          margin-left: $toast-icon-bgr-right-margin;
          margin-right: initial;
        }

        .e-toast-progress {
          left: auto;
          right: 0;
        }
      }
    }

    .e-toast {
      border-radius: $toast-bgr-border-radious;
      font-size: $toast-font-bgr-size;
      margin: 0 0 $multitoast-bgr-gap-distance;
      min-height: $toast-bgr-min-height;

      .e-toast-message {

        .e-toast-content {
          padding: $toast-content-bgr-padding;

          &:first-child {
            padding: 0;
            @if $skin-name == 'bootstrap5' {
              padding-bottom: 8px;
              padding-left: 48px;
              padding-right: 12px;
              padding-top: 8px;
            }
          }

          &:last-child {
            padding-bottom: 0;
            @if $skin-name == 'bootstrap5' {
              padding-bottom: 16px;
            }
          }

          + .e-toast-actions {
            padding: 0;
            @if $skin-name == 'bootstrap5' {
              padding: $toast-action-btn-bgr-padding;
            }
          }
          @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
            + .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' {
            border-top: 1px solid $border;
            margin-left: 16px;
            margin-right: 16px;
          }

          > * {
            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' {
          margin-top: 13px;
          position: absolute;
          right: 12px;
        }
      }

      .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' {
          left: 18px;
          margin-top: 13px;
          position: absolute;
        }
      }

      .e-toast-progress {
        height: $toast-progressbar-bgr-height;
      }
    }
  }

  .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: 0;
      width: 100%;

      .e-toast {
        margin: 0 auto $multitoast-nrml-gap-distance;
        pointer-events: auto;
      }
    }

    &.e-toast-top-center {
      pointer-events: none;
      right: 0;
      top: $toast-position-nrml-distance;
      width: 100%;

      .e-toast {
        margin: 0 auto $multitoast-nrml-gap-distance;
        pointer-events: auto;
      }
    }

    &.e-toast-full-width {
      left: 0;
      right: 0;
      width: 100%;

      .e-toast {
        margin: 0 auto $multitoast-nrml-gap-distance;
        width: 96%;
      }
    }

    &.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: auto;
        }

        .e-toast-icon {
          margin-left: $toast-icon-nrml-right-margin;
          margin-right: initial;
        }

        .e-toast-progress {
          left: auto;
          right: 0;
        }
      }
    }

    .e-toast {
      border-radius: $toast-nrml-border-radious;
      display: inline-flex;
      font-size: $toast-font-nrml-size;
      margin: 0 0 $multitoast-nrml-gap-distance;
      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;

        .e-toast-title,
        .e-toast-content {
          overflow: hidden;
          text-overflow: ellipsis;

          &:first-child {
            padding: 0;
            @if $skin-name == 'bootstrap5' {
              padding-bottom: 12px;
              padding-left: 12px;
              padding-right: 12px;
              padding-top: 12px;
            }
          }

          &:last-child {
            padding-bottom: 0;
            @if $skin-name == 'bootstrap5' {
              padding-bottom: 12px;
            }
          }

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

        .e-toast-title {
          font-size: $toast-title-font-nrml-size;
          font-weight: $toast-title-font-weight;
          letter-spacing: .5px;
          @if $skin-name == 'bootstrap5' {
            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: 0;
            @if $skin-name == 'bootstrap5' {
              padding: $toast-action-btn-bgr-padding;
            }
          }
        }

        .e-toast-actions {
          @if $skin-name == 'highcontrast' {
            margin: 1px 0 0 3px;
          }
          @else {
            margin: 1px;
          }
          @if $skin-name == 'bootstrap5' {
            border-top: 1px solid $border;
            margin-left: 12px;
            margin-right: 12px;
          }
          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' {
                padding-left: 48px;
              }
            }
          }
        }
      }

      &.e-toast-header-close-icon {
        .e-toast-message {
          .e-toast-title,
          .e-toast-content {
            &:first-child {
              @if $skin-name == 'bootstrap5' {
                padding-right: 30px;
              }
            }
          }
        }
      }

      .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: auto;
        width: $toast-close-icon-nrml-width;
        @if $skin-name == 'material' {
          opacity: .7;
        }
        @if $skin-name == 'bootstrap5' {
          margin-top: 13px;
          position: absolute;
          right: 8px;
        }
      }

      .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' {
          left: 16px;
          margin-top: 13px;
          position: absolute;
        }
      }

      .e-toast-progress {
        bottom: 0;
        height: $toast-progressbar-nrml-height;
        left: 0;
        position: absolute;
      }
    }
  }

  .e-content-placeholder.e-toast.e-placeholder-toast {
    background-size: 400px 100px;
    min-height: 100px;
  }

  .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: 100px;
  }

  .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: 50%;
    bottom: 6px;
    height: 20px;
    position: relative;
    width: 22px;
  }

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


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


@include export-module('toast-material-icons') {
  .e-toast {
    .e-toast-close-icon::before {
      content: '\e7e7';
      font-family: 'e-icons';
    }

    .e-toast-success-icon::before {
      content: '\e727';
      font-family: 'e-icons';
    }

    .e-toast-error-icon::before {
      content: '\e878';
      font-family: 'e-icons';
    }

    .e-toast-info-icon::before {
      content: '\e800';
      font-family: 'e-icons';
    }

    .e-toast-warning-icon::before {
      content: '\e88b';
      font-family: 'e-icons';
    }
  }
}

/*! PdfViewer's default definitions and variables */
$pv-background: $content-bg-color-alt2 !default;
$pv-control-border-color: $content-bg-color-alt2 !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%) !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: solid !default;
$pv-page-div-border-color: $border-light !default;
$pv-page-div-border-boxing: border-box !default;
$pv-page-div-box-shadow: none !default;
$pv-page-div-position: absolute !default;
$pv-icon-color: $icon-color !default;
$pv-icon-disable-color: $pv-icon-color !default;
$pv-icon-font-size: 16px !default;
$pv-icon-margin: 7px 7.5px !default;
$pv-icon-height: 18px !default;
$pv-icon-width: 18px !default;
$pv-toolbar-height: 38px !default;
$pv-toolbar-height-big: $pv-toolbar-height !default;
$pv-toolbar-border: solid $border-light !default;
$pv-toolbar-border-width: 1px 1px 0 1px !default;
$pv-toolbar-border-radius: 0 !default;
$pv-current-page-height: 28px !default;
$pv-current-page-width: 46px !default;
$pv-zoom-dropdown-height: 32px !default;
$pv-zoom-dropdown-width: 86px !default;
$pv-password-input-margin-top: 8px !default;
$pv-password-error-color: $error-font-color !default;
$pv-corrupted-pop-header-opacity: .87 !default;
$pv-corrupted-pop-header-font-size: 20px !default;
$pv-corrupted-pop-header-letter-spacing: -.2px !default;
$pv-corrupted-pop-header-text-align: left !default;
$pv-corrupted-pop-content-font-size: 16px !default;
$pv-corrupted-pop-header-color: $primary !default;
$pv-corrupted-pop-content-letter-spacing: -.16px !default;
$pv-corrupted-pop-content-line-height: 24px !default;
$pv-corrupted-pop-content-margin-left: 50px !default;
$pv-toolbar-separator-margin-left: 3px !default;
$pv-toolbar-separator-margin-right: 3px !default;
$pv-toolbar-separator-border-right-width: 1px !default;
$pv-toolbar-separator-height: 24px !default;
$pv-toolbar-popup-icon-padding: 0 16px 0 0;
$pv-toolbar-popup-icon-padding-rtl: 0 0 0 16px;
$pv-toolbar-items-margin-left: .5px !default;
$pv-toolbar-items-margin-right: .5px !default;
$pv-toolbar-items-padding-top: 4px !default;
$pv-toolbar-items-padding-bottom: 4px !default;
$pv-toolbar-items-first-child-margin-left: 4.5px !default;
$pv-toolbar-items-last-child-margin-right: 4.5px !default;
$pv-toolbar-btn-height: 30px !default;
$pv-toolbar-btn-width: 30px !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: 16px !default;
$pv-toolbar-open-icon-height: 12.44px !default;
$pv-toolbar-open-icon-line-height: 12.44px !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-first-page-icon-line-height: 14px !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-previous-page-icon-line-height: 14px !default;
$pv-toolbar-next-page-icon-line-height: 14px !default;
$pv-toolbar-last-page-icon-line-height: 14px !default;
$pv-toolbar-zoom-out-icon-size: 16px !default;
$pv-toolbar-zoom-out-icon-line-height: 16px !default;
$pv-toolbar-zoom-drop-margin: 0 4px !default;
$pv-toolbar-zoom-drop-padding: 6px 0 !default;
$pv-toolbar-total-page-div-padding-left: 0 !default;
$pv-toolbar-total-page-padding-bottom: 0 !default;
$pv-toolbar-total-page-div-margin-left: 0 !default;
$pv-toolbar-total-page-div-margin-right: 9.5px !default;
$pv-toolbar-total-page-font-color: $content-text-color-alt1 !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 !default;
$pv-toolbar-zoom-drop-down-border: 0 !default;
$pv-toolbar-zoom-drop-down-border-focus: 0 !default;
$pv-toolbar-zoom-drop-down-border-radius: 2px !default;
$pv-toolbar-zoom-drop-down-background-color: $content-bg-color !default;
$pv-material-line-background: none !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: 3px !default;
$pv-zoom-drop-down-padding-left: 12px !default;
$pv-zoom-drop-down-padding-left-rtl: 0 !default;
$pv-zoom-drop-down-padding-right-rtl: $pv-zoom-drop-down-padding-left !default;
$pv-zoom-drop-down-input-height: auto !default;
$pv-zoom-drop-down-input-margin-top: 0 !default;
$pv-zoom-drop-down-margin-top: 0 !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: $primary !default;
$pv-current-page-border: 1px solid $border !default;
$pv-current-page-border-radius: 4px !default;
$pv-current-page-padding-left: 0 !default;
$pv-current-page-padding-right-rtl: $pv-current-page-padding-left !default;
$pv-current-page-height: 28px !default;
$pv-current-page-padding-bottom: 4px !default;
$pv-dialog-pop-header-font-weight: 500 !default;
$pv-password-pop-content-font-size: 16px !default;
$pv-password-pop-content-letter-spacing: -.16px !default;
$pv-corrupted-pop-content-padding-top: 4.7px !default;
$pv-password-pop-content-padding-top: 6px !default;
$pv-zoom-drop-down-popup-height: 327px !default;
$pv-zoom-drop-down-popup-width: 110px !default;
$pv-zoom-drop-down-transform: rotate(0deg) !default;
$pv-corrupted-dialog-width: 409px !default;
$pv-corrupted-dialog-height: 180px !default;
$pv-corrupted-dialog-header-border-bottom: 0 !default;
$pv-corrupted-dialog-footer-border-top: 0 !default;
$pv-password-dialog-width: 500px !default;
$pv-password-dialog-height: 198px !default;
$pv-password-dialog-header-border-bottom: 0 !default;
$pv-password-dialog-footer-border-top: 0 !default;
$pv-dialog-pop-close-icon-padding-top: 6px !default;
$pv-corrupted-dialog-pop-content-padding-top: 6.9px !default;
$pv-corrupted-dialog-pop-content-padding-bottom: 15px !default;
$pv-password-dialog-pop-content-padding-bottom: 11px !default;
$pv-toolbar-total-page-number-color: $content-text-color !default;
$pv-toolbar-total-page-number-font-size: 13px !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: 36.7px 31.7px !default;
$pv-corrupted-notification-height: 31.7px !default;
$pv-corrupted-notification-background-position: right !default;
$pv-toolbar-open-icon-font-size: $pv-icon-font-size !default;
$pv-thumbnail-icon-disable-color: $icon-color-disabled !default;
$pv-thumbnail-icon-selection-color: $secondary-text-color-pressed !default;
$pv-sidebar-container-position: $pv-page-div-position !default;
$pv-sidebar-container-top: 56px !default;
$pv-sidebar-container-bottom: 0 !default;
$pv-sidebar-container-width: 250px !default;
$pv-sidebar-container-z-index: 100 !default;
$pv-sidebar-container-background: $primary !default;
$pv-sidebar-container-border-top:  1px solid $primary !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: 38px !default;
$pv-sidebar-content-container-display: none !default;
$pv-sidebar-content-container-height: calc(100% - 38px) !default;
$pv-sidebar-content-container-width: 202px !default;
$pv-sidebar-content-container-float: left !default;
$pv-sidebar-content-container-border-top:  1px solid $border-light !default;
$pv-sidebar-title-container-width: 202px !default;
$pv-sidebar-title-container-position: $pv-page-div-position !default;
$pv-sidebar-title-container-height: 40px !default;
$pv-sidebar-title-container-top: 0 !default;
$pv-sidebar-title-container-border-width: 0 1px 0 0 !default;
$pv-sidebar-title-container-background: $content-bg-color-alt1 !default;
$pv-sidebar-title-container-z-index: 102 !default;
$pv-sidebar-title-margin: 0 !default;
$pv-sidebar-title-top: 0 !default;
$pv-sidebar-title-left: 8px !default;
$pv-sidebar-title-vertical-align: middle !default;
$pv-sidebar-title-line-height: 38px !default;
$pv-sidebar-title-position: $pv-page-div-position !default;
$pv-sidebar-title-width: 160px !default;
$pv-sidebar-title-height: 40px !default;
$pv-sidebar-title-font-size: 14px !default;
$pv-sidebar-title-color: $content-text-color-alt1 !default;
$pv-sidebar-title-text-align: left !default;
$pv-sidebar-toolbar-z-index: 100 !default;
$pv-sidebar-toolbar-width: 38px !default;
$pv-sidebar-toolbar-height: calc(100% - 38px) !default;
$pv-sidebar-toolbar-bottom: 0 !default;
$pv-sidebar-toolbar-background: $content-bg-color-alt1 !default;
$pv-sidebar-toolbar-position: $pv-page-div-position !default;
$pv-sidebar-toolbar-border:  1px solid $border-light !default;
$pv-sidebar-toolbar-border-width:  1px 1px 1px 1px !default;
$pv-sidebar-content-top: 38px !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: $content-bg-color-alt1 !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: $content-bg-color-alt1 !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 $border-light !default;
$pv-sidebar-content-scrollbar-track-background: $content-bg-color-alt1 !default;
$pv-sidebar-content-scrollbar-track-border: 1px solid $border-light !default;
$pv-sidebar-content-scrollbar-thumb-border-radius: 100px !default;
$pv-sidebar-content-scrollbar-thumb-background: $border !default;
$pv-sidebar-content-scrollbar-thumb-box-shadow: inset 0 0 0 $border-light !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: 30px !default;
$pv-thumbnail-view-button-height: 30px !default;
$pv-thumbnail-view-button-margin: 12px 2px !default;
$pv-thumbnail-view-button-background: $transparent !default;
$pv-thumbnail-view-button-selection-background: $secondary-bg-color-pressed !default;
$pv-thumbnail-view-button-selection-line-height: inherit !default;
$pv-thumbnail-border-radius: 4px !default;
$pv-thumbnail-outline: none !default;
$pv-thumbnail-view-button-font-weight: 500 !default;
$pv-thumbnail-view-button-border: 0 !default;
$pv-thumbnail-view-button-box-shadow: none !default;
$pv-thumbnail-view-button-padding: 0 !default;
$pv-thumbnail-view-button-selection-padding: 0 !default;
$pv-thumbnail-view-button-selection-border: none !default;
$pv-thumbnail-border-selection-radius: 4px !default;
$pv-bookmark-button-width: 30px !default;
$pv-bookmark-button-height: 30px !default;
$pv-bookmark-button-margin: 15px 2px !default;
$pv-bookmark-button-background: $transparent !default;
$pv-bookmark-button-border: none !default;
$pv-bookmark-button-box-shadow: none !default;
$pv-bookmark-button-padding: 0 !default;
$pv-title-close-width: 32px !default;
$pv-title-close-height: 40px !default;
$pv-title-close-left: 0 !default;
$pv-title-close-right: 0 !default;
$pv-title-close-top: 0 !default;
$pv-title-close-padding: 1px !default;
$pv-title-close-background: $transparent !default;
$pv-title-close-position: absolute !default;
$pv-title-close-border: none !default;
$pv-title-close-box-shadow: none !default;
$pv-sidebar-toolbar-splitter-width: 0 !default;
$pv-sidebar-toolbar-splitter-left: 38px !default;
$pv-sidebar-toolbar-splitter-background: $border-light !default;
$pv-sidebar-toolbar-splitter-height: calc(100% - 38px) !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: $border-light !default;
$pv-sidebar-content-splitter-z-index: 104 !default;
$pv-sidebar-content-splitter-top: 38px !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 24px 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: 1px solid $border-light;
$pv-thumbnail-selection-ring-border-radius: 0 !default;
$pv-thumbnail-selection-ring-padding: 2px !default;
$pv-thumbnail-selection-ring-box-shadow: $shadow-sm !default;
$pv-thumbnail-image-width: 94px !default;
$pv-thumbnail-image-height: 126px !default;
$pv-thumbnail-image-background-color: $white !default;
$pv-thumbnail-image-background-clip: content-box !default;
$pv-thumbnail-hover-border-radius: 0 !default;
$pv-thumbnail-hover-padding: 2px !default;
$pv-thumbnail-hover-cursor: pointer !default;
$pv-thumbnail-hover-border: 1px solid $border-dark !default;
$pv-thumbnail-hover-box-shadow: $shadow-sm !default;
$pv-thumbnail-focus-border-radius: 0 !default;
$pv-thumbnail-focus-cursor: pointer !default;
$pv-thumbnail-focus-padding: 0 !default;
$pv-thumbnail-focus-border: 2px solid $primary !default;
$pv-thumbnail-focus-box-shadow: $shadow-sm !default;
$pv-thumbnail-selection-border-radius: 0 !default;
$pv-thumbnail-selection-cursor: pointer !default;
$pv-thumbnail-selection-padding: 1px !default;
$pv-thumbnail-selection-border: 2px solid $primary !default;
$pv-thumbnail-selection-box-shadow: $shadow-sm !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: 0 !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: 16px !default;
$pv-bookmark-icon-padding-left: 0 !default;
$pv-bookmark-title-padding-left: 30px !default;
$pv-bookmark-expandable-icon-margin-top: 6px !default;
$pv-bookmark-icon-font: $content-text-color-alt1 !default;
$pv-sidebar-bookmark-title-font-size: 14px !default;
$pv-sidebar-bookmark-title-font-family: Roboto-Regular !default;
$pv-sidebar-bookmark-title-color: $content-text-color-alt1 !default;
$pv-sidebar-bookmark-title-font: $content-text-color-alt1 !default;
$-treeview-overflow: unset !default;
$-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: 0 !default;
$pv-bookmark-view-icon-collapsible-height: 13px !default;
$pv-bookmark-view-icon-collapsible-width: 13px !default;
$pv-item-selection-color: $secondary-text-color-pressed !default;
$pv-item-selection-background-color: $secondary-bg-color-pressed !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: $black !default;
$pv-print-popup-container-opacity: .3 !default;
$pv-search-box-height: 104px !default;
$pv-search-box-width: 348px !default;
$pv-search-box-background-color: $content-bg-color-alt1 !default;
$pv-search-box-border: 1px solid $border-light !default;
$pv-search-box-border-radius: 2px !default;
$pv-search-box-box-shadow: 0 3px 8px 0 $border-light !default;
$pv-search-box-padding: 16px !default;
$pv-search-input-height: 31px !default;
$pv-search-input-width: 240px !default;
$pv-match-case-margin-top: 12px !default;
$pv-search-btn-height: 24px !default;
$pv-search-btn-width: 24px !default;
$pv-search-btn-margin-top: -6px;
$pv-search-prev-margin-left: 16px !default;
$pv-search-next-margin-left: 8px !default;
$pv-notification-popup-height: 180px !default;
$pv-notification-popup-width: $pv-corrupted-dialog-width !default;
$pv-notification-popup-height-large-content: 205px;
$pv-notification-popup-width-large-content: 400px;
$pv-notification-content-font-size: 16px !default;
$pv-zoom-dropdown-input-focus-color: inherit !default;
$pv-text-selection-bg-color: $info !default;
$pv-text-selection-opacity: .6 !default;
$pv-selection-touch-element-background-color: $primary !default;
$pv-selection-touch-element-border-color: $primary !default;
$pv-icon-padding-top: 7px !default;
$pv-material-line-background: none !default;
$pv-toolbar-btn-padding: 0 1.5px !default;
$pv-toolbar-btn-line-height: 25px !default;
$pv-toolbaritem-btn-line-height: 26px !default;
$pv-toolbaritem-btn-min-height: 26px !default;
$pv-toolbar-btn-margin: 4px 0 !default;
$pv-mobile-page-box-padding-top: 4px !default;
$pv-zoom-dropdown-width-mobile: 93px !default;
$pv-mobile-page-box-padding-left-focus: 0 !default;
$pv-password-dialog-height-mobile: 240px !default;
$pv-notification-dialog-height-mobile: 195px !default;
$pv-notification-dialog-height-large-mobile: 220px !default;
$pv-corrupted-dialog-height-mobile: 198px !default;
$pv-dialog-pop-close-icon-padding-top-mobile: $pv-dialog-pop-close-icon-padding-top !default;
$pv-sidebar-resizer-border: 0 !default;
$pv-sidebar-resizer-border-width: $pv-sidebar-resizer-border !default;
$pv-sidebar-resizer-color: inherit !default;
$pv-input-active-background: $transparent !default;
$pv-input-active-color: rgba($primary, .54) !default;
$pv-input-hover-background: $transparent !default;
$pv-input-hover-color: rgba($primary, .54) !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: $content-bg-color-alt1 !default;
$pv-nav-toolbar-text-color: rgba($primary, .87) !default;
$pv-toolbar-btn-width-mobile: 36px !default;
$pv-toolbar-btn-height-mobile: 30px !default;
$pv-bookmark-container-border: 1px solid $border-light !default;
$pv-bookmark-list-border-bottom: 1px solid $border-light !default;
$pv-annotation-opacity-popup-background-color: $white !default;
$pv-annotation-opacity-popup-color: $content-text-color !default;
$pv-annotation-opacity-popup-padding: 16px !default;
$pv-annotation-opacity-popup-min-height: 48px !default;
$pv-annotation-opacity-popup-box-shadow: 0 3px 8px 0 $content-bg-color-hover !default;
$pv-annotation-opacity-slider-width: 172px !default;
$pv-annotation-opacity-slider-width-rtl: 140px !default;
$pv-annotation-opacity-slider-margin-left: 11px !default;
$pv-annotation-opacity-slider-margin-right: 10px !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: auto !default;
$pv-annotation-opacity-icon-padding-top: 1px !default;
$pv-annotation-dropdown-background-color: $transparent !default;
$pv-annotation-dropdown-border-color: $transparent !default;
$pv-annotation-dropdown-background-color-hover: $secondary-bg-color-hover !default;
$pv-annotation-dropdown-border-color-hover: $secondary-border-color-hover !default;
$pv-annotation-dropdown-background-color-active: $secondary-bg-color-pressed !default;
$pv-annotation-dropdown-border-color-active: $transparent !default;
$pv-annotation-drop-down-btn-line-height: 1.6em !default;
$pv-annotation-drop-down-btn-padding: 10px 7px 7px !default;
$pv-annotation-icon-padding: 0 8px !default;
$pv-annotation-note-border-bottom-color: $black !default;
$pv-annotation-note-popup-bg-color: $white !default;
$pv-print-overlay-bg-color: rgba($pv-print-popup-container-background-color, $pv-print-popup-container-opacity) !default;
$pv-comment-font-color: $content-text-color-alt1 !default;
$pv-comment-text-color: $primary !default;
$pv-comment-color: $pv-comment-font-color;
$pv-comment-panel-bg: $content-bg-color-alt1 !default;
$pv-comment-tile-text-color: $content-text-color !default;
$pv-comment-tile-font-weight: 500 !default;
$pv-comment-panel-bottom-color: $border-light !default;
$pv-comments-content-container-bg: $content-bg-color-alt1 !default;
$pv-comments-select-bg: $content-bg-color-hover !default;
$pv-comments-hover-bg: $content-bg-color-hover !default;
$pv-annotation-thickness-drop-down-padding-top: 10px !default;
$pv-stamp-container-border-radius: 2px !default;
$pv-stamp-icon-margin-top: 0 !default;
$pv-properties-padding: 4px 11px !default;
$pv-properties-drop-down-margin-left: 95px !default;
$pv-properties-line-style-padding: 8px !default;
$pv-status-icon-color: $white !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-panel-border-color: $border-light !default;
$pv-drop-down-toolbar-box-shadow: $shadow-sm !default;
$pv-line-stroke-color-margin-left: 163px !default;
$pv-line-leader-length-margin-left: 16px !default;
$pv-annot-toolbar-dropdown-btn-height: 32px !default;
$pv-annot-toolbar-dropdown-btn-line-height: 32px !default;
$pv-annot-toolbar-dropdown-btn-width: auto !default;
$pv-annot-toolbar-dropdown-btn-padding-top: 1px !default;
$pv-properties-win-max-width: 424px !default;
$pv-properties-form-field-win-max-width: 477px !default;
$pv-properties-win-max-width-big: 435px !default;
$pv-properties-container-margin-bottom: 16px !default;
$pv-properties-container-height: 52px !default;
$pv-scale-ratio-win-max-width: 476px !default;
$pv-scale-ratio-win-max-width-big: 464px !default;
$pv-prop-line-styles-color: $content-text-color !default;
$pv-prop-line-styles-hover-bg: $content-bg-color-hover !default;
$pv-prop-color-picker-height: 30px !default;
$pv-prop-color-picker-line-height: 16px !default;
$pv-scale-ratio-win-drop-down-padding: 6px 8px 4px !default;
$pv-scale-ratio-win-drop-down-caret-margin-left: 120px !default;
$pv-scale-ratio-win-drop-down-caret-margin-top: 7px !default;
$pv-scale-ratio-input-container-height: 32px !default;
$pv-scale-ratio-input-container-margin-bottom: 8px !default;
$pv-scale-ratio-width: 203px !default;
$pv-scale-ratio-container-max-width: 232px !default;
$pv-properties-window-container-max-width: 180px !default;
$pv-properties-window-container-width: 180px !default;
$pv-annotation-dd-background-color-active: $secondary-bg-color-pressed !default;
$pv-prop-line-styles-margin-top: 2.5px !default;
$pv-more-option-button-padding: 8px 7px 1px 1px !default;
$pv-comment-title-padding-top: 7px !default;
$pv-signature-footer-color: $content-bg-color-alt2 !default;
$pv-signature-border-color: 1px dotted $content-bg-color-alt2 !default;
$pv-signature-color: $primary !default;
$pv-form-checkbox-border-color: $black !default;
$pv-form-field-size: 0 !default;
$pv-form-field-radiobutton-border: 5px solid $white !default;
$pv-form-field-radiobutton-box-shadow: 0 0 0 1px $black !default;
$pv-form-field-li-background-color: $primary !default;
$pv-form-field-checkbox-container: 1px solid $black !default;
$pv-form-field-checkbox-checked: solid $black !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: 1 !default;
$pv-form-field-property-header-margin-top: 5px !default;
$pv-form-field-property-header-width: 80% !default;
$pv-form-field-property-header-color: $content-text-color !default;
$pv-form-field-property-general-header-font-size: 12px !default;
$pv-form-field-property-general-header-line-height: 15px !default;
$pv-form-field-property-label-color: $content-text-color-alt1 !default;
$pv-form-field-property-font-style-color: $content-bg-color !default;
$pv-prop-win-margin-left: 12px !default;
$pv-font-size-field-width: 92px !default;
$pv-formfield-maxlength-width: 100px !default;
$pv-formfield-maxlength-arrow-width: 18px !default;
$pv-formfield-designer-dialog-height: 544px !default;
$pv-properties-header-spliter-border-bottom-color: $primary !default;
$pv-properties-header-spliter-border-bottom-style: solid !default;
$pv-properties-header-spliter-border-bottom-width: 0 !default;
$pv-properties-header-spliter-left: 0 !default;
$pv-properties-header-spliter-padding-top: 38px !default;
$pv-properties-header-spliter-position: absolute !default;
$pv-properties-header-spliter-width: 100% !default;
$pv-properties-header-spliter-margin-bottom: 10px !default;
$pv-formfield-maxlength-group-padding-left: 85px !default;
$pv-formfield-properties-icon-height: 32px !default;
$pv-formfield-properties-icon-padding: 5px !default;
$pv-formfield-properties-icon-align-padding: 4px 8px !default;
$pv-form-field-property-font-style-width: inherit !default;
$pv-signature-delete-icon-margin-top: 10px !default;
$pv-signature-dialog-height: 535px !default;
$pv-signature-dialog-blazor-height: 530px !default;
$pv-blazor-scale-ratio-dialog-max-width: 476px !default;
$pv-handwritten-sign-width: 712px !default;
$pv-handwritten-sign-height: 366px !default;
$pv-canvas-sign-width: 724px !default;
$pv-canvas-sign-width-blazor: 724px !default;
$pv-font-div-padding: 15px 18px !default;
$pv-font-div-padding-blazor: 15px 18px !default;
$pv-signature-appearance-checkbox: 5px !default;
$pv-show-designer-name-color: $black !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;

@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: normal;
      opacity: $pv-text-selection-opacity;
      position: absolute;
    }

    .e-pv-search-text-highlight,
    .e-pv-search-text-highlightother {
      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: 30px;
      position: absolute;
      width: 30px;
      z-index: 1000;
    }

    .e-pv-touch-ellipse {
      background-color: $pv-selection-touch-element-background-color;
      border-bottom-left-radius: 50%;
      border-bottom-right-radius: 50%;
      border-color: $pv-selection-touch-element-border-color;
      border-style: solid;
      border-top-left-radius: 50%;
      border-width: 2px;
      height: 20px;
      margin: 0 0 0 9px;
      position: absolute;
      width: 20px;
    }

    .e-pv-annotation-note {
      border-radius: 2px;
      cursor: auto;
      font-size: $pv-sidebar-title-font-size;
      height: auto;
      max-width: 200px;
      min-height: 10px;
      min-width: 30px;
      overflow-wrap: break-word;
      padding: 5px;
      position: absolute;
      width: auto;
      z-index: 10000;
    }

    .e-pv-annotation-note-author {
      border-bottom: 1px solid $pv-annotation-note-border-bottom-color;
      font-weight: bold;
    }

    .e-pv-annotation-popup-menu {
      cursor: auto;
      min-width: 396px;
      padding-bottom: 6px;
      position: absolute;
      width: auto;
      z-index: 10000;
    }

    .e-pv-annotation-popup-header {
      height: auto;
      min-height: 29px;
      padding-top: 14px;
    }

    .e-pv-annotation-popup-author {
      float: left;
      font-size: 16px;
      font-weight: bold;
      margin-left: 14px;
    }

    .e-pv-annotation-popup-close {
      float: right;
      height: 20px;
      margin-right: 14px;
      width: 20px;
    }

    .e-pv-annotation-modified-time {
      height: 14px;
      margin-left: 14px;
      padding-top: 8px;
    }

    .e-pv-annotation-popup-note-container {
      height: auto;
      padding: 14px;
      width: auto;
    }

    .e-pv-annotation-popup-content {
      background-color: $pv-annotation-note-popup-bg-color;
      border: 1px solid;
      font-size: 16px;
      min-height: 132.08px;
      overflow: hidden auto;
      width: 368px;
    }

    .e-pv-properties-fill-color-icon,
    .e-pv-properties-stroke-color-icon {
      border-bottom: 2px solid;
    }

    .e-pv-drop {
      color: $pv-selection-touch-element-background-color;
      display: inline-block;
      height: 20px;
      position: absolute;
      width: 20px;
      z-index: 1000;
    }

    .e-pv-droplet {
      background-color: $pv-selection-touch-element-background-color;
      border-bottom-left-radius: 50%;
      border-bottom-right-radius: 50%;
      border-color: $pv-selection-touch-element-border-color;
      border-style: solid;
      border-top-left-radius: 50%;
      border-width: 2px;
      height: 20px;
      margin: 0 0 0 9px;
      position: absolute;
      width: 20px;
    }
  }
}


@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-pdfviewer.e-pv-mobile-view .e-pv-viewer-container::-webkit-scrollbar {
    display: none;
  }

  input.e-pv-input-password::-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 {
    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-stamp-container .e-menu-wrapper ul .e-menu-item .e-menu-icon,
  .e-bigger .e-pv-icon-search,
  .e-pv-icon {
    font-size: $pv-icon-font-size;
  }

  .e-bigger .e-pv-icon {
    @if $skin-name == 'FluentUI' {
      font-size: 16px;
    }
  }

  .e-pv-annotation-stamp-container .e-menu-wrapper {
    @if $skin-name == 'FluentUI' {
      background-color: transparent;
    }
  }

  .e-pv-annotation-ink-container .e-pv-inkannotation-icon {
    font-size: $pv-icon-font-size;
  }

  .e-pv-annotation-handwritten-container .e-pv-handwritten-icon.e-btn-icon:not(.e-caret) {
    font-size: $pv-icon-font-size;
  }

  .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-pv-mobilescroll-container {
    @if $skin-name == 'Material3' {
      background: $pv-background;
    }
    @else
    {
      background-color: $pv-background;
    }
    border: $pv-thumbnail-hover-border;
    border-radius: 56px 0 0 56px;
    line-height: 27px;
    position: absolute;
    text-align: center;
  }

  .e-pv-viewer-container .e-pv-page-div {
    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-pv-toolbar,
  .e-pv-nav-toolbar,
  .e-pv-annotation-toolbar,
  .e-pv-formdesigner-toolbar {
    border: $pv-toolbar-border;
    border-radius: $pv-toolbar-border-radius;
    border-width: $pv-toolbar-border-width;
  }

  .e-pv-toolbar,
  .e-pv-annotation-toolbar,
  .e-pv-mobile-annotation-toolbar,
  .e-pv-formdesigner-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;
      line-height: 0;
    }
  }

  .e-pv-nav-toolbar,
  .e-bigger .e-pv-toolbar,
  .e-pv-toolbar.e-pv-mobile-toolbar,
  .e-bigger .e-pv-annotation-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;
  }

  .e-toolbar.e-pv-toolbar .e-toolbar-pop .e-pv-zoom-drop-down-container {
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    width: auto;
  }

  .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 {
    display: none;
  }

  .e-pv-current-page-box.e-input-group.e-control-wrapper {
    height: $pv-current-page-height;
    @if $skin-name == 'bootstrap5' {
      height: 32px;
    }
    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: 10px;
    padding: 6px;
    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: 24px;
  }

  .e-pv-mobiledashedline-container {
    color: $pv-toolbar-total-page-number-color;
    display: block;
    padding: 10px;
  }

  .e-pv-number-ofpages {
    width: 10%;
  }

  .e-dialog.e-pv-gotopage-popup {
    max-width: 500px;
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
      padding-left: 0;
      padding-top: 0;
    }
    @else {
      padding-left: 16px;
      padding-top: 16px;
    }
  }

  .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: 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' {
      padding: 3px 4px;
    }
  }

  .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-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: auto;
    }
    @if $skin-name == 'bootstrap5' {
      height: 32px;
    }
    margin-left: $pv-toolbar-items-margin-left;
    margin-right: $pv-toolbar-items-margin-right;
    @if $skin-name == 'bootstrap5' {
      padding: 0 4px;
    }
  }

  .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: 2px;
    }
    @else if $skin-name == 'Material3' {
      padding: 0 !important;/* stylelint-disable-line declaration-no-important */
    }
    @else {
      padding-bottom: 0;
    }
  }

  .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: 2px;
    }
    @else if $skin-name == 'Material3' {
      padding: 0 !important;/* stylelint-disable-line declaration-no-important */
    }
    @else {
      padding-bottom: 0;
    }
  }

  .e-pv-toolbar.e-toolbar.e-toolbar .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon,
  .e-pv-annotation-toolbar.e-toolbar.e-toolbar .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
    @if $skin-name == 'FluentUI' {
      line-height: 22px;
      min-height: 22px;
    }
    @else {
      line-height: 26px;
      min-height: 26px;
    }
  }

  .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;
    width: $pv-toolbar-btn-width;
    @if $skin-name == 'FluentUI' {
      line-height: $pv-toolbar-btn-height;
      min-width: 40px;
    }
  }

  .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;
    width: $pv-toolbar-open-icon-width;
  }

  .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 {
    padding-left: 8px;
  }

  .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-btn.e-pv-pan-tool .e-pv-icon {
    margin-right: 2px;
  }

  .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: 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 == 'FluentUI' {
      padding-top: 0;
    }
    position: relative;
  }

  .e-pv-total-page {
    color: $pv-toolbar-total-page-font-color;
    font-size: inherit;
  }

  .e-pv-total-page-ms {
    -ms-transform: translateY(-50%);
    margin: 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' {
      box-shadow: none;
    }
    height: inherit;
    margin-top: $pv-toolbar-zoom-drop-down-margin-top;
    padding: $pv-toolbar-zoom-drop-down-padding;
  }

  .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' {
      padding-left: 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: 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-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' {
      border-left: 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-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-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 {
      border: $pv-current-page-border;
    }
    border-radius: $pv-current-page-border-radius;
    @if $skin-name == 'bootstrap5' {
      box-shadow: none;
    }
  }

  .e-pv-annotation-toolbar,
  .e-pv-mobile-annotation-toolbar,
  .e-pv-formdesigner-toolbar {
    @if $skin-name == 'bootstrap5' {
      border: solid $border-light;
      border-width: 1px;
    }
  }

  .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' {
      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-pv-password-popup.e-dialog {
    @if $skin-name != 'Material3' {
      height: $pv-password-dialog-height;
    }
    margin: 0 10px;
    max-width: $pv-password-dialog-width;
  }

  .e-pv-corrupted-popup.e-dialog {
    @if $skin-name != 'Material3' {
      height: $pv-corrupted-dialog-height;
    }
    margin: 0 10px;
    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-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-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' {
      max-height: 30px;
      padding-bottom: 1px;
    }
  }

  .e-pv-toolbar:not(.e-rtl) .e-pv-current-page-box.e-input-group.e-control-wrapper input.e-input {
    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: 500px;
  }

  .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: 100%;
    left: 1px;
    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-bigger .e-pv-sidebar-title-container {
    @if $skin-name == 'bootstrap4' {
      height: $pv-sidebar-title-container-height-big;
    }
  }

  .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-bigger .e-pv-sidebar-title-container {
    @if $skin-name == 'bootstrap4' {
      height: $pv-sidebar-title-container-height-big;
    }
  }

  .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 == 'tailwind' or $skin-name == 'Material3') {
      font-weight: 500;
    }
    height: $pv-sidebar-title-height;
    @if ($skin-name == 'bootstrap5' 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 == 'tailwind') {
      vertical-align: $pv-sidebar-title-vertical-align;
    }
    @if $skin-name == 'FluentUI' {
      padding: 8px;
    }
  }

  .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-pv-sidebar-title.e-left {
    left: $pv-sidebar-title-left;
    @if $skin-name == 'bootstrap4' {
      margin-left: 12px;
    }
    width: $pv-sidebar-title-width;
  }

  .e-pv-sidebar-title.e-right {
    @if $skin-name == 'bootstrap4' {
      margin-right: 12px;
    }
    right: $pv-sidebar-title-left;
  }

  .e-pv-sidebar-toolbar {
    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-bigger .e-pv-sidebar-toolbar {
    @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
      width: $pv-sidebar-toolbar-width-big;
    }
  }

  .e-pv-sidebar-content {
    -webkit-overflow-scrolling: touch;
    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: 1px;
  }

  .e-bigger .e-pv-sidebar-content {
    @if $skin-name == 'bootstrap4' {
      top: $pv-sidebar-content-top-big;
    }
  }

  .e-pv-sidebar-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: 0 1px 0 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: 6px;
      height: 329px;
    }
  }

  .e-pv-thumbnail-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;
    margin: $pv-thumbnail-view-button-margin;
    outline: $pv-thumbnail-outline;
    padding: $pv-thumbnail-view-button-padding;
    width: $pv-thumbnail-view-button-width;
    @if $skin-name == 'bootstrap5' {
      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-bigger .e-pv-thumbnail-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 == 'FluentUI' {
      margin: 12px 6px;
    }
  }

  .e-pv-thumbnail-view-button-selection.e-pv-thumbnail-view-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-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-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-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: 12px 6px;
    }
  }

  .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 == 'bootstrap5' {
      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-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;
    }
  }

  .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 == '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 == 'tailwind') {
      vertical-align: $pv-sidebar-title-vertical-align;
    }
    width: $pv-title-close-width;
  }

  .e-bigger .e-pv-title-close-div.e-btn {
    @if $skin-name == 'bootstrap4' {
      top: $pv-title-close-top-big;
    }
  }

  .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-bigger .e-pv-sidebar-content-splitter {
    @if $skin-name == 'bootstrap4' {
      top: $pv-sidebar-content-splitter-top-big;
    }
  }

  .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-left: $pv-thumbnail-number-padding-left;
    padding-right: $pv-thumbnail-number-padding-left;
    padding-top: $pv-thumbnail-number-padding-top;
    @if $skin-name == 'Material3' {
      font-weight: 500;
    }
  }

  .e-pv-thumbnail-selection-ring {
    @if $skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
      border: $pv-thumbnail-selection-ring-border;
    }
    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: auto;
    margin-right: auto;
  }

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

  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: $text-base;
      padding-left: 12px;
      padding-right: 12px;
    }
  }

  .e-pv-bookmark-title {
    padding-left: $pv-bookmark-title-padding-left;
    @if $skin-name == 'Material3' {
      font-size: $text-sm;
      font-weight: $font-weight-normal;
      line-height: 20px;
      letter-spacing: .24px;
    }
  }

  .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: $text-base;
      padding-left: 12px;
      padding-right: 12px;
    }
  }

  .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: 0 1px 0 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: 6px;
      height: 329px;
    }
  }

  .e-pv-bookmark-view > .e-ul {
    height: inherit;
    overflow: $-treeview-overflow;
  }

  .e-pv-bookmark-view .e-fullrow {
    height: $-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: 5px;
    }
  }

  .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 {
    background: $pv-text-selection-bg-color;
  }

  .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-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 {
    color: $pv-icon-color;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark') {
      box-shadow: none;
    }
  }

  .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-dark') {
      box-shadow: none;
      color: inherit;
    }
  }

  .e-pv-mobile-annotation-toolbar .e-tbar-btn:hover {
    background: $pv-comment-panel-bg;
    border-color: $pv-comment-panel-bg;
  }

  .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: 56px;
  }

  .e-pv-mobile-annotation-toolbar .e-hscroll.e-scroll-device .e-scroll-nav .e-nav-arrow {
    font-size: 14px;
    transform: skewX(4deg);
  }

  .e-pv-mobile-annotation-toolbar .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav .e-nav-arrow {
    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-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-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-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-annotation-toolbar .e-dropdown-btn.e-btn.e-active,
  .e-pv-formdesigner-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus,
  .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 {
    @if $skin-name == 'bootstrap4' {
      color: $pv-icon-color-hover;
    }
    @if $skin-name == 'bootstrap5' {
      color: $white;
    }
    @if $skin-name == 'FluentUI' {
      color: $pv-item-selection-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;
    }
  }

  .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-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 {
    color: $pv-icon-disable-color;
  }

  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item {
    @if $skin-name != 'Material3' {
      height: inherit;
    }
  }

  .e-pv-stamp.e-menu-wrapper ul .e-menu-item {
    @if $skin-name == 'fabric' {
      padding-top: 7px;
    }
  }

  .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' {
      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' {
      padding-left: 0;
      width: 40px;
    }
  }

  .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-pv-annotation-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-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;
    color: $pv-item-selection-color;
  }

  .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-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select .e-icons,
  .e-pv-formdesigner-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select .e-icons {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap4') {
      color: $pv-item-selection-color;
    }
  }

  .e-pv-sidebar-toolbar .e-pv-tbar-btn {
    color: $pv-icon-color;
  }

  .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-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: 109px;
      padding: 16px;
      width: 368px;
    }
  }

  .e-pv-search-input {
    height: $pv-search-input-height;
    width: $pv-search-input-width;
  }

  .e-bigger .e-pv-search-input {
    @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
      height: $pv-search-input-height-big;
    }
  }

  .e-pv-search-input-mobile {
    height: $pv-search-input-height;
  }

  .e-pv-match-case-container {
    margin-top: $pv-match-case-margin-top;
  }

  .e-bigger .e-pv-match-case-container {
    @if $skin-name == 'bootstrap4' {
      margin-top: $pv-match-case-margin-top-big;
    }
  }

  .e-pv-search-btn.e-btn {
    background-color: transparent;
    @if $skin-name == 'bootstrap4' {
      color: $pv-icon-color;
    }
    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' {
      padding-bottom: 0;
      padding-left: 1px;
      padding-right: 1px;
      padding-top: 1px;
    }
  }

  .e-bigger .e-pv-search-btn.e-btn {
    @if $skin-name == 'bootstrap4' or  $skin-name == 'FluentUI' {
      height: $pv-search-btn-height-big;
      padding: 2px;
      width: $pv-search-btn-width-big;
    }
  }

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

  .e-pv-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-search-bar:not(.e-rtl) .e-pv-next-search {
    margin-left: $pv-search-next-margin-left;
  }

  .e-pv-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 {
    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: 5px;
    }
  }

  .e-pv-notification-popup {
    height: $pv-notification-popup-height;
    margin: 0 10px;
    max-width: $pv-notification-popup-width;
  }

  .e-pv-notification-popup.e-pv-notification-large-content {
    height: $pv-notification-popup-height-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 {
    background: $pv-input-background;
  }

  .e-pv-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 {
    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: 48px;
  }

  .e-pv-bookmark-container .e-pv-bookmark-view.e-listview .e-ul .e-list-item:last-child {
    border-bottom-width: 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: 0;
    box-shadow: none;
  }

  .e-pv-bookmark-container .e-pv-bookmark-view {
    padding-top: 0;
  }

  .e-pv-bookmark-container .e-pv-bookmark-view .e-list-parent.e-ul {
    padding-left: 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: 1.71em;
    }
    border-bottom: 2px solid;
    margin-top: 0;
    padding-top: 5px;
    @if $skin-name == 'bootstrap5' {
      margin-top: -4px;
      padding-top: 0;
    }
    @if $skin-name == 'FluentUI' {
      line-height: 11px;
    }
    vertical-align: initial;
  }

  .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: 1.71em;
    }
    border-bottom: 2px solid;
    margin-top: 0;
    padding-top: 1px;
    vertical-align: initial;
    @if $skin-name == 'FluentUI' {
      line-height: 11px;
      padding-top: 5px;
    }
  }

  .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-thickness-icon.e-pv-icon {
    margin-top: 0;
    padding-top: 7px;
    @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
      padding-top: 0;
    }
    vertical-align: initial;
  }

  .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' {
      padding-top: 0;
    }
    vertical-align: initial;
  }

  .e-pv-annotation-opacity-popup-container,
  .e-pv-annotation-thickness-popup-container {
    @if $skin-name != 'Material3' {
      background-color: $pv-annotation-opacity-popup-background-color;
    }
    box-shadow: $pv-annotation-opacity-popup-box-shadow;
    color: $pv-annotation-opacity-popup-color;
    height: auto;
    min-height: $pv-annotation-opacity-popup-min-height;
    padding: $pv-annotation-opacity-popup-padding;
    width: auto;
  }

  .e-pv-annotation-opacity-label,
  .e-pv-annotation-opacity-indicator,
  .e-pv-annotation-thickness-label,
  .e-pv-annotation-thickness-indicator {
    float: left;
    font-family: inherit;
    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 {
    float: left;
    height: auto;
    margin-left: $pv-annotation-opacity-slider-margin-left;
    margin-right: $pv-annotation-opacity-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 {
    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 {
    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 {
    height: $pv-annotation-opacity-slider-height;
  }

  .e-pv-annotation-color-container.e-dropdown-btn.e-btn .e-caret .e-pv-annotation-opacity-container.e-dropdown-btn.e-btn .e-caret .e-pv-annotation-textcolor-container.e-dropdown-btn.e-btn .e-caret,
  .e-pv-annotation-textalign-container.e-dropdown-btn.e-btn .e-caret,
  .e-pv-annotation-textprop-container.e-dropdown-btn.e-btn .e-caret {
    font-size: $pv-annotation-drop-down-caret-font-size;
  }

  .e-bigger .e-.e-pv-annotation-color-container.e-dropdown-btn.e-btn .e-caret .e-pv-annotation-opacity-container.e-dropdown-btn.e-btn .e-caret .e-pv-annotation-textcolor-container.e-dropdown-btn.e-btn .e-caret,
  .e-bigger .e-pv-annotation-textalign-container.e-dropdown-btn.e-btn .e-caret,
  .e-bigger .e-pv-annotation-textprop-container.e-dropdown-btn.e-btn .e-caret {
    font-size: 18px;
  }

  .e-pv-annotation-color-container,
  .e-pv-annotation-opacity-container,
  .e-pv-annotation-stroke-container,
  .e-pv-custom-annotation-thickness-container,
  .e-pv-custom-annotation-opacity-container,
  .e-pv-annotation-thickness-container,
  .e-pv-annotation-textcolor-container,
  .e-pv-annotation-textalign-container,
  .e-pv-annotation-textprop-container {
    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') {
      padding-top: $pv-annotation-thickness-drop-down-padding-top;
    }
  }

  .e-pv-shapes-toolbar {
    @if $skin-name == 'Material3' {
      border-radius: 4px;
    }
    box-shadow: $pv-drop-down-toolbar-box-shadow;
  }

  .e-pv-shapes-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator) {
    padding: 4px;
  }

  .e-pv-shapes-toolbar.e-toolbar .e-toolbar-items.e-toolbar-multirow {
    margin-bottom: 0;
    margin-left: 4px;
    margin-right: 4px;
    @if $skin-name == 'Material3' {
      margin-top: 4px;
    }
  }

  .e-pv-shapes-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
    height: 32px;
    width: 32px;
    @if $skin-name == 'FluentUI' {
      min-height: 32px;
    }
  }

  .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: 32px;
    }
  }

  .e-pv-annotation-thickness-slider-container {
    margin-top: -6px;
  }

  .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: 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-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') {
      color: $secondary-text-color-pressed;
    }
  }

  .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') {
      align-items: center;
      display: flex;
    }
  }

  .e-pv-annotation-color-container.e-dropdown-btn.e-button,
  .e-pv-annotation-opacity-container.e-dropdown-btn.e-button,
  .e-pv-annotation-stroke-container.e-dropdown-btn.e-button,
  .e-pv-custom-annotation-thickness-container.e-dropdown-btn.e-button,
  .e-pv-custom-annotation-opacity-container.e-dropdown-btn.e-button,
  .e-pv-annotation-thickness-container.e-dropdown-btn.e-bbuttontn,
  .e-pv-annotation-textcolor-container.e-dropdown-btn.e-button,
  .e-pv-annotation-textalign-container.e-dropdown-btn.e-button,
  .e-pv-annotation-textprop-container.e-dropdown-btn.e-button {
    line-height: $pv-annotation-drop-down-btn-line-height;
    padding: $pv-annotation-drop-down-btn-padding;
    @if ($skin-name == 'bootstrap5') {
      align-items: baseline;
      display: flex;
    }
  }

  .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') {
      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') {
      height: 32px;
      line-height: 32px;
      padding: 0 8px;
    }
  }

  .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') {
      height: 32px;
      line-height: 32px;
      padding: 0 8px;
    }
  }

  .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: 32px;
      line-height: 32px;
    }
  }

  .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') {
      height: 30px;
    }
  }

  .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: 0 4px;
  }

  .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: 3px 4px;
    }
    @else {
      padding: 0 4px;
    }
  }

  .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-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 {
    border-bottom-color: $pv-prop-line-styles-color;
  }

  .e-pv-line-styles-container:hover {
    background-color: $pv-prop-line-styles-hover-bg;
  }

  .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') {
      background: $transparent;
      border: 1px solid $border-light;
      border-radius: 4px;
      box-sizing: border-box;
      color: $content-text-color;
    }
    @if ($skin-name == 'Material3') {
      padding: 7px;
    }
  }

  .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: 40px;
    }
  }

  .e-pv-properties-window .e-dlg-content {
    padding-top: 6px;
  }

  .e-pv-scale-ratio-text,
  .e-pv-depth-text {
    margin-bottom: 8px;
  }

  .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-opacity-container {
    float: left;
    height: auto;
    width: $pv-properties-window-container-max-width;
    @if $skin-name == 'Material3'
    {
      width: 204px;
      max-width: 204px;
    }
  }

  .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-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 {
    @if $skin-name == 'FluentUI' {
      float: left;
      height: 40px;
    }
  }

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

  .e-pv-scale-unit-content {
    float: left;
    width: 33px;
  }

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

  .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: 160px;
    }
  }

  .e-pv-properties-line-opacity {
    margin-top: -10px;
  }

  .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 {
    margin-bottom: 8px;
    @if ($skin-name == 'FluentUI') {
      font-weight: 600;
    }
    @if ($skin-name == 'Material3'){
      font-size: $text-xxs;
      margin-bottom: 0;
    }
    @else {
      font-size: 14px;
    }
  }

  .e-pv-properties-line-end-container,
  .e-pv-properties-line-thickness-container {
    @if ($skin-name == 'bootstrap5') {
      margin-left: 37px;
    }
    @if ($skin-name == 'Material3'){
      margin-left: 12px;
    }
    @else {
      margin-left: 24px;
    }
  }

  .e-pv-properties-line-leader-length-container {
    margin-left: $pv-line-leader-length-margin-left;
  }

  .e-bigger .e-pv-properties-line-leader-length-container {
    @if $skin-name == 'FluentUI' {
      margin-left: 100px;
    }
  }

  .e-pv-properties-line-stroke-color-container {
    margin-left: $pv-line-stroke-color-margin-left;
    margin-right: 87px;
  }

  .e-bigger .e-pv-properties-line-stroke-color-container {
    @if $skin-name == 'FluentUI' {
      margin-left: 195px;
    }
  }

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

  .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: 248px;
    }
  }

  .e-pv-scale-ratio-src-input,
  .e-pv-scale-ratio-dest-input,
  .e-pv-depth-input {
    max-width: $pv-scale-ratio-container-max-width;
  }

  .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: 248px;
    }
  }

  .e-pv-properties-line-start,
  .e-pv-properties-line-end,
  .e-pv-properties-line-style {
    width: $pv-properties-window-container-width;
  }

  .e-pv-properties-line-style {
    @if ($skin-name == 'Material3'){
      font-size: $text-xxs;
      max-width: 214px;
      border-radius: 0;
    }
  }

  .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: 248px;
    }
  }

  .e-pv-scale-ratio-src-unit,
  .e-pv-scale-ratio-dest-unit,
  .e-pv-depth-unit {
    width: $pv-scale-ratio-width;
  }

  .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: 40px;
      width: 248px;
    }
  }

  .e-pv-line-styles-container {
    line-height: 0;
    padding: 17px;
  }

  .e-pv-line-styles-item {
    border-bottom-width: 2px;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
  }

  .e-pv-line-styles-content {
    border-bottom-width: 2px;
    display: inline-block;
    width: 100%;
  }

  .e-pv-properties-line-style-content {
    float: left;
    line-height: 16px;
    width: 44px;
    @if $skin-name == 'FluentUI' {
      line-height: 20px;
    }
    @if ($skin-name == 'Material3'){
      font-size: $text-sm;
    }
  }

  .e-pv-properties-line-start.e-btn,
  .e-pv-properties-line-end.e-btn {
    @if ($skin-name == 'bootstrap5' 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: 30px;
    }
    @if ($skin-name == 'Material3'){
      border-bottom: 1px solid rgba($border);
      border-radius: 0;
      width: 214px;
      height: 32px;
    }

    @else {
      height: 32px;
    }
    padding: $pv-properties-padding;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark') {
      text-align: center;
    }
  }

  .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: 40px;
    }
  }

  .e-pv-properties-line-style.e-btn {
    @if ($skin-name == 'bootstrap5' 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: 30px;
    }
    @if ($skin-name =='Material3'){
      border-bottom: 1px solid rgba($border);
      border-radius: 0;
    }
    @else {
      height: 32px;
    }
    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 {
      display: inline;
    }
    line-height: 16px;
    margin-left: $pv-properties-drop-down-margin-left;
  }

  .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: 145px;
    }
  }

  .e-pv-line-styles-content-container {
    float: left;
    font-size: 0;
    margin-right: 7.5px;
    margin-top: $pv-prop-line-styles-margin-top;
    @if $skin-name == 'FluentUI' {
      width: 120px;
    }
    @if ($skin-name == 'Material3'){
      width: 155px;
      padding-top: 6px;
    }
    @else {
      width: 138px;
    }
  }

  .e-bigger .e-pv-line-styles-content-container {
    @if $skin-name == 'FluentUI' {
      margin-top: 5.5px;
      width: 180px;
    }
  }

  .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: max-content;
    }
  }

  .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' {
      align-items: baseline;
      display: flex;
      height: $pv-annot-toolbar-dropdown-btn-height;
      line-height: $pv-annot-toolbar-dropdown-btn-height;
      padding: 3px 8px;
      width: $pv-annot-toolbar-dropdown-btn-width;
    }
  }

  .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' {
      align-items: baseline;
      display: flex;
      padding: $pv-annotation-icon-padding;
    }
    @else {
      padding: $pv-annotation-icon-padding;
    }
  }

  .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' {
      padding-bottom: 0;
      width: 20px;
    }
  }

  .e-pv-annotation-shape-icon,
  .e-pv-annotation-calibrate-icon,
  .e-pv-handwritten-icon {
    margin-right: 4px;
  }

  .e-pv-stamp-template-container .e-menu-item.e-menu-caret-icon {
    @if $skin-name == 'bootstrap5' {
      padding: 0 26px 0 8px;
    }
  }

  .e-pv-properties-opacity-indicator {
    @if $skin-name == 'FluentUI' {
      margin-left: 141px;
    }
    @if $skin-name == 'Material3' {
      margin-left: 190px;
    }
    @else {
      margin-left: 153px;
    }
  }

  .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' {
      line-height: $pv-annot-toolbar-dropdown-btn-line-height;
    }
  }

  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item.e-selected {
    @if $skin-name == 'bootstrap5' {
      background: $secondary-bg-color-pressed;
    }
  }

  .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' {
      padding: $pv-toolbar-btn-padding;
    }
    width: $pv-toolbar-btn-width-big;
  }

  .e-bigger .e-pv-current-page-box.e-input-group.e-control-wrapper input.e-input {
    padding-top: $pv-mobile-page-box-padding-top;
  }

  .e-toolbar-item.e-pv-current-page-container {
    @if $skin-name == 'bootstrap5' {
      padding-top: 2px;
    }
  }

  .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-pv-toolbar.e-toolbar .e-tbar-btn > :first-child {
    line-height: $pv-toolbaritem-btn-line-height;
    min-height: $pv-toolbaritem-btn-min-height;
  }

  .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,
  .e-pv-mobile-view .e-pv-password-popup.e-dialog {
    @if ($skin-name != 'Material3') {
      height: $pv-password-dialog-height-mobile;
    }
  }
  .e-bigger .e-pv-password-popup.e-dialog,
  .e-pv-mobile-view .e-pv-password-popup.e-dialog {
    @if ($skin-name == 'FluentUI') {
      height: 270px;
    }
  }

  .e-bigger .e-pv-notification-popup.e-dialog,
  .e-pv-mobile-view .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,
  .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-bigger .e-pv-notification-popup.e-pv-notification-large-content.e-dialog,
  .e-pv-mobile-view .e-pv-notification-popup.e-pv-notification-large-content.e-dialog {
    @if ($skin-name == 'FluentUI') {
      height: 280px;
    }
  }
  .e-bigger .e-pv-corrupted-popup.e-dialog,
  .e-pv-mobile-view .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,
  .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-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-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' {
      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' {
      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-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;
  }

  .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-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-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-bigger .e-pv-sidebar-content-container.e-left {
    @if $skin-name == 'bootstrap4' {
      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-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-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-pv-sidebar-resizer.e-left {
    @if $skin-name == 'bootstrap4' {
      border-right: 1px solid $pv-sidebar-resizer-border-color;
    }
    left: $pv-sidebar-resizer-left;
  }

  .e-pv-sidebar-resizer.e-right {
    @if $skin-name == 'bootstrap4' {
      border-left: 1px solid $pv-sidebar-resizer-border-color;
    }
    right: $pv-sidebar-resizer-left;
  }

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

  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: $text-base;
      padding-left: 12px;
      padding-right: 12px;
    }
  }

  .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: $text-base;
      padding-left: 12px;
      padding-right: 12px;
    }
  }

  .e-bigger .e-pv-properties-window {
    max-width: $pv-properties-win-max-width-big;
    @if $skin-name == 'FluentUI' {
      min-height: 498px;
    }
  }

  .e-bigger .e-pv-scale-ratio-window {
    max-width: $pv-scale-ratio-win-max-width-big;
  }

  .e-pdfviewer .e-treeview .e-list-item {
    white-space: pre-wrap;
    word-break: break-word;
  }

  .e-pdfviewer .e-treeview .e-list-text {
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
      line-height: 20px;
    }
    width: 100%;
  }

  .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-inplaceeditor .e-editable-value-wrapper.e-hide {
    display: none;
  }

  .e-pdfviewer .e-editable-inline {
    @if $skin-name == 'bootstrap5' {
      padding: 7px 8px 50px;
    }
    @else {
      padding: 7px 8px 42px;
    }
  }

  .e-pv-comment-textbox {
    min-height: 22px;
  }

  .e-pdfviewer .e-editable-value-wrapper {
    color: $pv-comment-font-color;
    line-height: normal;
    min-height: 22px;
    padding: 2px 8px 3px;
    @if $skin-name == 'bootstrap5' {
      color: $content-text-color-alt2;
    }
    font-size: 14px;
    @if $skin-name == 'bootstrap5' {
      font-size: 12px;
    }
    @if $skin-name == 'Material3' {
      font-size: $text-xs;
      line-height: 18px;
    }
  }

  .e-pdfviewer .e-pv-comment-textbox .e-editable-value-wrapper {
    color: $pv-comment-font-color;
    @if $skin-name == 'bootstrap5' {
      color: $content-text-color-alt2;
    }
    font-size: 14px;
    @if $skin-name == 'bootstrap5' {
      font-size: 12px;
    }
    @if $skin-name == 'Material3' {
      font-size: $text-xs;
    }
    line-height: normal;
    min-height: 24px;
    padding: 2px 8px 3px 32px;
  }

  .e-pv-comment-textbox.e-inplaceeditor .e-component-group,
  .e-pv-new-comments-div.e-inplaceeditor .e-component-group {
    @if $skin-name == 'bootstrap5' {
      margin-bottom: 0;
    }
  }

  .e-pdfviewer .e-inplaceeditor .e-editable-action-buttons {
    float: right;
    padding-bottom: 7px;
    @if $skin-name == 'bootstrap5' {
      margin-top: 0;
      padding-top: 10px;
    }
    @else {
      padding-top: 5px;
    }
    position: relative;
    @if $skin-name == 'bootstrap5' {
      right: 0;
    }
    @else {
      right: 8px;
    }
  }

  .e-pdfviewer .e-pv-reply-div .e-inplaceeditor .e-editable-action-buttons {
    float: right;
    padding-bottom: 7px;
    @if $skin-name == 'bootstrap5' {
      margin-top: 0;
      padding-top: 10px;
    }
    @else {
      padding-top: 5px;
    }
    position: relative;
    @if $skin-name == 'bootstrap5' {
      right: 0;
    }
    @else {
      right: 8px;
    }
  }

  .e-pv-comment-title-container {
    height: 36px;
  }

  .e-pv-reply-title-container {
    height: 36px;
  }

  .e-pv-more-options-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;
    float: right;
    padding: $pv-more-option-button-padding;
  }

  .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') {
      border-color: transparent;
    }
  }

  .e-pdfviewer .e-editable-inline .e-editable-form {
    margin-bottom: 1px;
  }

  .e-pdfviewer .e-editable-inline .e-clear-icon {
    padding-right: 2px;
  }

  .e-pdfviewer .e-btn-cancel {
    font-size: 14px;
    padding-left: 5px;
    padding-right: 5px;
    @if $skin-name == 'Material3' {
      font-size: $text-xs;
    }
  }

  .e-pdfviewer .e-btn-save {
    font-size: 14px;
    margin-right: 12px;
    padding-left: 7px;
    padding-right: 7px;
    @if $skin-name == 'Material3' {
      font-size: $text-xs;
    }
  }

  .e-pdfviewer .e-btn-save.e-outline.e-primary:disabled {
    @if ($skin-name != 'bootstrap5' and $skin-name != 'Material3') {
      background-color: $pv-save-button-bg-color;
      border-radius: 2px;
      color: $pv-save-button-color;
    }
  }

  .e-pdfviewer .e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-content {
    box-shadow: 0 0 0 8px $pv-comment-panel-bg inset;
    padding: 8px;
  }

  .e-pdfviewer .e-accordion .e-acrdn-item .e-acrdn-header {
    line-height: 32px;
    min-height: 32px;
    @if $skin-name == 'Material3' {
      box-shadow: none;
      border: 1px solid rgba($border-light);
      border-width: 1px 0;
    }
  }

  .e-contextmenu-wrapper .e-pv-context-menu .e-menu-item {
    height: 38px;
  }

  .e-pv-comment-panel {
    @if $skin-name == 'Material3' {
      background: $content-bg-color-alt2;
    }
    background-color: $pv-comment-panel-bg;
    border: $pv-sidebar-toolbar-border;
    border-width: 1px 1px 0;
    opacity: 1;
    overflow: hidden;
    position: absolute;
    top: 57px;
    width: 300px;
    z-index: $pv-sidebar-toolbar-z-index;
  }

  .e-pv-comment-panel-title-container {
    @if $skin-name == 'Material3' {
      background: $content-bg-color-alt2;
      border-style: solid;
      border-width: 0 0 1px 1px;
    }
    @else {
      background-color: $pv-comment-panel-bg;
      border-style: double;
      border-width: 0 1px 1px 0;
    }
    height: 45px;
    position: relative;
    border-color: $pv-comment-panel-border-color;
  }

  .e-pv-comment-panel-title {
    color: $pv-comment-font-color;
    font-size: 14px;
    @if $skin-name == 'Material3' {
      background: $content-bg-color-alt2;
      border: $border-light;
      border-width: 0 0 1px 1px;
      font-size: $text-base;
      font-weight: $pv-comment-tile-font-weight;
      line-height: 24px;
      padding: 8px 215px 8px 12px;
    }
    @if $skin-name == 'bootstrap5' {
      font-size: 16px;
      font-weight: 500;
    }
    @if $skin-name == 'FluentUI' {
      font-weight: $pv-comment-tile-font-weight;
    }
    @if $skin-name != 'Material3' {
      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 == 'bootstrap4' {
      color: $pv-title-close-color;
    }
    height: $pv-title-close-height;
    position: $pv-title-close-position;
    @if $skin-name != 'Material3' {
      right: 11px;
      top: 5px;
    }
    width: $pv-title-close-width;
    @if $skin-name == 'FluentUI' {
      padding: 4px;
    }
    @if $skin-name == 'Material3' {
      padding: 12px 12px 12px 270px;
    }
  }

  @if $skin-name == 'Material3' {
    .e-pv-comment-panel-title-container .e-pv-more-icon .e-pv-icon {
      font-size: $text-base;
    }
  }

  .e-pv-title-close-icon {
    @if $skin-name != 'bootstrap5' {
      color: $pv-comment-text-color;
    }
    @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
      color: $icon-color;
    }
  }

  .e-pv-comments-panel-text {
    font-size: 15px;
    padding-left: 85px;
  }

  .e-pv-comments-content-container {
    background-color: $pv-comments-content-container-bg;
    border-color: $pv-comment-panel-border-color;
    border-style: double;
    border-width: 0 1px 1px 0;
    height: calc(100% - 45px);
    overflow: auto;
    @if $skin-name == 'Material3' {
      background: $content-bg-color-alt2;
    }
  }

  .e-pv-comments-container {
    background-color: $pv-comment-panel-bg;
    border-radius: 2px;
    left: 7px;
    right: 7px;
  }

  .e-pv-comments-border {
    @if $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' {
      border: 2px;
      border-color: $pv-comment-panel-bottom-color;
      border-radius: 4px;
      border-style: groove;
    }
    @if $skin-name == 'tailwind' {
      border: 1px solid $border-light;
      border-radius: 2px;
    }
    @if $skin-name == 'bootstrap5' {
      border: 1px solid $border-light;
      border-radius: 2px;
    }
    @if $skin-name == 'Material3' {
      border: 1px solid rgba($border-light);
      border-radius: 4px;
    }
  }

  .e-pv-comment-title {
    color: $pv-comment-text-color;
    padding-left: 32px;
    padding-top: $pv-comment-title-padding-top;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
      color: $pv-comment-tile-text-color;
    }
    font-size: 14px;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind') {
      font-size: 12px;
      font-weight: $pv-comment-tile-font-weight;
    }
    @if $skin-name == 'FluentUI' {
      font-weight: $pv-comment-tile-font-weight;
    }
    @if $skin-name == 'Material3' {
      font-size: $text-xs;
      padding-left: 40px;
      padding-top: $pv-comment-title-padding-top;
      padding-bottom: 30px;
      height: 18px;
    }
    max-width: 237px;
    position: absolute;
  }

  .e-pv-reply-title {
    color: $pv-comment-text-color;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
      color: $pv-comment-tile-text-color;
    }
    font-size: 14px;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind') {
      font-size: 12px;
      font-weight: $pv-comment-tile-font-weight;
    }
    @if $skin-name == 'FluentUI' {
      font-weight: $pv-comment-tile-font-weight;
    }
    @if $skin-name == 'Material3' {
      font-size: $text-xs;
    }
    max-width: 212px;
    padding-left: 8px;
    padding-top: $pv-comment-title-padding-top;
    position: absolute;
  }

  .e-pv-comments-hover {
    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: 0;
      border-width: 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: 0;
    @if $skin-name == 'bootstrap5' {
      background-color: $transparent;
    }
    @if $skin-name != 'Material3' {
      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: 6px;
      padding-top: 6px;
    }
    @else {
      padding-bottom: 6px;
      padding-top: 17px;
    }
  }

  .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: 49px;
      min-width: 152px;
    }
  }

  .e-menu-icon.e-pv-stamp-icon.e-pv-icon {
    margin-top: $pv-stamp-icon-margin-top;
    padding-left: 7px;
    @if $skin-name == 'fabric' {
      margin-top: -7px;
      padding-left: 10px;
    }
    @if $skin-name == 'bootstrap5' {
      padding-left: 4px;
    }
  }

  .e-pv-annotation-stamp-container .e-rtl.e-menu-wrapper ul .e-menu-item .e-menu-icon {
    @if $skin-name == 'bootstrap5' {
      margin-left: 1px;
    }
  }

  .e-pdfviewer .e-inplaceeditor {
    display: block;
  }

  .e-pdfviewer .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon {
    display: none;
  }

  .e-pdfviewer .e-inplaceeditor .e-editable-value-wrapper .e-editable-value {
    border-bottom: 0;
    word-break: break-word;
  }

  .e-pdfviewer .e-inplaceeditor .e-editable-value-container .e-editable-value {
    @if $skin-name == 'Material3' {
      font-size: $text-xs;
    }
  }

  .e-pdfviewer .e-inplaceeditor .e-editable-value-wrapper {
    display: block;
  }

  .e-pdfviewer .e-inplaceeditor .e-editable-value-wrapper:hover {
    background: transparent;
  }

  .e-pdfviewer .e-inplaceeditor .e-editable-value-container {
    background: transparent;
    width: 229px;
  }

  .e-pv-status-div {
    height: 20px;
    left: 8px;
    position: relative;
    width: 20px;
  }

  .e-pv-status-container {
    padding-bottom: 5px;
    padding-top: 2px;
  }

  .e-pdfviewer .e-input-group.e-control-wrapper.e-editable-elements.e-input-focus {
    @if $skin-name != 'bootstrap5' {
      caret-color: $pv-comment-text-cursor-color;
    }
  }

  .e-pv-reply-div {
    margin-top: 3px;
  }

  .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' {
      border: 1px solid $pv-comment-panel-border-color;
    }
    @if $skin-name == 'Material3' {
      border-width: 1px 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 {
    color: $pv-comment-text-color;
    font-size: 14px;
    @if $skin-name == 'FluentUI' {
      font-weight: $pv-comment-tile-font-weight;
    }
    @if $skin-name == 'Material3' {
      font-weight: $font-weight-normal;
      letter-spacing: .24px;
      line-height: 20px;
      padding: 0 249px 9px 0;
    }
  }

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

  .e-pdfviewer .e-pv-signature-apperance .e-checkbox-wrapper {
    margin-top: 10px;
    padding-bottom: $pv-signature-appearance-checkbox;
    @if $skin-name == 'Material3' {
      margin-top: 12px;
    }
  }

  .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: 30px;
      min-height: 30px;
    }
  }
  .e-pv-signature-dialog-height .e-pv-cancelbtn{
    @if $skin-name != 'Material3' {
      height: 32px;
      min-height: 32px;
    }
  }

  .e-pv-signature-dialog-height .e-pv-createbtn{
    @if $skin-name != 'Material3' {
      height: 30px;
      min-height: 30px;
    }
  }
  .e-bigger .e-pv-signature-dialog-height .e-pv-clearbtn{
    @if $skin-name != 'Material3' {
      float: left;
      height: 49px;
      min-height: 49px;
    }
  }
  .e-bigger .e-pv-signature-dialog-height .e-pv-cancelbtn{
    @if $skin-name != 'Material3' {
      height: 49px;
      min-height: 49px;
    }
  }
  .e-bigger .e-pv-signature-dialog-height .e-pv-createbtn{
    @if $skin-name != 'Material3' {
      height: 49px;
      min-height: 49px;
    }
  }
  
  .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' {
      background: $pv-signature-footer-color;
      border-color: $pv-signature-footer-color;
    }
    @else {
      background: $secondary-bg-color-pressed;
      border-color: $secondary-bg-color-pressed;
      color: $secondary-text-color-pressed;
    }
  }

  .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-comment-panel-resizer.e-left {
    @if $skin-name == 'bootstrap4' {
      border-right: 1px solid $pv-sidebar-resizer-border-color;
    }
    left: 300px;
  }

  .e-pv-comment-panel-resizer.e-right {
    @if $skin-name == 'bootstrap4' {
      border-left: 1px solid $pv-sidebar-resizer-border-color;
    }
    right: 300px;
  }

  .e-pv-align {
    cursor: pointer;
    float: right;
    font-size: 20px;
    margin-right: 16px;
    margin-top: $pv-signature-delete-icon-margin-top;
  }

  .e-pv-align-border {
    border: $pv-signature-border-color;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    width: 170px;
  }

  .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: 1px solid $pv-sidebar-bookmark-title-color;
    border-radius: 5px;
    display: inline-block;
    font-size: 13px;
    height: 88px;
    margin: 15px;
    padding-top: 40px;
    text-align: center;
    width: 311px;
    word-wrap: break-word;
    @if $skin-name == 'FluentUI' {
      max-width: 300px;
      padding-top: 36px;
    }
    @if $skin-name == 'Material3' {
      border: 1px dashed rgba($primary);
      border-radius: 4px;
      background: $content-bg-color;
      font-size: $text-2xl;
      color: $content-text-color;
      font-weight: $font-weight-normal;
    }
  }

  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item.e-focused {
    @if $skin-name == 'bootstrap5' {
      color: $white;
      height: 32px;
      line-height: 32px;
    }
    @else {
      color: $pv-icon-color;
    }
  }

  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item {
    @if $skin-name == 'bootstrap5' {
      height: 32px;
      line-height: 32px;
      padding-left: 8px;
    }
  }

  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-menu-icon {
    @if $skin-name == 'bootstrap5' {
      font-size: 16px;
    }
  }

  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
    @if $skin-name == 'bootstrap5' {
      font-size: 14px;
    }
  }

  .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') {
      border-radius: 4px;
    }
    @if $skin-name == 'bootstrap5' {
      color: $pv-icon-color;
      height: 32px;
      line-height: 32px;
    }
    @else {
      color: $pv-icon-color;
    }
  }

  .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 == '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 {
    @if $skin-name == 'bootstrap4' {
      color: $pv-icon-color-hover;
    }
    @if $skin-name == 'bootstrap5' {
      color: $white;
    }
  }

  .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' {
      color: $white;
    }
  }

  .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-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 {
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    display: block;
    margin-bottom: 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: 0;
    opacity: 0;
    position: absolute;
    width: 0;
  }

  .e-pv-checkbox-div {
    border: $pv-form-field-checkbox-container;
    display: inline;
    height: 100%;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
  }

  .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: 1px;
    border-width: 1px;
  }

  .e-pv-radiobtn-container {
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    display: block;
    margin-bottom: 0;
    position: relative;
    user-select: none;
  }

  .e-pv-radiobtn-container input {
    cursor: pointer;
    opacity: 0;
    position: absolute;
  }

  .e-pv-radiobtn-div {
    border: 1px solid $pv-form-checkbox-border-color;
    border-radius: 50%;
    height: 100%;
    left: $pv-form-field-size;
    position: absolute;
    top: $pv-form-field-size;
    width: 100%;
  }

  .e-pv-radio-btn {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  .e-pv-radio-btn + span {
    display: block;
  }

  .e-pv-radio-btn + .e-pv-radiobtn-span::before {
    content: '';
    display: block;
    height: inherit;
    width: inherit;
  }

  .e-pv-radio-btn:checked + .e-pv-radiobtn-span::before {
    background: $pv-form-checkbox-border-color;
    border-radius: 50%;
  }

  .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-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: 12px;
    }
    @else {
      padding-right: 15px;
    }
  }

  .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: 232px;
    }
    @else {
      width: 285px;
    }
  }

  .e-pv-properties-text-edit-prop {
    @if $skin-name == 'FluentUI' {
      padding-top: 35px;
    }
    @else {
      padding-top: 20px;
    }
  }

  .e-pv-properties-visibility-style-prop {
    @if $skin-name == 'FluentUI' {
      padding-bottom: 12px;
      padding-top: 12px;
    }
    @if $skin-name == 'Material3' {
      padding-top: 16px;
    }
    @else {
      padding-bottom: 10px;
      padding-top: 20px;
    }
  }

  .e-pv-properties-checkbox-main-div-prop {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 20px;
  }

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

  .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') {
      background-color: $pv-annotation-dropdown-background-color-hover;
      border-color: $pv-annotation-dropdown-border-color-hover;
    }
    @if ($skin-name == 'bootstrap5') {
      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') {
      background-color: $pv-signature-footer-color;
      border-color: $pv-signature-footer-color;
    }
    @if ($skin-name == 'bootstrap5') {
      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-properties-fill-color-style-prop,
  .e-pv-properties-stroke-color-style-prop,
  .e-pv-properties-stroke-thickness-style-prop {
    @if $skin-name == 'Material3' {
      padding: 0 20px 12px 1px;
    }
    @else {
      padding: 12px 20px 12px 1px;
    }
  }

  .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: 0 20px 12px 1px;
    }
    @else{
      padding: 12px 20px 12px 1px;
    }
  }

  .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') {
      color: inherit;
    }
    @if ($skin-name == 'material') {
      color: $pv-prop-line-styles-color;
    }
    background: $pv-form-field-property-font-style-color;
    @if ($skin-name == 'bootstrap5') {
      border: 1px solid $border-light;
    }
    @if ($skin-name == 'bootstrap5') {
      border-radius: 4px;
    }
    @else {
      border-radius: 2px;
    }
    height: $pv-formfield-properties-icon-height;
    margin-top: 8px;
    @if $skin-name != 'FluentUI' {
      width: 54px;
    }
    @if ($skin-name == 'bootstrap5') {
      align-content: center;
      align-items: center;
      box-shadow: none;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      padding: 0 11px;
      width: inherit;
    }
    @if ($skin-name == 'Material3') {
      align-content: center;
      align-items: center;
      box-shadow: none;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 72px;
      height: 32px;
      border-bottom: 1px solid rgba($border);
      box-sizing: border-box;
      padding-right: 16px;
      margin-top: 0;
    }
  }

  .e-pv-properties-format-text-style-prop {
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
      padding: 15px 15px 4px 1px;
    }
    @if ($skin-name == 'Material3') {
      padding: 20px 15px 6px 0;
    }
    @else {
      padding: 15px 15px 15px 1px;
    }
  }

  .e-pv-properties-font-family-container {
    margin-right: 15px;
    @if $skin-name == 'FluentUI' {
      width: 122px;
    }
    @if $skin-name == 'Material3' {
      width: 214px;
      height: 32px;
      margin-right: 12px;
    }
    @else {
      width: 165px;
    }
  }

  .e-pv-properties-font-size-container {
    @if $skin-name == 'Material3' {
      border-right-color: $transparent;
      height: 32px;
      border-bottom: 1px solid $transparent;
      box-sizing: border-box;
    }
    @else {
      border-right-color: $pv-comment-panel-bottom-color;
      border-right-style: solid;
      border-right-width: 1px;
      margin-right: 15px;
      padding-right: 15px;
    }
    width: $pv-font-size-field-width;
  }

  .e-pv-formfield-maxlength {
    padding-left: 20px;
  }

  .e-pv-left-align-icon-div,
  .e-pv-center-align-icon-div,
  .e-pv-right-align-icon-div {
    @if ($skin-name != 'bootstrap5') {
      padding-left: 6px;
    }
  }

  .e-pv-properties-font-color-container,
  .e-pv-properties-color-container-style-prop {
    display: flex;
    padding-top: 20px;
  }

  .e-pv-formfield-textcolor {
    margin-right: 10px;
  }

  .e-pv-formfield-maxlength-icon {
    align-items: center;
    display: flex;
    padding-right: 14px;
    @if ($skin-name == 'bootstrap5') {
      padding-right: 10px;
    }
    @if ($skin-name == 'FluentUI') {
      padding-right: 8px;
    }
  }

  .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') {
      padding: 0 11px;
    }
  }

  .e-pv-formfield-textcolor-icon {
    background: $pv-form-field-property-font-style-color;
    @if ($skin-name == 'bootstrap5') {
      border: 1px solid $border-light;
    }
    @if ($skin-name == 'bootstrap5') {
      border-radius: 4px;
    }
    @else {
      border-radius: 2px;
    }
    width: $pv-form-field-property-font-style-width;
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
      height: 36px;
    }
    @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') {
      align-items: baseline;
      box-shadow: none;
      color: inherit;
      display: flex;
      height: 32px;
    }
    @if ($skin-name == 'Material3') {
      display: flex;
      width: 76px;
      border-bottom: 1px solid rgba($border);
      box-shadow: none;
    }
    @if ($skin-name == 'FluentUI') {
      height: auto;
    }
  }

  .e-pv-properties-formfield-maxlength-text-label,
  .e-pv-formfield-maxlength {
    padding-left: 1px;
    width: $pv-formfield-maxlength-width;
    @if ($skin-name == 'Material3') {
      height: 32px;
    }
  }

  .e-pv-formfield-maxlength-group {
    display: flex;
    padding-left: $pv-formfield-maxlength-group-padding-left;
  }

  .e-pv-properties-form-field-list-add-div {
    display: flex;
    @if $skin-name == 'FluentUI' {
      padding-bottom: 12px;
      padding-top: 16px;
    }
    @else {
      padding-bottom: 15px;
      padding-top: 20px;
    }
  }

  .e-pv-properties-list-item-edit-prop {
    margin-right: 15px;
    width: 295px;
    @if $skin-name == 'FluentUI' {
      margin-right: 12px;
      width: 318px;
    }
  }

  .e-pv-properties-form-field-window {
    max-width: $pv-properties-form-field-win-max-width;
  }

  .e-bigger .e-pv-properties-form-field-window {
    @if $skin-name == 'Material3' {
      max-width: 490px;
    }
  }

  .e-pv-properties-formfield-textarea {
    @if $skin-name == 'FluentUI' {
      min-width: 318px;
    }
  }

  .e-pv-properties-export-value-edit-prop {
    width: 295px;
    @if $skin-name == 'FluentUI' {
      width: 318px;
    }
  }

  .e-pv-properties-form-field-list-btn-div {
    align-items: center;
    display: flex;
    height: 36px;
    margin-top: 10px;
    text-align: center;
    @if $skin-name == 'FluentUI' {
      height: 32px;
      margin-top: 25px;
    }
  }

  .e-pv-properties-form-field-export-value-main-div {
    @if $skin-name == 'FluentUI' {
      padding-bottom: 12px;
      padding-top: 0;
    }
    @else {
      padding-bottom: 15px;
      padding-top: 10px;
    }
    width: 335px;
  }

  .e-pv-properties-form-field-group-btn-div {
    display: grid;
  }

  .e-pv-properties-form-field-option-dropdown-list-div {
    @if $skin-name == 'FluentUI' {
      padding-top: 0;
    }
    @else {
      padding-top: 10px;
    }
  }

  .e-pv-properties-form-field-btn-textarea-container {
    display: flex;
    width: 385px;
    @if $skin-name == 'FluentUI' {
      padding-top: 0;
    }
    @else {
      padding-top: 15px;
    }
  }

  .e-pv-properties-dropdown-btn {
    align-items: center;
    display: flex;
    height: 36px;
    text-align: center;
    width: 75px;
  }

  .e-pv-show-designer-name {
    align-items: center;
    color: $pv-show-designer-name-color;
    display: grid;
    height: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }

  .e-pv-formfield-li-element {
    list-style: none;
    padding-left: 10px;
  }

  .e-pv-li-select {
    background-color: $pv-form-field-li-background-color;
    @if ($skin-name == 'bootstrap5') {
      background-color: $pv-item-selection-background-color;
      color: $white;
    }
    @if ($skin-name == 'tailwind') {
      background-color: $pv-item-selection-background-color;
    }
  }

  .e-pv-formfield-li-element.e-pv-li-select {
    background-color: $pv-form-field-li-background-color;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
      color: $white;
    }
  }

  .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 == 'bootstrap5' or $skin-name == 'FluentUI') {
      color: $white;
    }
    @if ($skin-name == 'Material3') {
      background-color: $content-bg-color-hover;
    }
  }

  .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: $text-sm;
      color: rgba(28, 31, 30, .38);
    }
  }

  .e-pv-form-designer-ul-list-items {
    padding-left: 1px;
  }

  .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: 24px;
    }
    @else {
      font-family: 'Roboto';
    }
    @if $skin-name == 'bootstrap5' {
      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: 20px;
      font-family: $font-family;
    }
  }

  .e-pv-form-field-property-header-general {
    @if $skin-name == 'FluentUI' {
      font-family: 'Segoe UI';
      height: 24px;
    }
    @if $skin-name == 'Material3' {
      font-family: $font-family;
    }
    @else {
      font-family: 'Roboto';
    }
    @if $skin-name == 'bootstrap5' {
      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-properties-tab-style-prop.e-lib.e-tab.e-control {
    @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-dark') {
      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: 64px;
  }

  .e-pv-properties-form-field-font-style {
    background: $pv-form-field-property-font-style-color;
    @if ($skin-name == 'bootstrap5') {
      border-radius: 4px;
    }
    @else {
      border-radius: 2px;
    }
    display: flex;
    height: 36px;
    justify-content: space-evenly;
    width: 154px;
    @if ($skin-name == 'bootstrap5') {
      align-items: center;
      border: 1px solid $border-light;
      height: 32px;
      width: 163px;
    }
    @if ($skin-name == 'FluentUI') {
      align-items: center;
      border: 1px solid $border;
      height: 32px;
      width: 163px;
    }
    @if ($skin-name == 'Material3') {
      align-items: center;
      border-bottom: 1px solid $transparent;
      height: 32px;
      width: 128px;
      padding-left: 8px;
      padding-top: 10px;
    }
  }

  .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: 4px;
    }
    @else {
      border-radius: 2px;
    }
    display: flex;
    height: 36px;
    justify-content: space-evenly;
    margin-right: 15px;
    width: 120px;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
      align-items: center;
      border: 1px solid $border-light;
      height: 32px;
    }
    @if ($skin-name == 'FluentUI') {
      border: 1px solid $border;
    }
    @if ($skin-name == 'Material3') {
      align-items: center;
      height: 32px;
      width: 96px;
      padding-top: 8px;
      border: 1px solid $transparent;
    }
  }

  .e-bigger .e-pv-properties-form-field-font-style {
    background: $pv-form-field-property-font-style-color;
    @if ($skin-name == 'bootstrap5') {
      border-radius: 4px;
    }
    @else {
      border-radius: 2px;
    }
    display: flex;
    height: 36px;
    justify-content: space-evenly;
    width: 154px;
    @if ($skin-name == 'bootstrap5') {
      align-items: center;
      border: 1px solid $border-light;
      height: 32px;
      width: 163px;
    }
    @if ($skin-name == 'FluentUI') {
      align-items: center;
      border: 1px solid $border;
      height: 32px;
      width: 163px;
    }
    @if ($skin-name == 'Material3') {
      align-items: center;
      border-bottom: 1px solid $transparent;
      height: 32px;
      width: 128px;
      padding-left: 8px;
      padding-top: 20px;
    }
  }

  .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: 4px;
    }
    @else {
      border-radius: 2px;
    }
    display: flex;
    height: 36px;
    justify-content: space-evenly;
    margin-right: 15px;
    width: 120px;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
      align-items: center;
      border: 1px solid $border-light;
      height: 32px;
    }
    @if ($skin-name == 'FluentUI') {
      border: 1px solid $border;
    }
    @if ($skin-name == 'Material3') {
      align-items: center;
      height: 32px;
      width: 96px;
      border: 1px solid $transparent;
      padding-top: 20px;
    }
  }

  .e-pv-properties-formfield-label {
    color: $pv-form-field-property-label-color;
    font-family: 'Roboto';
    @if ($skin-name == 'bootstrap5') {
      font-family: inherit;
    }
    font-size: $pv-form-field-property-general-header-font-size;
    font-style: normal;
    font-weight: normal;
    @if ($skin-name == 'bootstrap5') {
      font-weight: 500;
    }
    @if ($skin-name == 'FluentUI') {
      font-family: 'Segoe UI';
      font-weight: 600;
      margin-bottom: 4px;
    }
    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: $text-xxs;
      font-weight: $font-weight-normal;
      line-height: 12px;
      height: 12px;
      font-family: $font-family;
    }
  }

  .e-pv-formfield-maxlength .e-input-group.e-control-wrapper .e-input-group-icon {
    min-width: $pv-formfield-maxlength-arrow-width;
  }

  .e-pv-properties-form-field-window {
    height: $pv-formfield-designer-dialog-height;
  }

  .e-bigger .e-pv-properties-form-field-window {
    @if $skin-name == 'Material3' {
      height: 565px;
    }
    @if ($skin-name == 'FluentUI') {
      height: 585px;
    }
  }

  .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-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: 48px;
      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: 0;
      padding-top: 0;
      border-width: 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: 1em;
    }
  }

  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-pop .e-toolbar-item:not(.e-separator) {
    background-color: $pv-comment-panel-bg;
    padding: 0 $pv-icon-padding-top;
  }

  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
    padding: 0 $pv-icon-padding-top;
  }

  .e-pv-signature-window .e-dlg-content {
    @if ($skin-name == 'highcontrast') {
      padding: 16px;
    }
  }

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

  .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-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-bigger .e-dialog.e-pv-signature-dialog-height {
    @if ($skin-name == 'FluentUI' or $skin-name == 'Material3') {
      height: 627px;
      min-height: 591px;
    }
  }
  
  .e-bigger .e-pv-signature-dialog-height {
    @if ($skin-name == 'FluentUI' $skin-name == 'Material3') {
      min-height: 592px;
    }
  }

  .e-dialog.e-pv-signature-dialog-blazor-height {
    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;
    }
  }

  .e-bigger .e-dialog.e-pv-signature-dialog-blazor-height  {
    @if ($skin-name == 'Material3') {
      min-height: 590px;
    }
  }

  .e-pv-handwritten-signature-canvas {
    height: $pv-handwritten-sign-height;
    width: $pv-handwritten-sign-width;
  }

  .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 == 'Material3' {
      width: 100%;
      max-width: $pv-canvas-sign-width;
    }
  }

  .e-pv-canvas-signature-blazor {
    width: $pv-canvas-sign-width-blazor;
  }

  .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: 0 6px;
      width: 28px;
    }
  }
  .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;
    }
  }
}


@include export-module('pdfviewer-tailwind-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: '\e83c';
    }

    .e-pv-download-document-icon::before {
      content: '\e7a1';
    }

    .e-pv-print-document-icon::before {
      content: '\e75d';
    }

    .e-pv-first-page-navigation-icon::before {
      content: '\e833';
    }

    .e-pv-previous-page-navigation-icon::before {
      content: '\e765';
    }

    .e-pv-prev-search-icon::before {
      color: $icon-color;
      content: '\e765';
    }

    .e-pv-next-page-navigation-icon::before {
      content: '\e748';
    }

    .e-pv-next-search-icon::before {
      color: $icon-color;
      content: '\e748';
    }

    .e-pv-last-page-navigation-icon::before {
      content: '\e818';
    }

    .e-pv-zoom-out-icon::before {
      content: '\e81b';
      line-height: $pv-toolbaritem-btn-line-height;
    }

    .e-pv-zoom-in-icon::before {
      content: '\e768';
      line-height: $pv-toolbaritem-btn-line-height;
    }

    .e-pv-thumbnail-view-icon::before {
      content: '\e79e';
    }

    .e-pv-stamp-icon::before {
      content: '\e717';
    }

    .e-pv-thumbnail-view-disable-icon::before {
      color: $pv-thumbnail-icon-disable-color;
      content: '\e79e';
    }

    .e-pv-thumbnail-view-selection-icon::before {
      color: $pv-thumbnail-icon-selection-color;
      content: '\e79e';
    }

    .e-pv-bookmark-icon::before {
      content: '\e750';
    }

    .e-pv-bookmark-disable-icon::before {
      color: $pv-thumbnail-icon-disable-color;
      content: '\e750';
    }

    .e-pv-bookmark-selection-icon::before {
      color: $pv-thumbnail-icon-selection-color;
      content: '\e750';
    }

    .e-pv-title-close-icon::before,
    .e-pv-annotation-tools-close-icon::before,
    .e-pv-annotation-popup-close::before {
      content: '\e7e7';
    }

    .e-pv-resize-icon::before {
      content: '\e7e3';
      font-size: 10px;
    }

    .e-pv-text-select-tool-icon::before {
      content: '\e74e';
    }

    .e-pv-pan-tool-icon::before {
      content: '\e7b1';
    }

    .e-pv-text-search-icon::before {
      content: '\e754';
    }

    .e-pv-search-icon::before {
      content: '\e754';
      font-family: 'e-icons';
    }

    .e-pv-search-close::before {
      content: '\e7e7';
      font-family: 'e-icons';
    }

    .e-pv-formdesigner-icon::before {
      content: '\e732';
    }

    .e-pv-annotation-icon::before {
      content: '\e82a';
    }

    .e-pv-annotation-color-icon::before {
      content: '\e783';
    }

    .e-pv-annotation-stroke-icon::before {
      content: '\e819';
    }

    .e-pv-annotation-opacity-icon::before {
      content: '\e7e1';
    }

    .e-pv-annotation-thickness-icon::before {
      content: '\e7bf';
    }

    .e-pv-annotation-delete-icon::before {
      content: '\e820';
    }

    .e-pv-undo-icon::before {
      content: '\e713';
    }

    .e-pv-redo-icon::before {
      content: '\e755';
    }

    .e-pv-more-icon::before {
      @if $skin-name == 'bootstrap5' {
        color: $icon-color;
      }
      content: '\e701';
    }

    .e-pv-backward-icon::before {
      content: '\e773';
    }

    .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: '\e830';
    }

    .e-pv-password-icon::before {
      content: '\e753';
    }

    .e-pv-checkbox-icon::before {
      content: '\e7e4';
    }

    .e-pv-radiobutton-icon::before {
      content: '\e7b2';
    }

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

    .e-pv-listbox-icon::before {
      content: '\e77e';
    }

    .e-pv-annotation-shape-icon::before {
      content: '\e728';
    }

    .e-pv-annotation-calibrate-icon::before {
      content: '\e7c7';
    }
  }

  .e-pv-download-document-icon.e-menu-icon::before {
    content: '\e7a1';
  }

  .e-pv-bookmark-icon.e-menu-icon::before {
    content: '\e750';
  }

  .e-pv-highlight-icon::before {
    content: '\e739';
    font-family: 'e-icons';
  }

  .e-pv-underline-icon::before {
    content: '\e82f';
    font-family: 'e-icons';
  }

  .e-pv-strikethrough-icon::before {
    content: '\e758';
    font-family: 'e-icons';
  }

  .e-pv-copy-icon::before {
    content: '\e77c';
    font-family: 'e-icons';
  }

  .e-pv-cut-icon::before {
    content: '\e7fb';
    font-family: 'e-icons';
  }

  .e-pv-paste-icon::before {
    content: '\e842';
    font-family: 'e-icons';
  }

  .e-pv-delete-icon::before {
    content: '\e820';
    font-family: 'e-icons';
  }

  .e-pv-properties-fill-color-icon::before {
    content: '\e783';
    font-family: 'e-icons';
  }

  .e-pv-properties-stroke-color-icon::before {
    content: '\e819';
    font-family: 'e-icons';
  }

  .e-pv-shape-line-icon::before {
    content: '\e819';
    font-family: 'e-icons';
  }

  .e-pv-shape-arrow-icon::before {
    content: '\e708';
    font-family: 'e-icons';
  }

  .e-pv-shape-rectangle-icon::before {
    content: '\e723';
    font-family: 'e-icons';
  }

  .e-pv-shape-circle-icon::before {
    content: '\e7ca';
    font-family: 'e-icons';
  }

  .e-pv-shape-pentagon-icon::before {
    content: '\e802';
    font-family: 'e-icons';
  }

  .e-pv-comment-icon::before {
    content: '\e733';
    font-family: 'e-icons';
  }

  .e-pv-property-icon::before {
    content: '\e83e';
    font-family: 'e-icons';
  }

  .e-pv-comment-selection-icon::before {
    color: $pv-thumbnail-icon-selection-color;
    content: '\e733';
    font-family: 'e-icons';
  }

  .e-pv-comment-panel-icon::before {
    content: '\e71a';
    font-family: 'e-icons';
  }

  .e-pv-accepted-icon::before {
    color: $pv-status-icon-color;
    content: '\e7a8';
    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: '\e815';
    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: '\e774';
    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: '\e7e7';
    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: '\e7c7';
    font-family: 'e-icons';
  }

  .e-pv-calibrate-distance-icon::before {
    content: '\e743';
    font-family: 'e-icons';
  }

  .e-pv-calibrate-perimeter-icon::before {
    content: '\e716';
    font-family: 'e-icons';
  }

  .e-pv-calibrate-area-icon::before {
    content: '\e78c';
    font-family: 'e-icons';
  }

  .e-pv-calibrate-radius-icon::before {
    content: '\e790';
    font-family: 'e-icons';
  }

  .e-pv-calibrate-volume-icon::before {
    content: '\e741';
    font-family: 'e-icons';
  }

  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret::before {
    content: '\e734';
    font-size: 18px;
  }

  .e-pv-freetext-icon::before {
    content: '\e7b3';
    font-family: 'e-icons';
  }

  .e-pv-annotation-textcolor-icon::before {
    content: '\e79f';
  }

  .e-pv-annotation-textalign-icon::before {
    content: '\e7b8';
    font-family: 'e-icons';
  }

  .e-pv-annotation-textprop-icon::before {
    content: '\e71c';
    font-family: 'e-icons';
  }

  .e-pv-left-align-icon::before {
    content: '\e7b8';
    font-family: 'e-icons';
  }

  .e-pv-right-align-icon::before {
    content: '\e719';
    font-family: 'e-icons';
  }

  .e-pv-center-align-icon::before {
    content: '\e813';
    font-family: 'e-icons';
  }

  .e-pv-justfiy-align-icon::before {
    content: '\e721';
    font-family: 'e-icons';
  }

  .e-pv-bold-icon::before {
    content: '\e737';
    font-family: 'e-icons';
  }

  .e-pv-italic-icon::before {
    content: '\e75a';
    font-family: 'e-icons';
  }

  .e-pv-strikeout-icon::before {
    content: '\e758';
    font-family: 'e-icons';
  }

  .e-pv-underlinetext-icon::before {
    content: '\e82f';
    font-family: 'e-icons';
  }

  .e-pv-superscript-icon::before {
    content: '\e7a7';
    font-family: 'e-icons';
  }

  .e-pv-subscript-icon::before {
    content: '\e80a';
    font-family: 'e-icons';
  }

  .e-pv-handwritten-icon::before {
    content: '\e7db';
    font-family: 'e-icons';
  }

  .e-pv-inkannotation-icon::before {
    content: '\e76e';
    font-family: 'e-icons';
  }

  .e-pv-delete::before {
    content: '\e820';
    font-family: 'e-icons';
  }

  .e-pv-eye-icon::before {
    content: '\e7de';
    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: '\e887';
    cursor: $pv-eye-icon-hover-cursor;
    font-family: 'e-icons';
    font-size: $pv-eye-icon-font-size;
    padding: $pv-eye-icon-padding;
  }
}

// size variables
$timepicker-skin-name: 'bootstrap5' !default;
$timepicker-default-text-indent: 12px !default;
$timepicker-list-bigger-line-height: 32px !default;
$timepicker-list-normal-line-height: 30px !default;
$timepicker-list-normal-font-size: $text-sm !default;
$timepicker-list-bigger-font-size: $text-base !default;
$timepicker-list-normal-text-indent: $timepicker-default-text-indent !default;
$timepicker-list-bigger-text-indent: 16px !default;
$timepicker-popup-border-radius: 6px !default;
$timepicker-list-font-weight: $font-weight-normal !default;
$timepicker-list-normal-padding: 0 !default;
$timepicker-list-bigger-padding: 0 !default;
$timepicker-font-icon: '\e20c' !default;
$timepicker-icon-normal-font-size: $text-base !default;
$timepicker-icon-bigger-font-size: $text-lg !default;
$timepicker-normal-input-min-height: 20px !default;
$timepicker-normal-input-min-width: 20px !default;
$timepicker-bigger-input-min-height: 22px !default;
$timepicker-bigger-input-min-width: 22px !default;
$timepicker-list-default-border-style: none !default;
$timepicker-disable-opacity: 1 !default;

// mouse small
$timepicker-list-small-font-size: $text-sm !default;
$timepicker-list-small-line-height: 26px !default;
$timepicker-list-small-text-indent: 8px !default;

// mouse small icon
$timepicker-icon-small-font-size: $text-sm !default;

// Touch small
$timepicker-list-bigger-small-font-size: $text-sm !default;
$timepicker-list-bigger-small-line-height: 30px !default;
$timepicker-list-bigger-small-text-indent: 16px !default;

// Touch small icon
$timepicker-icon-bigger-small-font-size: $text-base !default;

// color variables
$timepicker-popup-shadow: none !default;
$timepicker-list-default-font-color: $content-text-color !default;
$timepicker-list-border-color: 1px solid $border-light !default;
$timepicker-list-hover-border-color: none !default;
$timepicker-list-bg-color: $flyout-bg-color !default;
$timepicker-list-active-bg-color: $content-bg-color-selected !default;
$timepicker-icon-active-bg-color: $secondary-bg-color-pressed;
$timepicker-active-border-color: darken($gray-600, 10%) !default;
$timepicker-list-active-font-color: $flyout-text-color-pressed !default;
$timepicker-list-active-icon-color: $content-text-color-selected !default;
$timepicker-list-hover-bg-color: $flyout-bg-color-hover !default;
$timepicker-list-hover-font-color: $flyout-text-color-hover !default;
$timepicker-list-popup-icon-active-color: $flyout-text-color-pressed !default;
$timepicker-list-active-hover-bg-color: $flyout-bg-color-hover !default;
$timepicker-list-active-hover-font-color: $flyout-text-color-hover !default;
$timepicker-disable-text: $content-text-color-disabled !default;
$timepicker-default-overlay: $content-bg-color-alt2 !default;
$timepicker-list-small-font-color: $content-text-color !default;

// modal dialog colors
$modal-header-bg-color: $flyout-bg-color !default;
$modal-header-text-color: $content-text-color-alt1 !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 $border-light !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;

@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.e-time-modal {
    @if $timepicker-skin-name != 'Material3' {
      background-color: $timepicker-default-overlay;
    }
    @if $timepicker-skin-name == 'Material3' {
      background: $timepicker-default-overlay;
    }
    height: 100%;
    left: 0;
    opacity: .5;
    pointer-events: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
  }

  #{&}.e-timepicker.e-popup {
    border-style: solid;
    border-width: 1px;
    overflow: auto;

    #{if(&, '&', '*')} .e-content {
      position: relative;
    }

    #{if(&, '&', '*')} .e-list-parent.e-ul {
      margin: 0;
      padding: $timepicker-list-normal-padding 0;

      #{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: 100%;
      }

      #{if(&, '&', '*')} .e-list-item.e-hover {
        cursor: pointer;
      }
    }
  }

  //normal styles

  #{&}.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;
    }
  }

  //bigger styles
  .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-bigger-padding 0;

      #{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;
      }
    }
  }

  //mouse small size
  .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;
      }
    }
  }

  //mouse small size
  .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.bigger .e-control-wrapper.e-time-wrapper,
  #{if(&, '&', '*')}.e-control-wrapper.e-small.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-content-placeholder.e-timepicker.e-placeholder-timepicker {
    background-size: 250px 33px;
    min-height: 33px;
  }

  .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: 40px;
  }
}

/* stylelint-disable */

.e-time-overflow {
  overflow: hidden;
}

.e-timepicker-mob-popup-wrap {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  left: 0;
  max-height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1002;

  .e-timepicker.e-popup.e-lib.e-control.e-popup-open {
    left: 0 !important;
    position: relative;
    top: 0 !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: 0;
}

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

      #{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') {

  /*! timepicker theme */
  .e-time-wrapper {
    #{if(&, '&', '*')} .e-input-group-icon.e-icons.e-active {
      @if $timepicker-skin-name == 'bootstrap4' or $timepicker-skin-name == 'bootstrap5' {
        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(&, '&', '*')} .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' {
          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(&, '&', '*')} .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,
  .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-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: 500;
      }
    }
  }
}


@include export-module('timepicker-bootstrap5-icons') {

  /*! component icons */

  .e-time-wrapper,
  #{if(&, '&', '*')}.e-control-wrapper.e-time-wrapper {

    #{if(&, '&', '*')} .e-time-icon.e-icons::before {
      content: '\e705';
    }
  }

  .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: '\e7e7';
        font-family: 'e-icons';
      }
    }
  }
}

/*! recurrence editor theme wise definitions*/
$recurrence-label-bottom: 7px !default;
$recurrence-month-label-bottom: 7px !default;
$recurrence-week-label-bottom: 10px !default;
$recurrence-label-font-weight: $font-weight-normal !default;
$recurrence-label-font-nrml-size: 14px !default;
$recurrence-label-font-bgr-size: 16px !default;
$recurrence-left-padding: 0 8px 16px 0 !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: 16px !default;
$recurrence-week-position-min-width: 98px !default;

@include export-module('recurrence-editor-layout') {

  /*! Recurrence-Editor component layout */
  .e-recurrenceeditor {
    .e-editor {
      display: flex;
      flex-flow: row wrap;
      margin: 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: normal;
        padding: 18px 0 0 8px;
      }

      .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: 10px;
      }
    }

    .e-input-wrapper-side.e-form-left {
      padding: $recurrence-left-padding;
    }

    .e-form-left {
      padding: 0 8px 16px 0;
    }

    .e-form-right,
    .e-input-wrapper-side.e-form-right {
      padding: 0 0 10px;
    }

    .e-input-wrapper {
      float: left;
      width: 50%;

      div {
        margin-bottom: 2.5%;
      }
    }

    .e-input-wrapper.e-end-on-date,
    .e-input-wrapper.e-end-on-count {
      padding-right: 0;
    }

    &.e-rtl {
      .e-end-on > div,
      .e-month-expander > div > div {
        float: right;
      }

      .e-form-left,
      .e-input-wrapper-side.e-form-left {
        padding: 0 0 10px 8px;
      }

      .e-form-right,
      .e-input-wrapper-side.e-form-right {
        padding: 0 8px 10px 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: 0;
      }

      .e-end-on-label {
        margin-bottom: 5px;
      }

      .e-input-wrapper-side.e-end-on .e-end-on-left {
        padding: 0 0 0 8px;
      }

      .e-input-wrapper.e-end-on-date,
      .e-input-wrapper.e-end-on-count {
        padding: 0 8px 0 0;
      }

      .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: 8px;
      }

      button {
        border-radius: 50%;
        flex-flow: row wrap;
        height: 35px;
        margin: 0 8px 10px;
        width: 35px;
      }
    }

    .e-hide-recurrence-element {
      display: none;
    }

    .e-half-space {
      width: 20%;
    }

    .e-year-expander {
      margin-bottom: 11px;
    }

    .e-month-expander tr:first-child .e-input-wrapper {
      padding-bottom: 11px;
    }

    .e-month-expander-checkbox-wrapper.e-input-wrapper {
      padding-top: 3px;

      .e-month-type .e-label {
        display: none;
      }
    }

    .e-input-wrapper-side {
      float: left;
      padding: 16px 20px 0;
      width: 50%;

      &.e-end-on {

        .e-end-on-label {
          float: none;
          font-size: $recurrence-label-font-nrml-size;
          font-weight: $recurrence-label-font-weight;
          margin-bottom: $recurrence-month-label-bottom;
          padding-right: 16px;
        }

        .e-end-on-left {
          padding-right: 16px;
        }
      }

      &.e-non-week > .e-input-wrapper {
        margin: 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: 16px;
      }
    }

    .e-input-wrapper-side .e-days .e-form-left {
      padding-bottom: 6px;
    }

    .e-input-wrapper-side .e-non-week .e-form-left {
      padding-bottom: 12px;
    }

    .e-input-wrapper-side.e-form-right {
      margin-bottom: 11px;
    }
  }

  .e-bigger {
    .e-recurrenceeditor {
      padding: 0;

      .e-input-wrapper-side.e-form-left {
        padding: 0 12px 11px 0;
      }

      .e-form-left {
        padding: 0 12px 14px 0;
      }

      .e-form-right,
      .e-input-wrapper-side.e-form-right {
        padding: 0 0 10px;
      }

      .e-input-wrapper-side .e-days .e-form-left {
        padding-bottom: 6px;
      }

      .e-recurrence-table .e-monthday-element {
        padding-left: 70px;
      }

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

      .e-input-wrapper-side.e-end-on .e-end-on-left {
        padding-right: $recurrence-end-bgr-padding-right;
      }

      .e-end-on-label {
        margin-bottom: 0;
      }

      .e-days .e-week-expander-label {
        font-size: $recurrence-label-font-bgr-size;
        margin-bottom: 8px;
      }

      .e-input-wrapper-side .e-non-week .e-form-left {
        padding-bottom: 12px;
      }

      .e-input-wrapper-side.e-end-on .e-end-on-label {
        font-size: $recurrence-label-font-bgr-size;
        margin-bottom: 1px;
      }

      .e-month-expander tr:first-child .e-input-wrapper,
      .e-year-expander,
      .e-input-wrapper-side.e-form-right {
        margin-bottom: 11px;
      }

      .e-recurrence-table {
        &.e-month-expand-wrapper td:first-child {
          width: 30px;
        }
      }

      .e-days {
        button {
          height: 40px;
          width: 40px;
        }
      }

      &.e-rtl {

        .e-form-left,
        .e-input-wrapper-side.e-form-left {
          padding: 0 0 10px 12px;
        }

        .e-form-right,
        .e-input-wrapper-side.e-form-right {
          padding: 0 12px 10px 0;
        }

        .e-recurrence-table .e-monthday-element,
        .e-recurrence-table .e-day-position {
          padding: 0 64px 0 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: 0;
        }

        .e-end-on-label {
          margin-bottom: 5px;
        }

        .e-input-wrapper-side.e-end-on .e-end-on-left {
          padding: 0 0 0 12px;
        }

        .e-input-wrapper.e-end-on-date,
        .e-input-wrapper.e-end-on-count {
          padding: 0 12px 0 0;
        }

        .e-recurrence-table .e-week-position {
          left: 0;
        }
      }
    }
  }

  .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: 6px;
      }

      .e-month-expander-label {
        font-size: 12px;
        margin-bottom: 5px;
      }

      .e-footer-content {
        padding: 12px;
      }

      .e-form-left,
      .e-input-wrapper-side.e-form-left {
        padding: 0 3px 10px 0;
      }

      .e-form-right,
      .e-input-wrapper-side.e-form-right {
        padding: 0 0 10px 3px;
      }

      .e-input-wrapper.e-end-on-date,
      .e-input-wrapper.e-end-on-count {
        padding: 0 0 0 10px;
      }

      .e-input-wrapper-side.e-end-on .e-end-on-left {
        padding-right: 10px;
      }

      &.e-end-on {
        padding-right: 0;

        .e-end-on-label {
          float: none;
          font-size: 12px;
          font-weight: $recurrence-label-font-weight;
          margin-bottom: $recurrence-label-bottom;
        }

        .e-end-on-left {
          padding-right: 0;
        }
      }

      .e-recurrence-table .e-monthday-element,
      .e-recurrence-table .e-day-position {
        padding-left: 20px;
      }

      .e-recurrence-table .e-monthday-element {
        margin-left: 20px;
      }

      .e-week-position {
        right: 0;
        padding-right: 10px;
      }

      &.e-rtl {
        .e-input-wrapper-side.e-end-on .e-end-on-left {
          padding-right: 0;
        }

        .e-input-wrapper.e-end-on-date,
        .e-input-wrapper.e-end-on-count {
          padding: 0 10px 0 0;
        }

        .e-recurrence-table .e-monthday-element {
          padding: 0 20px 0 0;
        }

        .e-recurrence-table .e-day-position {
          padding: 0 50px 0 0;
        }

        .e-week-position {
          left: 0;
        }
      }
    }

    &.e-recurrence-dialog {
      .e-dlg-header-content {
        background: none;
        box-shadow: none;
        padding-bottom: 10px;
      }

      .e-editor {
        .e-input-wrapper-side.e-end-on .e-end-on-label {
          margin-bottom: $recurrence-label-bottom;
        }
      }

      .e-footer-content {
        padding: 16px 8px;
      }
    }
  }

  @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: 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: 20px;
        }

        > .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: 0 0 10px;
        }

        .e-input-wrapper.e-end-on-date,
        .e-input-wrapper.e-end-on-count {
          padding: 0 0 0 10px;
        }

        .e-input-wrapper-side.e-end-on .e-end-on-left {
          padding-right: 10px;
        }

        .e-form-right,
        .e-input-wrapper-side.e-form-right {
          padding-left: 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: 50px;
        }
      }

      &.e-rtl {
        .e-input-wrapper-side.e-end-on .e-end-on-left {
          padding-right: 0;
        }

        .e-input-wrapper.e-end-on-date,
        .e-input-wrapper.e-end-on-count {
          padding: 0 10px 0 0;
        }
      }
    }
  }
}


/*! Recurrence-Editor component theme */

/*! Schedule's bootstrap5 theme wise override definitions and variables */
/* stylelint-disable */
$schedule-skin: $skin-name !default;

// font definitions
$schedule-date-navigation-font-size: $text-lg !default;
$schedule-header-nrml-font-size: $text-sm !default;
$schedule-header-bgr-font-size: $text-base !default;
$schedule-header-device-font-size: $text-base !default;
$schedule-content-nrml-font-size: $text-sm !default;
$schedule-content-bgr-font-size: $text-base !default;
$schedule-content-device-font-size: $text-sm !default;
$schedule-date-month-header-wrap-bgr-font-size: $text-base !default;
$schedule-date-header-wrap-nrml-font-size: $text-sm !default;
$schedule-date-header-wrap-bgr-font-size: $text-base !default;
$schedule-date-header-wrap-device-font-size: $text-base !default;
$schedule-header-day-line-height: 18px !default;
$schedule-header-day-padding-bottom: 4px !default;
$schedule-header-day-nrml-font-size: $text-xs !default;
$schedule-header-day-bgr-font-size: $text-sm !default;
$schedule-header-day-device-font-size: $text-sm !default;
$schedule-header-date-device-font-size: $text-lg !default;
$schedule-header-date-nrml-font-size: $text-base !default;
$schedule-header-date-bgr-font-size: $text-lg !default;
$schedule-time-scale-nrml-font-size: $text-xs !default;
$schedule-time-scale-bgr-font-size: $text-sm !default;
$schedule-time-scale-device-font-size: $text-xs !default;
$schedule-current-time-nrml-font-size: $text-xxs !default;
$schedule-current-time-bgr-font-size: $text-xs !default;
$schedule-current-time-bgr-device-font-size: $text-xs !default;
$schedule-recurrence-font-size: $text-xs !default;
$schedule-tbar-down-arrow-font-size: $text-lg !default;
$schedule-content-nrml-font-text-transform: none !default;
$schedule-more-indicator-nrml-font-size: $text-xxs !default;
$schedule-popup-header-icon-font-size: $text-sm !default;
$schedule-month-date-header-cell-font-size: $text-base !default;
$schedule-month-date-header-cell-text-align: left !default;
$schedule-month-date-header-cell-text-transform: none !default;

// font color definitions
$schedule-header-font-color: $content-text-color-alt1 !default;
$schedule-primary-content-font-color: $content-text-color !default;
$schedule-secondary-content-font-color: $content-text-color-alt2 !default;
$schedule-select-font-color: $content-text-color !default;
$schedule-hover-font-color: $content-text-color-hover !default;
$schedule-disable-font-color: $content-text-color !default;
$schedule-active-font-color: $primary !default;
$schedule-tbar-hover-font: rgba($primary, .87) !default;

//  schedule appointment definitions
$schedule-appointment-details-padding: 0 4px !default;
$schedule-appointment-bg-color: $primary !default;
$schedule-appointment-border-color: $border-light !default;
$schedule-appointment-selected-border: 1px solid rgba($border-light, .5) !default;
$schedule-appointment-border-radius: 2px !default;
$schedule-appointment-active-border-color: $icon-color !default;
$schedule-month-appointment-height: 26px !default;
$schedule-month-appointment-text-line-height: 18px !default;
$schedule-appointment-text-line-height: 18px !default;
$schedule-month-appointment-time-padding: 1.5px !default;
$schedule-month-appointment-subject-padding: 1px 2px !default;
$schedule-timescale-appointment-height: 54px !default;
$schedule-appointment-font-color: $primary-text-color !default;
$schedule-block-appointment-font-color: $content-text-color-alt2 !default;
$schedule-more-appointment-margin-bottom: 2px !default;
$schedule-block-appointment-bg-color: $content-bg-color-alt2 !default;
$schedule-event-box-shadow-1: $shadow-md !default;
$schedule-event-box-shadow-2: $shadow-md !default;
$schedule-event-box-shadow-3: $shadow-md !default;
$schedule-appointment-detail-line-height: $schedule-appointment-text-line-height !default;
$schedule-drag-appointment-opacity: .4;

// schedule popup definitions
$schedule-popup-content-padding: 40px 18px 12px !default;
$schedule-popup-footer-padding: 8px 18px 8px 18px !default;
$schedule-popup-box-shadow-1: $shadow-lg !default;
$schedule-popup-box-shadow-2: $shadow-lg !default;
$schedule-popup-box-shadow-3: $shadow-lg !default;
$schedule-calendar-shadow: $schedule-popup-box-shadow-1 !default;
$schedule-popup-border-color: $border-light !default;
$schedule-popup-bg-color: $content-bg-color !default;
$schedule-popup-header-icon-color: $icon-color !default;
$schedule-popup-header-icon-hover-color: $primary !default;
$schedule-popup-header-icon-hover-bg-color: rgba(255, 255, 255, .15) !default;
$schedule-popup-icon-color: $schedule-appointment-active-border-color !default;
$schedule-popup-icon-hover-color: $schedule-appointment-active-border-color !default;
$schedule-popup-icon-hover-bg-color: $content-bg-color-alt2 !default;
$schedule-popup-content-icon-color: $schedule-secondary-content-font-color !default;
$schedule-event-popup-content-padding: 0 18px 12px !default;
$schedule-event-popup-fields-padding: 12px !default;
$schedule-popup-title-color: rgba($color: $schedule-appointment-bg-color, $alpha: .3) !default;
$schedule-popup-btn-border: none !default;
$schedule-alert-dialog-border: none !default;
$schedule-more-popup-close-margin-top: 3px !default;
$schedule-more-popup-padding: 8px 0 !default;
$schedule-event-popup-header-icon-padding: 6px 8px 0 0 !default;
$schedule-event-popup-subject-wrap-padding: 12px 18px !default;
$schedule-popup-overlay-bg-color: $overlay-bg-color !default;
$schedule-time-cells-font-color: $schedule-secondary-content-font-color !default;
$schedule-popup-icon-font-size: $text-base !default;
$schedule-popup-icon-padding: 2px 10px 0 0 !default;
$schedule-popup-footer-text-transform: capitalize !default;
$schedule-cell-popup-header-icon-padding: 2px 8px 0 0 !default;
$schedule-cell-popup-span-margin: 14px 0 4px !default;
$schedule-cell-popup-subject-height: 30px !default;
$schedule-bgr-cell-popup-content-padding: 48px 24px 16px !default;
$schedule-bgr-cell-popup-footer-padding: $schedule-popup-footer-padding !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 !default;
$schedule-event-popup-subject-border-radius: 4px !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-device-event-popup-subject-padding: 12px 24px !default;
$schedule-bgr-event-popup-header-icon-size: 2em !default;
$schedule-bgr-rtl-event-popup-date-time-icon-padding-right: 16px !default;
$schedule-multiple-event-popup-icon-color: $schedule-popup-header-icon-color !default;
$schedule-multiple-event-popup-subject-padding: 0 5px 0 8px !default;

// schedule toolbar definitions
$border-size: 1px;
$schedule-tbar-down-arrow-margin-top: 2px !default;
$schedule-tbar-bgr-color: $secondary-bg-color-focus !default;
$schedule-tbar-bgr-min-height: 54px !default;
$schedule-tbar-border-bottom-size: 0 !default;
$schedule-tbar-box-shadow: 0 1px 2px rgba($black, .15) !default;
$schedule-tbar-box-shadow-bottom-margin: 3px !default;
$schedule-tbar-min-height: 38px !default;
$schedule-tbar-default-icon-color: $icon-color !default;
$schedule-tbar-separator-size: $border-size !default;
$schedule-tbar-default-bg: $content-bg-color-alt1 !default;
$schedule-tbar-separator-border: $border-light !default;
$schedule-tbar-border-nav: $border-light !default;
$schedule-tbar-border-nav-type: solid !default;
$schedule-tbar-hover-bg: $content-bg-color-alt3 !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: 38px !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: 24px !default;
$schedule-tbar-btn-bgr-minwidth: 24px !default;
$schedule-tbar-btn-bgr-padding: 0 1.5px !default;
$schedule-tbar-btn-icn-bgr-padding: 4px 6px !default;
$schedule-tbar-btn-icn-right-bgr-padding: 2px 0 0 12px !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;

// view definitions
$schedule-timeline-header-time-slots-bg: $schedule-tbar-default-bg !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-appointment-height: 38px !default;
$schedule-timeline-year-work-cells-height: 75px !default;
$schedule-timeline-year-work-cells-width: 100px !default;
$schedule-timeline-year-resource-text-padding: 4px 12px !default;
$schedule-timeline-year-resource-cells-padding-left: 12px !default;
$schedule-timeline-year-left-indent-padding: 0 !default;
$schedule-timeline-date-header-wrap-padding: 8px 0 8px 8px !default;
$schedule-dialog-row-container-padding-bottom: 12px !default;
$schedule-dialog-all-day-row-padding-top: 4px !default;
$schedule-dialog-all-day-row-padding-bottom: 12px !default;
$schedule-all-day-section-hover-color: $schedule-tbar-default-icon-color !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-vertical-time-slot-color: $content-bg-color-alt2 !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-month-work-cells-height: 80px !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-agenda-color: $content-bg-color !default;
$schedule-month-agenda-app-indicator-color: $primary !default;
$schedule-agenda-date-header-padding: 8px 20px 14px 14px !default;
$schedule-agenda-item-padding: 10px 0 !default;
$schedule-agenda-appointment-padding: 0 14px !default;
$schedule-agenda-big-appointment-padding: $schedule-agenda-appointment-padding !default;
$schedule-month-agenda-appointment-padding: 0 16px !default;
$schedule-month-agenda-item-padding: 10px 0 !default;

// resource definitions
$schedule-timeline-resources-width: 200px !default;
$schedule-resource-color-margin-top: 10px !default;
$schedule-bigger-resource-color-margin-top: 8px !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;

// dimension definitions
$schedule-header-cells-height: 60px !default;
$schedule-header-cells-width: 36px !default;
$schedule-month-header-cells-nrml-height: 34px !default;
$schedule-month-header-cells-bgr-height: 38px !default;
$schedule-month-header-cells-padding: 8px !default;
$schedule-header-date-line-height: 24px !default;
$schedule-header-padding-top: 0 !default;
$schedule-allday-cells-height: 0 !default;
$schedule-work-cells-height: 36px !default;
$schedule-work-cells-width: 36px !default;
$schedule-date-header-line-height: 22px !default;
$schedule-date-header-margin: 3px 3px 2px !default;
$schedule-date-header-margin-rtl: $schedule-date-header-margin !default;
$schedule-timezone-enable-nrml-height: 60px !default;
$schedule-timezone-enable-bgr-height: 66px !default;
$schedule-header-cells-padding: 4px !default;
$schedule-time-scale-width: 85px !default;
$schedule-device-time-scale-width: 35px !default;
$border-type: solid !default;
$schedule-alternate-cell-border: dotted !default;
$schedule-header-hover-border-radius: 4px !default;
$schedule-more-popup-wrapper-border-radius: 6px !default;
$schedule-box-shadow: 0 1px 0 rgba($black, .15) !default;
$schedule-btn-txt-bgr-padding: 5px 12px !default;

// color definitions
$schedule-header-bg-color: $content-bg-color !default;
$schedule-header-border-color: $border-light !default;
$schedule-header-hover-color: $content-bg-color-alt3 !default;
$schedule-content-bg-color: $content-bg-color !default;
$schedule-content-border-color: $border-light !default;
$schedule-month-agenda-border: 2px solid $schedule-content-border-color !default;
$schedule-select-bg-color: $content-bg-color-alt2 !default;
$schedule-work-cells-bg-color: $content-bg-color-alt1 !default;
$schedule-current-date-bg-color: $primary !default;
$schedule-disable-dates-color: $content-bg-color-alt2 !default;
$schedule-workhour-bg-color: $content-bg-color !default;
$schedule-hover-bg-color: darken($content-bg-color-alt1, 2%) !default;
$schedule-resource-focus-bg-color: $schedule-hover-bg-color !default;
$schedule-active-color: $content-bg-color !default;
$schedule-current-day-active-color: $schedule-active-color !default;
$schedule-active-border-color: $primary !default;
$schedule-calendar-background: $flyout-bg-color !default;
$schedule-icon-color: $icon-color !default;
$schedule-more-indicator-shadow-color: $shadow !default;
$schedule-more-indicator-shadow-color-res-tree-popup: $schedule-more-indicator-shadow-color !default;
$schedule-more-indicator-shadow-color-more-popup: none !default;
$schedule-tree-bg-color: $content-bg-color-alt1 !default;
$schedule-val-error-color: $danger-bg-color !default;
$schedule-val-error-bg-color: $danger-light !default;
$schedule-tree-content-color: $content-text-color-alt2;
$schedule-tree-font-color: $schedule-primary-content-font-color !default;
$schedule-popup-header-icon-focus-bg-color: $schedule-active-color !default;
$schedule-popup-header-icon-focus-color: $schedule-popup-header-icon-hover-color !default;

$schedule-tip-content-padding: 3px 6px !default;
$schedule-time-cells-bg-color: $schedule-vertical-time-slot-color !default;
$schedule-time-cells-border-bottom-color: none !default;
$schedule-current-day-font-weight: $font-weight-normal !default;
$schedule-selected-cell-hover-font-color: $schedule-active-color !default;
$schedule-work-cell-hover-color: $schedule-select-font-color !default;
$schedule-current-date-header-font-color: $schedule-active-color !default;
$schedule-selected-date-header-cell-font-color: none !default;
$schedule-agenda-subject-wrap-margin-bottom: 4px !default;
$schedule-bigger-tbar-btn-font-size: $text-2xl !default;
$schedule-more-event-close-icon-font-size: $text-sm !default;
$schedule-tbar-btn-icn-right-bgr-padding-top: 3px !default;
$schedule-following-events-dlg-padding: 12px !default;
$schedule-header-icon-wrapper-bg-color: $schedule-content-bg-color !default;
$schedule-bgr-date-time-icon-padding-right: 16px !default;
$schedule-bgr-more-event-close-icon-padding: unset !default;
$schedule-bgr-tbar-btn-text-font-size: $schedule-header-bgr-font-size !default;
$schedule-multiple-event-popup-icon-bg-color: $schedule-header-bg-color !default;

@mixin tbar-btn-animation {
  content: '';
}

@mixin tbar-btn-animation-after {
  content: '';
}

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

  /*! schedule component layout */

  .e-schedule {
    display: block;
    outline: medium none;
    overflow: hidden;
    position: relative;
    user-select: none;

    .e-schedule-toolbar {
      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 {

        &.e-tbar-pos {
          height: $schedule-tbar-min-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: 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 + .e-tbar-btn-text {
            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-tbar-btn-text {
            font-size: $schedule-header-nrml-font-size;
            text-transform: initial;
          }
        }
      }

      &.e-rtl .e-hor-nav {
        border-left: 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;
        }
      }
    }

    #{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(100% - 20px);
          }
        }

        .e-toolbar-items {
          &.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: 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;
      }
    }

    .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: 10px;

      .e-resource-menu {
        .e-icon-menu {
          color: $schedule-icon-color;
          font-size: 14px;
          padding: 7px;
          padding-left: 4px;
        }

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

      .e-resource-level-title {
        display: flex;

        .e-resource-name {
          font-size: 14px;
          padding: 5px;
          color: $schedule-tree-content-color;

          &:not(:last-child) {
            opacity: .6;
          }
        }

        .e-icon-next {
          color: $schedule-icon-color;
          font-size: 10px;
          line-height: 18px;
          opacity: .4;
          padding: 5px;
        }
      }

      &.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: 100%;
      position: absolute;
      width: 250px;
      color: $schedule-tree-font-color;

      .e-resource-tree {
        height: 100%;
        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: 100%;
        left: 0;
        opacity: .5;
        position: absolute;
        top: 0;
        width: 100%;
      }
    }

    .e-new-event {
      background: $schedule-appointment-bg-color;
      border: 1px solid $schedule-appointment-font-color;
      border-radius: 5px;
      height: 100%;
      opacity: .9;
      position: relative;
      width: 100%;
      z-index: 1;

      .e-title {
        color: $schedule-appointment-font-color;
        font-size: 12px;
        line-height: 1.2;
        margin: 0;
        overflow-wrap: break-word;
        padding: 3px;
        position: absolute;
        text-align: left;
        white-space: normal;
        word-wrap: break-word;
      }
    }

    .e-schedule-table {
      border: 0 none;
      border-collapse: separate;
      border-spacing: 0;
      margin: 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: 0;
      vertical-align: top;
    }

    .e-content-wrap {
      position: relative;

      .e-day-wrapper {
        width: 100%;
      }
    }

    .e-content-placeholder {
      height: 100%;
      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: 8px;
    }

    .e-m-date {
      cursor: pointer;
      font-size: 20px;

      &:hover {
        text-decoration: underline;
      }
    }

    .e-m-day {
      font-size: 12px;
    }

    #{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-subject {
        overflow: hidden;
        overflow-wrap: break-word;
        padding: 4px;
        white-space: normal;
        word-wrap: break-word;
      }
    }

    .e-block-indicator {
      color: $schedule-block-appointment-font-color;
      float: right;
      padding: 0 5px;
      z-index: 1;
    }

    #{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-subject.e-disable {
        display: none;
      }

      .e-inline-appointment {
        z-index: 1;
      }

      .e-inline-subject {
        background: transparent;
        border: 0;
        color: $schedule-appointment-font-color;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.2;
        padding-top: 4px;
        width: 100%;
      }

      &.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: 10px;
          left: 50%;
          position: absolute;
          transform: translateX(-50%);
          width: 100%;
        }

        .e-left-right-resize {
          border-radius: 50%;
          height: 100%;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 10px;
        }

        .e-top-handler .e-top-bottom-resize {
          margin-top: -8px;
        }

        .e-bottom-handler .e-top-bottom-resize {
          margin-top: 8px;
        }

        .e-left-handler .e-left-right-resize {
          margin-left: -8px;
        }

        .e-right-handler .e-left-right-resize {
          margin-left: 8px;
        }
      }
    }

    .e-timeline-year-view {
      .e-event-resize {

        &.e-left-handler,
        &.e-right-handler {
          height: 100%;
          width: 5px;
        }

        &.e-top-handler,
        &.e-bottom-handler {
          height: 5px;
          width: 100%;
        }
      }
    }

    .e-event-resize {
      position: absolute;

      &.e-left-handler,
      &.e-right-handler {
        height: 100%;
        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: 20%;
        width: 100%;
      }

      &.e-top-handler {
        cursor: ns-resize;
        top: 0;
      }

      &.e-bottom-handler {
        bottom: 0;
        cursor: ns-resize;
      }
    }

    .e-vertical-view {
      &.e-timescale-disable {
        .e-content-table,
        .e-content-wrap {
          height: 100%;
        }

        .e-all-day-row,
        .e-all-day-cells {
          height: 0 !important; /* stylelint-disable-line declaration-no-important */
        }

        .e-appointment {
          background: $schedule-appointment-bg-color;
          border: 1px solid $schedule-appointment-border-color;
          border-radius: $schedule-appointment-border-radius;
          color: $schedule-appointment-font-color;
          display: flex;
          height: $schedule-timescale-appointment-height;
          margin-bottom: 2px;
          overflow: hidden;
          position: absolute;

          .e-appointment-details {
            display: flex;
            flex: auto;
            padding: 2px 4px 0 2px;
            text-align: left;
          }

          .e-inner-wrap {
            flex: auto;
            overflow: hidden;
          }

          .e-subject {
            font-size: 13px;
            font-weight: 500;
            line-height: 1.2;
            margin-left: auto;
            min-height: 18px;
            overflow: hidden;
            overflow-wrap: break-word;
            padding-top: 1px;
            white-space: normal;
            word-wrap: break-word;
          }

          .e-time,
          .e-location {
            font-size: 11px;
            overflow: hidden;
            padding-top: 1px;
            text-overflow: ellipsis;
          }

          .e-disable {
            display: none;
          }

          .e-recurrence-icon,
          .e-recurrence-edit-icon {
            line-height: $schedule-timescale-appointment-height;
            padding: 0 5px;
          }

          .e-left-icon,
          .e-right-icon {
            line-height: $schedule-timescale-appointment-height;
            padding: 0 2px;
          }

          &.e-appointment-border,
          &:focus {
            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: auto;
          vertical-align: top;
        }

        .e-more-indicator {
          color: $schedule-secondary-content-font-color;
          cursor: pointer;
          font-size: $schedule-more-indicator-nrml-font-size;
          line-height: 11px;
          overflow: hidden;
          padding: 2px 4px;
          position: absolute;
          text-overflow: ellipsis;

          &: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: 40px;
        padding: 8px;
        padding-left: 15px;
      }

      .e-header-cells {
        font-size: 12px;
        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: 100%;
        pointer-events: none;
        position: relative;

        .e-more-indicator {
          bottom: 0;
          color: $schedule-secondary-content-font-color;
          cursor: pointer;
          overflow: hidden;
          overflow-wrap: normal;
          padding: 2px 4px;
          pointer-events: visible;
          position: absolute;
          text-overflow: ellipsis;
          width: 100%;

          &: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: 11px;
        height: 25px;
        left: 0;
        line-height: 25px;
        margin: 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: 100%;
          color: $schedule-all-day-section-hover-color;
        }
      }

      .e-appointment-hide {
        opacity: 0;
      }

      .e-all-day-cells {
        height: $schedule-allday-cells-height;
        padding: 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: 1px 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: 0;
        margin: 0;
        padding: 0;
        position: relative;
      }

      .e-all-day-appointment-wrapper .e-appointment:not(.e-schedule-event-clone) {
        cursor: default;
      }

      .e-all-day-appointment-wrapper .e-appointment {
        background: $schedule-appointment-bg-color;
        border: 1px solid $schedule-appointment-border-color;
        border-radius: $schedule-appointment-border-radius;
        color: $schedule-appointment-font-color;
        display: flex;
        height: $schedule-month-appointment-height;
        overflow: hidden;
        position: absolute;

        .e-appointment-details {
          display: flex;
          flex: auto;
          line-height: $schedule-month-appointment-text-line-height;
          overflow: hidden;
          padding: 1px 0 1px 4px;

          .e-subject {
            flex: auto;
            font-size: 13px;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .e-time {
            display: block;
            font-size: 11px;
            padding: 1px 4px 2px 0;
          }

          .e-recurrence-icon,
          .e-recurrence-edit-icon,
          .e-left-icon,
          .e-right-icon {
            line-height: $schedule-appointment-text-line-height;
            padding: 0 2px;
          }
        }

        .e-disable {
          display: none;
        }

        &.e-appointment-border,
        &:focus {
          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: 1px 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 {
          font-size: 13px;
          font-weight: 500;
          line-height: 1.2;
          margin-left: auto;
          min-height: 18px;
          overflow: hidden;
          overflow-wrap: break-word;
          padding-top: 4px;
          white-space: normal;
          word-wrap: break-word;
        }

        .e-time,
        .e-location {
          font-size: 11px;
          overflow: hidden;
          padding-top: 1px;
          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: auto;
          left: auto;
          position: absolute;
          right: 5px;
          width: auto;
        }

        .e-indicator {
          display: block;
          margin: 0 45%;
        }

        .e-up-icon,
        .e-down-icon {
          font-size: 8px;
        }

        .e-up-icon {
          margin-top: 3px;
          top: 0;
        }

        .e-down-icon {
          bottom: 6px;
          position: absolute;
        }

        &.e-appointment-border,
        &:focus {
          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: 9px;
        }

        .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: 500;
          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: 1px 4px 1px 0;
        }

        .e-day-wrapper .e-appointment {
          .e-appointment-details {
            line-height: 15px;
            text-align: right;
          }

          .e-subject {
            font-weight: 500;
            margin-left: 15px;
            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: 100%;
        }

        .e-week-number {
          color: $schedule-secondary-content-font-color;
          padding-top: 4px;
          text-align: center;
          vertical-align: top;
          width: 36px;
        }
      }
    }

    .e-month-view {
      .e-content-wrap table tr:last-child td {
        border-bottom-width: 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: 40px;
        padding: 8px;
        padding-left: 15px;
      }

      .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: 100%;
      }

      .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: 20px;
        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(100% - 25px);
      }

      .e-block-indicator {
        margin-top: -20px;
      }

      .e-inline-appointment {
        z-index: 1;
      }

      .e-appointment {
        background: $schedule-appointment-bg-color;
        border: 1px solid $schedule-appointment-border-color;
        border-radius: $schedule-appointment-border-radius;
        color: $schedule-appointment-font-color;
        cursor: default;
        display: flex;
        height: $schedule-month-appointment-height;
        overflow: hidden;
        position: absolute;

        .e-disable {
          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: 13px;
            font-weight: 500;
            overflow: hidden;
            padding: $schedule-month-appointment-subject-padding;
            text-overflow: ellipsis;
          }

          .e-inline-subject {
            padding: 4px;
            text-align: center;
          }

          .e-time {
            font-size: 11px;
            padding: $schedule-month-appointment-time-padding;
          }

          .e-recurrence-icon,
          .e-recurrence-edit-icon,
          .e-left-icon,
          .e-right-icon {
            line-height: $schedule-month-appointment-height;
            padding: 0 2px;
          }
        }

        &.e-appointment-border,
        &:focus {
          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: 2px;
          width: 100%;
        }
      }

      .e-more-indicator {
        color: $schedule-secondary-content-font-color;
        cursor: pointer;
        font-size: $schedule-more-indicator-nrml-font-size;
        line-height: 11px;
        overflow: hidden;
        padding: 2px 4px;
        position: absolute;
        text-overflow: ellipsis;

        &:focus {
          text-decoration: underline;
        }
      }
    }

    #{if(&, '&', '*')}.e-rtl {
      .e-month-view {
        .e-date-header {
          margin: $schedule-date-header-margin-rtl;
        }

        .e-left-indent {
          border-left: $border-size $border-type $schedule-content-border-color;
          border-right-width: 0;
        }

        .e-week-number {
          border-left: $border-size $border-type $schedule-content-border-color;
          border-right-width: 0;
        }
      }
    }

    .e-year-view {
      .e-calendar-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        .e-month-calendar.e-calendar {
          border: 0;
          flex: 0 25%;
          max-width: 100%;
          min-width: 260px;
          padding: 10px;

          .e-header .e-title {
            cursor: default;
          }

          .e-content span.e-day {
            display: block;
            margin: 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: 50%;
            height: 5px;
            margin: -6px auto 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: 0;
            }
          }
        }
      }

      .e-resource-cells {
        color: $schedule-primary-content-font-color;
        font-size: $schedule-date-header-wrap-nrml-font-size;
        height: 40px;
        padding: 8px;
        padding-left: 15px;
      }

      .e-content-wrap table td:first-child {
        border-left-width: 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: 100%;

          &.e-auto-height {
            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: 0 $border-size $border-size 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: 13px;
        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: 40px;
      }

      .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: 0 1px 1px 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: 0;
          vertical-align: middle;

          &.e-child-node {
            background: $schedule-workhour-bg-color;
          }

          &:focus {
            background: $schedule-resource-focus-bg-color;
          }
        }
      }

      .e-resource-column-table {
        height: 100%;

        &.e-auto-height {
          height: auto;
        }
      }

      .e-resource-tree-icon {
        color: $schedule-icon-color;
        cursor: pointer;
        float: left;
        font-family: 'e-icons';
        font-size: 12px;
        padding: 4px 7px;
      }

      .e-resource-collapse {
        transform: rotate(90deg);
      }

      .e-content-table {
        height: 100%;

        &.e-auto-height {
          height: auto;
        }
      }

      .e-left-indent td {
        border-color: $schedule-content-border-color;
        border-style: $border-type;
        border-width: 0 $border-size 0 0;
        vertical-align: middle;
      }

      .e-left-indent tr:last-child td {
        border-width: 0 $border-size $border-size 0;
      }

      &.e-horizontal .e-left-indent {
        padding: 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: 20px;
          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 {
          background: $schedule-appointment-bg-color;
          border: 1px solid $schedule-appointment-border-color;
          border-radius: $schedule-appointment-border-radius;
          color: $schedule-appointment-font-color;
          cursor: default;
          display: flex;
          height: $schedule-month-appointment-height;
          overflow: hidden;
          position: absolute;

          &.e-hidden {
            display: none;
          }

          .e-appointment-details {
            display: flex;
            flex: auto;
            line-height: 20px;
            overflow: hidden;
          }

          .e-subject {
            flex: auto;
            font-size: 13px;
            font-weight: 500;
            overflow: hidden;
            padding: 1px 2px;
            text-overflow: ellipsis;
          }

          .e-time,
          .e-location {
            font-size: 11px;
            overflow: hidden;
            padding: 1.5px;
            text-overflow: ellipsis;
          }

          .e-disable {
            display: none;
          }

          .e-recurrence-icon,
          .e-recurrence-edit-icon {
            line-height: $schedule-month-appointment-height;
            padding: 0 5px;
          }

          .e-left-icon,
          .e-right-icon {
            line-height: $schedule-month-appointment-height;
            padding: 0 2px;
          }

          &.e-appointment-border,
          &:focus {
            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 {
          color: $schedule-secondary-content-font-color;
          cursor: pointer;
          font-size: $schedule-more-indicator-nrml-font-size;
          line-height: 11px;
          overflow: hidden;
          padding: 2px 4px;
          position: absolute;
          text-overflow: ellipsis;

          &.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: 100%;
      }

      .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: 13px;
        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: 0 1px 1px 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: 0 1px 1px 0;
        color: $schedule-primary-content-font-color;
        height: $schedule-timeline-work-cells-height;
        padding-left: $schedule-timeline-year-resource-cells-padding-left;
        padding-right: 0;
        vertical-align: middle;

        &:focus {
          background: $schedule-resource-focus-bg-color;
        }
      }

      .e-resource-column-wrap {
        overflow: hidden;
        position: relative;
      }

      .e-resource-column-table {
        height: 100%;
      }

      .e-auto-height {
        height: auto;
      }

      &.e-ignore-whitespace .e-work-cells,
      &.e-ignore-whitespace .e-resource-cells,
      &.e-ignore-whitespace .e-event-container {
        height: 42px;
      }

      &.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: 12px;
        padding: 4px 7px;
      }

      .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 {
        background: $schedule-appointment-bg-color;
        border: 1px solid $schedule-appointment-border-color;
        border-radius: $schedule-appointment-border-radius;
        color: $schedule-appointment-font-color;
        cursor: default;
        display: flex;
        height: $schedule-timeline-appointment-height;
        overflow: hidden;
        position: absolute;

        .e-appointment-details {
          display: flex;
          flex: auto;
          overflow: hidden;
          padding: 0 4px;

          .e-inner-wrap {
            flex: auto;
            overflow: hidden;
          }
        }

        .e-subject {
          font-size: 13px;
          font-weight: 500;
          line-height: 1.2;
          margin-left: auto;
          min-height: 18px;
          overflow: hidden;
          padding-top: 4px;
          text-overflow: ellipsis;
        }

        .e-time,
        .e-location {
          font-size: 11px;
          overflow: hidden;
          padding-top: 1px;
          text-overflow: ellipsis;
        }

        .e-time {
          display: block;
          line-height: 1.4;
        }

        .e-disable {
          display: none;
        }

        .e-recurrence-icon,
        .e-recurrence-edit-icon {
          line-height: $schedule-timeline-appointment-height;
          padding: 0 5px;
        }

        .e-indicator {
          display: block;
        }

        .e-left-icon,
        .e-right-icon {
          font-size: 10px;
          line-height: $schedule-timeline-appointment-height;
          padding-right: 7px;
        }

        .e-right-icon {
          padding-right: 5px;
        }

        &.e-appointment-border,
        &:focus {
          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 {
        color: $schedule-secondary-content-font-color;
        cursor: pointer;
        font-size: $schedule-more-indicator-nrml-font-size;
        line-height: 11px;
        overflow: hidden;
        padding: 2px 4px;
        position: absolute;
        text-overflow: ellipsis;

        &: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-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-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: 0 0 0 5px;
          }
        }

        .e-inline-appointment {
          z-index: 1;
        }

        .e-resource-left-td {
          border-width: 0 0 1px 1px;
        }

        .e-resource-cells {
          border-width: 0 0 1px 1px;
          padding-right: 15px;
        }

        .e-resource-tree-icon {
          float: right;
        }

        .e-appointment.e-schedule-event-clone .e-appointment-details .e-inner-wrap {
          text-align: right;
        }
      }
    }

    #{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: 0;
          border-right-width: 0;
        }

        .e-content-wrap {
          font-size: $schedule-content-device-font-size;
        }

        .e-date-header {
          &:hover {
            text-decoration: none;
          }
        }

        .e-more-indicator {
          font-size: 12px;
        }

        .e-navigate {
          &:hover {
            text-decoration: none;
          }
        }
      }
    }

    .e-month-agenda-view {
      .e-schedule-resource-toolbar {
        .e-resource-menu {
          margin-top: 6px;

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

        .e-resource-level-title .e-icon-next {
          margin-top: 4px;
        }
      }

      .e-week-number-wrapper .e-week-number {
        border-right: $border-size $border-type $schedule-content-border-color;
        height: 40px;
        padding-top: 8px;
      }

      .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: 100%;
      }

      .e-resource-column {
        border-bottom: $border-size $border-type $schedule-content-border-color;
        border-right: $border-size $border-type $schedule-content-border-color;
        vertical-align: top;
        width: 75px;
      }

      .e-resource-name {
        color: $schedule-primary-content-font-color;
        font-size: $schedule-date-header-wrap-device-font-size;
        line-height: 26px;
        overflow: hidden;
        padding: 8px;
        text-overflow: ellipsis;
      }

      .e-day-padding {
        padding-left: 8px;
      }

      .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: 5px;
        text-align: center;
      }

      .e-work-cells {
        height: 40px;
        position: relative;
        vertical-align: top;

        &.e-disable-dates {
          background: $schedule-disable-dates-color;

          &:hover {
            background: $schedule-disable-dates-color;
          }
        }
      }

      .e-date-header {
        height: 24px;
        line-height: 24.5px;
        margin: 4px auto 0;
        text-align: center;
        width: 24px;
      }

      .e-appointment-container {
        min-height: 40px;
      }

      .e-appointment-wrap {
        background: $schedule-agenda-color;
        overflow: auto;
        padding: 0 8px;
      }

      .e-appointment {
        border-left: 3px solid $schedule-appointment-bg-color;
        border-right: 0;
        cursor: default;
        padding: $schedule-month-agenda-appointment-padding;

        &:hover {
          background: $schedule-hover-bg-color;
        }

        &.e-appointment-border,
        &:focus {
          background: $schedule-select-bg-color;
        }
        
        &.e-template {
          display: inline-flex;
          flex-direction: row-reverse;
        }
      }

      .e-subject-wrap {
        display: flex;
      }

      .e-subject {
        color: $schedule-primary-content-font-color;
        font-size: 14px;
        line-height: 26px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .e-recurrence-icon,
      .e-recurrence-edit-icon {
        color: $schedule-secondary-content-font-color;
        line-height: 26px;
        padding: 0 10px;
      }

      .e-date-time {
        color: $schedule-secondary-content-font-color;
        font-size: 12px;
        line-height: 26px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .e-location {
        color: $schedule-secondary-content-font-color;
        font-size: 12px;
        line-height: 26px;
        overflow: hidden;
        padding-left: 8px;
        text-overflow: ellipsis;
      }

      .e-no-event {
        color: $schedule-secondary-content-font-color;
        cursor: default;
        font-size: 14px;
        height: 100%;
        padding: 8px 4px;
      }

      .e-agenda-item.e-month-agenda-view {
        padding: $schedule-month-agenda-item-padding;
      }

      .e-agenda-parent.e-month-agenda-view {
        margin: 0;
        padding: 0;
      }

      .e-work-cells .e-appointment-indicator {
        background: $schedule-appointment-bg-color;
        border-radius: 50%;
        height: 6px;
        left: 0;
        margin: 1px auto;
        width: 6px;
      }
    }

    #{if(&, '&', '*')}.e-rtl {
      .e-month-agenda-view {
        .e-left-indent {
          border-left: $border-size $border-type $schedule-content-border-color;
          border-right-width: 0;
        }

        .e-week-number {
          border-left: $border-size $border-type $schedule-content-border-color;
          border-right-width: 0;
        }

        .e-appointment {
          border-left: 0;
          border-right: 3px 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: 0;
          vertical-align: top;
          width: 75px;

          .e-resource-name {
            white-space: normal;
          }
        }

        .e-day-padding {
          padding-right: 8px;
        }
      }
    }

    #{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-content-wrap table td:first-child,
      .e-date-column {
        vertical-align: top;
        width: 75px;
      }

      .e-resource-column {
        border-bottom: $border-size $border-type $schedule-content-border-color;
        border-right: $border-size $border-type $schedule-content-border-color;
        color: $schedule-header-font-color;
        vertical-align: top;
        width: 75px;
      }

      .e-month-header {
        background: $schedule-appointment-bg-color;
        height: 100px;
        padding-top: 12px;
        vertical-align: top;

        .e-date-header {
          color: $schedule-appointment-font-color;
          font-size: 18px;
        }
      }

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

        .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: 8px;
      }

      .e-date-header {
        font-size: 20px;
      }

      .e-day-header {
        font-size: 12px;
      }

      .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 {
        color: $schedule-primary-content-font-color;
        font-size: 14px;
        line-height: 23px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .e-resource-name {
        color: $schedule-primary-content-font-color;
        font-size: $schedule-header-day-nrml-font-size;
        line-height: 26px;
        overflow: hidden;
        padding: 8px;
        text-overflow: ellipsis;
      }

      .e-recurrence-icon,
      .e-recurrence-edit-icon {
        color: $schedule-primary-content-font-color;
        line-height: 21px;
        padding: 0 10px;
      }

      .e-date-time {
        color: $schedule-secondary-content-font-color;
        font-size: 12px;
        line-height: 21px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .e-location {
        color: $schedule-secondary-content-font-color;
        font-size: 12px;
        line-height: 23px;
        overflow: hidden;
        padding-left: 8px;
        text-overflow: ellipsis;
      }

      .e-agenda-item {
        padding: $schedule-agenda-item-padding;
      }

      .e-agenda-parent {
        margin: 0;
        padding: 0;
      }

      .e-appointment {
        border-left: 3px solid $schedule-appointment-bg-color;
        border-right: 0;
        cursor: default;
        padding: $schedule-agenda-appointment-padding;

        &:hover {
          background: $schedule-hover-bg-color;
        }

        &.e-appointment-border,
        &:focus {
          background: $schedule-select-bg-color;
        }

        &.e-template {
          display: inline-flex;
          flex-direction: row-reverse;
        }
      }

      .e-no-event {
        color: $schedule-secondary-content-font-color;
        cursor: default;
        font-size: 14px;
        line-height: 52px;
        padding: 0 11px;
      }

      .e-empty-event {
        color: $schedule-secondary-content-font-color;
        cursor: default;
        font-size: 14px;
        line-height: 52px;
        padding: 0 11px;
      }
    }

    #{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: 0;
          border-right: 3px 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: 0;
          vertical-align: top;
          width: 75px;

          .e-resource-name {
            white-space: normal;
          }
        }

        .e-day-padding {
          padding-right: 8px;
        }

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

  .e-schedule.e-read-only .e-toolbar-item.e-add.e-overflow-show {
    display: none;
  }

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

      .e-toolbar-items {
        min-height: $schedule-tbar-bgr-items-size;

        .e-toolbar-item {
          min-height: $schedule-tbar-bgr-items-size;

          &:not(.e-separator) {
            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: 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: 306px;
    }
  }

  .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: 12px;
  }

  .e-bigger .e-schedule-event-tooltip,
  .e-schedule-event-tooltip.e-bigger {
    .e-subject {
      font-size: 14px;
      font-weight: 500;
    }
  }

  .e-bigger .e-dialog.e-quick-dialog.e-following-events-dialog {
    width: 502px;
  }

  .e-dialog.e-quick-dialog.e-following-events-dialog {
    width: 420px;

    .e-footer-content {
      padding: $schedule-following-events-dlg-padding;
    }
    @media screen and (max-width: 767px) {
      width: 289px;

      .e-footer-content {
        padding: 5%;
        
        button {
          margin-bottom: 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;
    }

    .e-quick-dialog-cancel {
      box-shadow: none;
    }

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

  .e-bigger .e-dialog.e-quick-dialog {
    min-width: 370px;
  }

  /*! schedule event window */

  .e-schedule-dialog {
    .e-disable {
      display: none;
    }

    .e-icon-disable {
      opacity: .5;
    }

    .e-dlg-header-content {
      padding-bottom: 8px;
    }

    .e-dlg-content {
      padding-bottom: 12px;
      position: relative;
    }

    .e-event-delete {
      float: left;
    }

    .e-subject-container,
    .e-start-container,
    .e-description-label {
      padding-right: 8px;
    }

    .e-start-time-zone-container {
      padding-left: 4px;
      padding-right: 8px;
    }

    .e-location-container,
    .e-end-container {
      padding-left: 8px;
    }

    .e-end-time-zone-container {
      padding-left: 8px;
      padding-right: 4px;
    }

    .e-all-day-container {
      padding-right: 16px;
    }

    .e-time-zone-row {
      display: flex;
      height: 0;
      margin-bottom: 0;
      overflow: hidden;
      padding-bottom: 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: 12px;

        .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: 12px;
      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: 50px;
      resize: vertical;
    }

    .e-repeat-container,
    .e-input-group .e-input-group-icon.e-icon-disable {
      display: none;
    }

    .e-footer-content {
      margin-top: 4px;
    }

    &.e-rtl {
      text-align: right;

      .e-all-day-container {
        margin-left: 16px;
        margin-right: 0;
      }

      .e-subject-container,
      .e-start-container,
      .e-description-label {
        padding-left: 8px;
        padding-right: 0;
      }

      .e-start-time-zone-container {
        padding-left: 8px;
        padding-right: 4px;
      }

      .e-location-container,
      .e-end-container {
        padding-left: 0;
        padding-right: 8px;
      }

      .e-end-time-zone-container {
        padding-left: 4px;
        padding-right: 8px;
      }

      .e-event-delete {
        float: right;
      }
    }
  }

  .e-ddl.e-popup {
    .e-resource-template {
      display: flex;
      padding: 0 10px;
      text-indent: 10px;

      .e-resource-color {
        height: $schedule-resource-color-size;
        margin-top: $schedule-resource-color-margin-top;
        width: $schedule-resource-color-size;
      }
    }
  }

  .e-bigger {
    .e-ddl.e-popup .e-resource-template {
      padding: 0 15px;

      .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: 8px;
      }

      .e-dlg-content {
        padding-bottom: 12px;
        position: relative;
      }

      .e-event-cancel,
      .e-event-delete {
        border: $schedule-popup-btn-border;
        box-shadow: none;
      }

      .e-footer-content .e-btn.e-event-delete {
        float: left;
        margin-left: 0;
      }

      .e-subject-container,
      .e-start-container,
      .e-start-time-zone-container,
      .e-description-label {
        padding-right: 12px;
      }

      .e-location-container,
      .e-end-container,
      .e-end-time-zone-container {
        padding-left: 12px;
      }

      .e-all-day-container {
        padding-right: 16px;
      }

      .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: 12px;
        width: 100%;
      }

      .e-all-day-time-zone-row {
        display: flex;
        padding-bottom: 20px;
        padding-top: 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: 0;
      }

      .e-all-day-time-zone-row {
        padding-bottom: 16px;
        padding-top: $schedule-bigger-dialog-all-day-row-padding-top;
      }

      .e-description,
      .e-float-input .e-description {
        height: 50px;
        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: 20px;
          margin-right: 0;
        }

        .e-subject-container,
        .e-start-container,
        .e-start-time-zone-container,
        .e-description-label {
          padding-left: 12px;
          padding-right: 0;
        }

        .e-location-container,
        .e-end-container,
        .e-end-time-zone-container {
          padding-left: 0;
          padding-right: 12px;
        }

        .e-event-delete {
          float: right;
        }
      }
    }
  }

  .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;
      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: 0;
      width: 100%;
    }

    .e-subject-container,
    .e-start-container,
    .e-start-time-zone-container,
    .e-description-label {
      padding-right: 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: 20px;
    }

    .e-all-day-time-zone-row {
      padding-top: $schedule-device-dialog-all-day-row-padding-top;
    }

    .e-resources {
      padding-bottom: 0;
      padding-top: 20px;
    }

    .e-description,
    .e-float-input .e-description {
      height: 60px;
      resize: vertical;
    }

    .e-all-day-time-zone-row {
      margin-top: 0;
      padding-bottom: 0;
    }

    .e-repeat-parent-row {
      padding-top: 8px;
    }

    .e-all-day-container {
      margin-right: 20px;
    }

    .e-title-header {
      display: flex;
      width: 100%;
    }

    .e-save-icon,
    .e-back-icon,
    .e-forward-icon {
      cursor: pointer;
      line-height: normal;
    }

    .e-save-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: 35px;
      padding-left: 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: 20px;
        margin-right: 0;
      }

      .e-subject-container,
      .e-start-container,
      .e-start-time-zone-container,
      .e-description-label {
        padding-left: 0;
      }

      .e-location-container,
      .e-end-container,
      .e-end-time-zone-container,
      .e-all-day-container {
        padding-right: 0;
      }

      .e-repeat-container {
        padding-left: 35px;
        padding-right: 0;
      }
    }

    .e-recurrence-container {
      position: relative;

      &.e-hide {
        display: none;
      }

      .e-recurrence-edit-button {
        border: 0;
        box-shadow: none;
        margin: -3px 5px;
        position: absolute;

        .e-recurrence-edit.e-icons {
          font-size: 12px;
          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: 1px 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: 22px;
            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: 20px;
            font-weight: 500;
            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-header-icon-wrapper {
        display: flex;
        justify-content: flex-end;

        .e-edit,
        .e-delete,
        .e-close {
          background: transparent;
          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: 14px;
      }
    }

    .e-popup-table td:last-child {
      padding-top: 0;
    }

    .e-popup-footer {
      display: block;
      padding: $schedule-popup-footer-padding;
      text-align: right;

      .e-event-edit {
        margin-right: 8px;
      }

      .e-event-edit,
      .e-event-delete {
        right: auto;

        &:disabled {
          color: $schedule-disable-font-color;
        }
      }

      .e-event-details {
        border: $schedule-popup-btn-border;
        margin-right: 8px;
        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-popup-content {
        .e-date-time-wrapper,
        .e-location-details,
        .e-time-zone-details,
        .e-description-details,
        .e-resource-details {
          margin-right: 10px;
        }
      }

      .e-event-details,
      .e-event-edit {
        margin-left: 8px;
      }

      .e-popup-footer {
        padding: 8px 8px 8px 18px;
        text-align: left;
      }

      .e-date-time-icon {
        padding: 0 0 0 10px;
      }
    }

    &.e-device {
      bottom: 0;
      height: 100%;
      left: 0;
      margin: 0;
      max-width: 100%;
      overflow: hidden;
      padding: 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: 2.5em;
          width: 2.5em;
        }

        .e-edit,
        .e-delete {
          display: block;
        }

        .e-close {
          margin-left: 0;
          margin-right: auto;
          order: -1;
        }

        .e-subject-wrap {
          padding: $schedule-device-event-popup-subject-padding;
        }
      }

      .e-event-popup .e-popup-content {
        padding: 12px 24px;
      }

      .e-multiple-event-popup .e-popup-header {
        display: flex;
        padding: 15px;

        .e-close,
        .e-edit,
        .e-delete {
          background: $schedule-multiple-event-popup-icon-bg-color;
          border: 0;
          color: $schedule-multiple-event-popup-icon-color;
          height: 40px;
          width: 40px;
          &:focus,
          &:hover {
            background: none;
          }
        }

        .e-subject {
          font-size: 15px;
          font-weight: 500;
          height: 40px;
          line-height: 2.25;
          padding: 4px 5px;
          width: calc(100% - 95px);
        }

        .e-close-icon,
        .e-edit-icon,
        .e-delete-icon {
          font-size: 14px;
        }
      }

      &.e-rtl {
        .e-event-popup .e-popup-header {
          .e-close {
            margin-left: auto;
            margin-right: 0;
          }
        }
      }
    }
  }

  .e-bigger .e-quick-popup-wrapper {
    .e-cell-popup .e-popup-content .e-popup-table .e-subject {
      font-size: 24px;
    }

    .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: 16px;
    }

    &.e-rtl {
      .e-cell-popup .e-date-time-icon {
        padding-right: 0;
      }

      .e-event-popup .e-date-time-icon {
        padding-right: $schedule-bgr-rtl-event-popup-date-time-icon-padding-right;
      }
    }

    .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: 14px;
        }
      }

      .e-multiple-event-popup .e-popup-header {
        .e-subject {
          padding: $schedule-multiple-event-popup-subject-padding;
        }
      }
    }
  }

  .e-bigger .e-agenda-view {
    .e-appointment {
      padding: $schedule-agenda-big-appointment-padding;
    }
    .e-subject {
      font-size: 16px;
    }

    .e-date-time {
      font-size: 14px;
    }

    .e-day-date-header {
      .e-m-date {
        font-size: 20px;
      }

      .e-m-day {
        font-size: 14px;
      }
    }
  }

  .e-bigger .e-timeline-view {
    .e-resource-text {
      font-size: 14px;
      padding-left: 12px;
    }

    .e-navigate {
      font-size: $schedule-date-header-wrap-bgr-font-size;
      padding: 8px 0 8px 8px;
    }

    .e-date-header-wrap table tbody td > span {
      font-size: $schedule-date-header-wrap-bgr-font-size;
      padding: 8px 0 8px 8px;
    }
  }

  .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;
    display: flex;
    height: 38px;
    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: 0 4px;
      text-align: left;

      .e-inner-wrap {
        flex: auto;
        overflow: hidden;
      }

      .e-subject {
        font-size: 13px;
        font-weight: 500;
        line-height: 1.2;
        margin-left: auto;
        min-height: 18px;
        overflow: hidden;
        padding-top: 4px;
        text-overflow: ellipsis;
      }

      .e-time {
        font-size: 11px;
        overflow: hidden;
        padding-top: 1px;
        text-overflow: ellipsis;
      }

      .e-location {
        display: none;
      }
    }

    &.e-month-event {
      .e-appointment-details {
        .e-subject {
          padding: 3px 2px;
        }

        .e-time {
          display: none;
        }
      }
    }
  }

  .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.e-schedule-event-clone {
    .e-appointment-details {
      .e-subject {
        padding: 3px 0 1px 4px;
      }

      .e-time {
        display: none;
      }
    }
  }

  .e-bigger .e-schedule .e-month-view .e-current-date .e-date-header {
    width: 26px;
  }
}

.e-bigger .e-more-popup-wrapper,
.e-more-popup-wrapper {
  background: $schedule-popup-bg-color;
  border: 1px 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: 0 4px;
  }

  .e-more-event-popup {
    height: 100%;
    position: relative;
    width: 100%;
  }

  .e-more-event-header {
    height: 35px;
    margin: 0 8px 4px 14px;
  }

  .e-more-event-content {
    color: $schedule-primary-content-font-color;
    height: calc(100% - 35px);
    max-height: 150px;
    overflow-y: auto;
    padding: 10px 10px 0;

    .e-appointment-border {
      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: 100%;
    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: 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: 1;
    max-width: 15%;

    &:hover {
      cursor: pointer;
      text-decoration: underline;
    }

    &:focus {
      text-decoration: underline;
    }
  }

  .e-more-event-close {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: $schedule-popup-icon-color;
    cursor: pointer;
    height: 25px;
    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: 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: 2px 0;
    width: 100%;

    .e-subject {
      color: $schedule-appointment-font-color;
      flex: auto;
      font-size: 13px;
      font-weight: 500;
      overflow: hidden;
      padding: 0 2px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

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

    .e-inline-subject {
      background: transparent;
      border: 0;
      color: $schedule-appointment-font-color;
      font-size: 13px;
      font-weight: 500;
      line-height: 1.2;
      padding-top: 4px;
      width: 100%;
    }

    .e-recurrence-icon,
    .e-recurrence-edit-icon {
      line-height: $schedule-month-appointment-height;
      padding: 0 2px;
    }

    &.e-appointment-border,
    &:focus {
      border: 0;
      box-shadow: $schedule-event-box-shadow-1, $schedule-event-box-shadow-2, $schedule-event-box-shadow-3;
    }
  }

  &.e-device {
    bottom: 0;
    height: 100%;
    left: 0;
    margin: 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: 10px;
    }

    .e-header-day {
      padding-right: 10px;
    }

    .e-more-event-close {
      left: 6px;
      right: auto;
    }
  }
}


@include export-module('schedule-theme') {

  /*! schedule component 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: 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: 0;
      }

      .e-date-header-wrap {
        .e-all-day-cells {
          background: $schedule-header-bg-color;

          &:hover {
            background: $schedule-hover-bg-color;
          }
        }
      }

      .e-left-indent-wrap table tbody td {
        background: $schedule-header-bg-color;
        border-color: $schedule-header-border-color;
        border-style: $border-type;
        border-width: 0 1px 1px 0;
        color: $schedule-header-font-color;

        &.e-header-cells {
          border-bottom-width: 0;

          &.e-week-number {
            color: $schedule-secondary-content-font-color;
            font-size: $schedule-date-header-wrap-nrml-font-size;
            padding-top: 10px;
            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: 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: 0 1px 1px 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: 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;

          &:hover {
            background: $schedule-select-bg-color;
            color: $schedule-selected-cell-hover-font-color;
          }
        }
      }

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

      .e-clone-time-indicator,
      .e-current-time {
        color: $schedule-active-font-color;
      }

      .e-current-timeline {
        border-top: 1px $border-type $schedule-active-border-color;
      }

      .e-previous-timeline {
        border-top: 1px $schedule-alternate-cell-border $schedule-active-border-color;
      }

      &.e-by-date {
        .e-date-header-wrap table tbody td {
          &.e-header-cells {
            border-bottom-width: 1px;
          }
        }
      }
    }

    .e-month-view {
      .e-date-header-wrap table td:first-child,
      .e-content-wrap table td:first-child {
        border-left-width: 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: 0;

        &:hover {
          background: $schedule-hover-bg-color;
          color: $schedule-work-cell-hover-color;
        }
      }

      .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: 50%;
        color: $schedule-current-date-header-font-color;
        min-width: 20px;
        padding: 0 4px;
        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;
        }
      }
    }

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

      .e-content-wrap table tr:last-child td {
        border-bottom-width: 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: 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;
        }
      }

      .e-alternate-cells {
        border-left-style: $schedule-alternate-cell-border;
      }

      .e-header-row .e-time-cells {
        border-left-width: 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: 1px $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: 0 $border-size $border-size 0;
        color: $schedule-primary-content-font-color;
        padding: 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: 50%;
          color: $schedule-current-day-active-color;
          margin: 2px;
          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;
          }
        }
    
        &.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: 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: 0;
        }

        .e-left-indent-wrap table tbody td,
        .e-time-cells-wrap table tbody td {
          border-width: 0 0 1px 1px;
        }
      }

      .e-month-view {
        .e-date-header-wrap table td:first-child,
        .e-content-wrap table td:first-child {
          border-right-width: 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: 0;
        }

        .e-date-header-wrap table td:last-child,
        .e-content-wrap table td:last-child {
          border-left-width: 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: 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: 8px 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: 8px 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-bootstrap5-icons') {
  .e-schedule {
    .e-schedule-toolbar {
      & .e-icon-prev::before {
        content: '\e765';
      }

      & .e-icon-next::before {
        content: '\e748';
      }

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

      & .e-icon-today::before {
        content: '\e778';
      }

      & .e-icon-down-arrow::before {
        content: '\e729';
      }

      & .e-icon-day::before {
        content: '\e75e';
      }

      & .e-icon-week::before {
        content: '\e817';
      }

      & .e-icon-workweek::before {
        content: '\e817';
      }

      & .e-icon-month::before {
        content: '\e7c5';
      }

      & .e-icon-month-agenda::before {
        content: '\e75b';
      }

      & .e-icon-agenda::before {
        content: '\e74c';
      }

      & .e-icon-year::before {
        content: '\e7c5';
      }

      & .e-icon-timeline-year-vertical::before {
        content: '\e876';
      }

      & .e-icon-timeline-year-horizontal::before {
        content: '\e876';
      }

      & .e-icon-timeline-day::before {
        content: '\e7da';
      }

      & .e-icon-timeline-week::before {
        content: '\e81f';
      }

      & .e-icon-timeline-workweek::before {
        content: '\e720';
      }

      & .e-icon-timeline-month::before {
        content: '\e876';
      }

      &.e-toolbar {
        .e-popup-down-icon::before {
          content: '\e770';
        }

        .e-popup-up-icon::before {
          content: '\e770';
        }
      }

      &.e-rtl {
        & .e-icon-prev::before {
          content: '\e748';
        }

        & .e-icon-next::before {
          content: '\e765';
        }
      }
    }

    .e-schedule-resource-toolbar {
      & .e-icon-menu::before {
        content: '\e799';
      }

      & .e-icon-next::before {
        content: '\e748';
      }
    }

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

    .e-block-indicator::before {
      content: '\e839';
    }

    .e-appointment {
      .e-recurrence-icon::before {
        content: '\e772';
      }

      .e-recurrence-edit-icon::before {
        content: '\e789';
      }

      .e-up-icon::before {
        content: '\e822';
      }

      .e-down-icon::before {
        content: '\e7fe';
      }

      .e-left-icon::before {
        content: '\e744';
      }

      .e-right-icon::before {
        content: '\e7a9';
      }
    }

    .e-vertical-view .e-all-day-cells {
      .e-all-day-appointment-section::before {
        content: '\e729';
      }
    }

    &.e-rtl {
      .e-appointment {
        & .e-left-icon::before {
          content: '\e7a9';
        }

        & .e-right-icon::before {
          content: '\e744';
        }
      }
    }

    .e-resource-tree-icon::before {
      content: '\e748';
    }
  }

  .e-schedule-dialog.e-device {
    .e-back-icon::before {
      content: '\e773';
    }

    .e-save-icon::before {
      content: '\e7c8';
    }

    .e-recurrence-container {
      .e-recurrence-edit-button {
        .e-recurrence-edit.e-icons::before {
          content: '\e730';
        }
      }
    }
  }

  .e-schedule-dialog.e-device.e-rtl {
    .e-back-icon::before {
      content: '\e7f9';
    }
  }

  .e-quick-popup-wrapper {
    .e-edit-icon::before {
      content: '\e730';
    }

    .e-delete-icon::before {
      content: '\e820';
    }

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

    .e-time-icon::before {
      content: '\e705';
    }

    .e-location-icon::before {
      content: '\e756';
    }

    .e-time-zone-icon::before {
      content: '\e804';
    }

    .e-description-icon::before {
      content: '\e7c0';
    }

    .e-resource-icon::before {
      content: '\e7b9';
    }

    .e-date-time-icon::before {
      content: '\e7da';
    }
  }

  .e-more-popup-wrapper.e-device {
    .e-close-icon::before {
      content: '\e7e7';
    }
  }
}