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



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

    .e-error {
        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 {
        color: $warning-font-color;
    }

    .e-success {
        color: $success-font-color;
    }

    .e-information {
        color: $information-font-color;
    }

    .e-block-touch {
        touch-action: pinch-zoom;
    }
}


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

    #{&} .e-ripple-element,
    #{&} .e-ripple-style::after {
        background-color: $ripple-background;
        border-radius: 100%;
        overflow: hidden;
        pointer-events: none;
        position: absolute;
        transform: scale(0);
        transition: opacity, transform 0ms cubic-bezier(0, .1, .2, 1);
    }

    #{&} .e-ripple-style {
        $ripple-style-background: rgba(0, 0, 0, .3);

        &::after {
            background: $ripple-style-background;
            content: '';
            display: block;
            height: 50%;
            left: 25%;
            opacity: 0;
            top: 25%;
            transform: scale(3);
            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,AAEAAAAKAIAAAwAgT1MvMj1tS4cAAAEoAAAAVmNtYXCICY3YAAAH3AAAA2BnbHlmjl2SrgAAEZwAApasaGVhZCCirFgAAADQAAAANmhoZWEIVQWYAAAArAAAACRobXR4XAAAAAAAAYAAAAZcbG9jYQIhMGgAAAs8AAAGYG1heHACzgMQAAABCAAAACBuYW1lc0cOBgACqEgAAAIlcG9zdOoh3LkAAqpwAAAYWAABAAAEAAAAAFwEAAAAAAAD+AABAAAAAAAAAAAAAAAAAAABlwABAAAAAQAAL0f2Fl8PPPUACwQAAAAAAN7GM7EAAAAA3sYzsQAAAAAD+AP4AAAACAACAAEAAAAAAAEAAAGXAwQALQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDolQQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAA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AAE12AABOAgAATlIAAE6LAABO1wAATysAAFAvAABQ2gAAUT8AAFGTAABSJwAAUi4AAFJwAABTOwAAU64AAFQJAABUFQAAVFUAAFUHAABVWgAAVawAAFYmAABWuwAAV0UAAFgDAABYTwAAWPwAAFlwAABZ3wAAWmkAAFp/AABazQAAW3kAAFyUAABddwAAXloAAF7fAABfBwAAX0cAAGAYAABgngAAYQoAAGEoAABhzwAAYfgAAGJ9AABipwAAYwQAAGMwAABjkAAAY9AAAGRbAABkjwAAZXIAAGW8AABl+AAAZrcAAGb8AABnVwAAZ8MAAGgjAABo9QAAaUgAAGmjAABqOAAAasoAAGsxAABrhQAAa7QAAGyEAABsrQAAbSUAAG28AABtxgAAbfEAAG5DAABurwAAb3EAAG/JAABv9QAAcC8AAHFBAABxcAAAcfQAAHH+AABy4gAAc20AAHPLAAB0VAAAdQ8AAHX5AAB2SQAAdsoAAHc5AAB3swAAeE0AAHiiAAB5NwAAecYAAHoEAAB6cAAAeqYAAHrAAAB7SgAAe+gAAHw3AAB8dAAAfMcAAH2ZAAB+KwAAfvAAAH9CAAB/uQAAgAcAAICxAACBFQAAgbkAAIIkAACCvwAAg0QAAIOPAACD7AAAhNUAAIT6AACFKAAAhcwAAIYFAACGYgAAhpgAAIdyAACIAwAAiFsAAIhtAACIigAAiSoAAIl9AACKAAAAimUAAIrzAACLpwAAi/sAAIygAACM8QAAjakAAI30AACOMQAAjkEAAI5hAACOeAAAjpEAAI67AACO3AAAjv0AAI8eAACPOAAAj1MAAI9oAACPowAAj7QAAI/RAACP/gAAkCcAAJBVAACQeAAAkJgAAJDCAACQ6QAAkQwAAJE1AACRawAAkZoAAJHDAACR4wAAkgAAAJIpAACSSQAAkmkAAJKUAACStQAAkssAAJLjAACTpAAAlBcAAJQvAACUPAAAlFcAAJRsAACUiAAAlJ0AAJSwAACUwwAAlNMAAJTnAACVUAAAlWgAAJZbAACW5AAAl5kAAJfsAACYEAAAmFIAAJjJAACY7QAAmREAAJk5AACa3gAAmxMAAJwEAACcvgAAnX4AAJ49AACfAAAAn5IAAJ+6AACgBQAAoFAAAKC/AACg+AAAoW4AAKHkAACihwAAoyIAAKO+AACkWgAApMo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AQEDBQgJCwYGBgcGBgYGCwkIBgIBAQEBAQECBggJCwYGBgYHBgYGCwkIBQMBAbwBAQECBggJCwYGBgYHBgYGCwkIBQMBAQEBAwUICQsGBgYHBgYGBgsJCAYCAQG9AQEDBQgJCwYGBgcGBgYGCwkIBgIBAQEBAQECBggJCwYGBgYHBgYGCwkIBQMBAbwBAQECBggJCwYGBgYHBgYGCwkIBQMBAQEBAwUICQsGBgYHBgYGBgsJCAYCAQG9AQEDBQgJCwYGBgcGBgYGCwkIBgIBAQEBAQECBggJCwYGBgYHBgYGCwkIBQMBAYYGBwYFCwkIBgICAQECAgYICQsFBgcGBwYGBgoKBwYCAgEBAgIGBwoKBgYGBwYHBgULCQgGAgIBAQICBggJCwUHBgYHBgYGCgoHBgICAQECAgYHCgoGBga2BgcGBQsJCAYCAgEBAgIGCAkLBQYHBgcGBgYKCgcGAgIBAQICBgcKCgYGBgcGBwYFCwkIBgICAQECAgYICQsFBgcGBwYGBgoKBwYCAgEBAgIGBwoKBgYGtgYHBgULCQgGAgIBAQICBggJCwUGBwYHBgYGCgoHBgICAQECAgYHCgoGBgYHBgcGBQsJCAYCAgEBAgIGCAkLBQYHBgcGBgYKCgcGAgIBAQICBgcKCgYGBrYGBwYGCgoHBgICAQECAgYHCgoGBgcGBgcGBgoKBwYCAgEBAgIGBwoKBgYHBgYHBgYKCgcGAgIBAQICBgcKCgYGBwYGBwYGCgoHBgICAQECAgYHCgoGBge3BwYGBgoKBwYCAgEBAgIGBwoKBgYGBwYHBgULCQgGAgIBAQICBggJCwUGBwYHBgYGCgoHBgICAQECAgYHCgoGBgYHBgcGBQsJCAYCAgEBAgIGCAkLBQYHAAEAAAAAA/cDkgBUAAABMQkBLwcPDh0BHwYBHwYzPwcBPwY1Lw4rAQ8FA1n+UP79BwcICAkICQkJCQkICAgIBwYGBAQDAgICAgMEBAYGAUcKCAgICQkJCAkJCQgICAcHAe4GBQUEAgICAQECAwQFBQcHBwgICQkICQkJCQgICAgDd/3ZAQMHBQUEAwIBAQEBAgMEBQUHBwcICAkICQkJCQkICAgIB/65CAYEBAICAQEBAwMEBQYGAmoHBwgJCAkJCAkJCQgICAcHBwUFAwMCAgICAwQEBgAAAAIAAAAAA/cD9wBV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Pw41ETUvDiMPDiUVHwY7AT8FPQEhMz8GLwchDwYDegYGBgYLCQgGAgEBAQEBAQIGCAkLBgYGBv0MBgcGBQsJCAYCAgEBAgIGCAkLBQYHBgL0/I4BAgMEBQcHCAkKCgsMDAwNAvQNDAwMCwoKCQgHBwUEAwIBAQIDBAUHBwgJCgoLDAwMDf0MDQwMDAsKCgkIBwcFBAMCvB8HBgUFAwMCAQECAwMFBQYHHwECAwMFBQYHBgYFBQQDAiAGBgUFBAMCAgMEBQUGBiACAwQFBQYGBwYFBQMDAn0HBgYGCgoHBgICAQECAgYHCgoGBgYHvQYHBgULCQgGAgIBAQICBggJCwUGBwZ+AQIDBAUHBwgJCgoLDAwMDb0NDAwMCwoKCQgHBwUEAwIBAQIDBAUHBwgJCgoLDAwMDb0NDAwMCwoKCQgHBwUEAwIDcQYGBgYLCQgGAgEBAQEBAQIGCAkLBgYGBn4HBgYGCgoHBgICAQECAgYHCgoGBgYHfgIDBQUGCAgJCQsLCwwNDX4MDQwMCwoKCQgHBgYEAwICAwQGBgcICQoKDAsMDQx+DQ0MCwsLCQkICAYFBQMC/kcBAgMDBQUGBwYGBQUEAwIBHAYGBQUEAwEBAQEDBAUFBgb+xQcGBQUDAwIBBAECAgYHCgoGBgYHRQYGBgsJCAYCAgEBAgIGCAkLBgYGBkYGBgYKCgcGAgIBPz8NDAwMCwoKCQgHBwUEAwIBAQIDBAUHBwgJCgoLDAwMDT8NDAwMCwoKCQgHBwUEAwIBAQIDBAUGCAgJCQsLCw0MAcsfAQEDBAUFBgcGBgUFBAMBAR8HBgUFBAMBAQEBAwQFBQYHHwEBAwQFBQYGBwYFBQQDAQEgBgYFBQQDAQEBAQMEBQUGWAECAgYICQsFBgcGvQcGBgYKCgcGAgIBAQICBgcKCgYGBge9BgcGBQsJCAYCAgE/vQ0MDAwLCgoJCAcHBQQDAgEBAgMEBQcHCAkKCgsMDAwNvQ0MDAwLCgoJCAcHBQQDAgEBAgMEBQcHCAkKCgsMDAzvAQICBggJCwYGBgb+hgcGBgYKCgcGAgIBAQICBgcKCgYGBgcBegYGBgYLCQgGAgIBP/6GDQwMDAsKCgkIBwcFBAMCAQECAwQFBwcICQoKCwwMDA0Beg0MDAwLCgoJCAcGBgQDAgEBAgMEBQcHCAkKCgsMDAxRPwYGBQUE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BggJCwYGBga9AQIDAwUFBgcGBgUFBAMCAgMEBQUGBgcGBQUDAwJeAjdeBgcGBQsKBwYCAgEBAgIGBwoLBQYHRQECAwQFBwcICQoKCwwMDA3+hg0MDAwLCgoJCAcGBgQDAgFFBgYGCwkIBgIBAQEBAQECBggJCwYGBgYCNwYHBgULCgcGAgIB/ggBAgIGCAkLBgYGBn4/DQwMDAsKCgkIBwYGBAMCAQECAwQGBgcICQoKCwwMDA0/AQIDBAUHBwgJCgoLDAwMDQF6DQwMDAsKCgkIBwcFBAMCAT8NDAwMCwoKCQgHBgYEAwIBAQIDBAYGBwgJCgoLDAwMDT8BAgMEBQcHCAkKCgsMDAwN/oYNDAwMCwoKCQgHBwUEAwIBwQECAgYICQsFBgcGvQYHBgULCQgGAgIBAQICBggJCwUGBwa9BgcGBgoKBwYCAgFeBgYFBQQDAQEBAQMEBQUGBgcGBQUEAgIBAQICBAUFBlgBAgIGCAkLBQYHBr0GBwYFCwkIBgICAT8NDAwMCwoKCQgHBwUEAwIBAQIDBAUHBwgJCgoLDAwMDT8BAgIGCAkLBQYHBr0GBwYGCgoHBgICAfwBAQECBggJCwYGBgZ+fgYHBgULCQgGAgIBP34BAgMEBQcHCAkKCgsMDAwNvQ0MDAwLCgoJCAcHBQQDAgE/DQwMDAsKCgkIBwcFBAMCAQECAwQFBwcICQoKCwwMDA0/AQIDBAUHBwgJCgoLDAwMDb0NDAwMCwoKCQgHBwUEAwIBfg0MDAwLCgoJCAcHBQQDAgEBAgMEBQcHCAkKCgsMDAwAAAAAAwAAAAAD9wP3ACMAXADGAAABHQEfBjM/BzUvByMPBgEhOwEfCRURFQ8JIyEjLwk1ESE1IT8KMzcVIw8PER8PIT8PES8PIzUvBw8GHQEhPQEvBg8GAr0CAwQFBQYGPwcGBQUDAwIBAQIDAwUFBgc/BgYFBQQDAv4oAjZfBgcGBQsJCAYCAgEBAgIGCAkLBQYHBv0MBgcGBQsJCAYCAgEDcvyOAQEBAgYICQsGBgYGPz8NDAwMCwoKCQgHBwUEAwIBAQIDBAUHBwgJCgoLDAwMDQL0DQwMDAsKCgkIBwcFBAMCAQECAwQFBwcICQoKCwwMDA0/AQIDAwUFBgcGBgUFBAMC/ggCAwQFBQYGBwYFBQMDAgEkPwcGBQUEAgIBAQICBAUFBgc/BgYFBQQDAQEBAQMEBQUGAlABAgIGCAkLBQYHBv1LBgcGBQsJCAYCAgEBAgIGCAkLBQYHBgI3P0UHBgULCQgGAgIBXh8BAgMEBQcHCAkKCgsMDAwN/UsNDAwMCwoKCQgHBwUEAwIBAQIDBAUHBwgJCgoLDAwMDQK1DQwMDAsKCgkIBwcFBAMCAR8HBQYEBAMCAQECAwMFBQYHHx8HBQYEBAMCAQECAwMFBQYAAAAACgAAAAAD9wO4AB8ATwCeANcA+wE/AU4BUgFhAawAAAEVDwkjLwY/CwUVDw0vCD0BPwgzHwolFz8DMx8JIw8OFR8KPwczFzMvDyMPBRcVBzM3Mx8GOwE/DT0BLw0jDwcjNSM3HwcRDwchLwcRPwcHER8PIT8PES8OIyEjDw0BMx8KIzUjFSM1IxUjNT8JMwcRHw8zNSMvCjUzNSM1MzUjNSE1Lw8hDw4CSwECAgQFBQcICAoHBgYGBAMCAQEBAgMEBAUFDA0PDgEDAQMCAwMEBAUFBgYGBwcKCQgIBwYEAwICBAQGCAcJBAoMBgcGBQUFBAMDBQP+mQgMDQ4OCAYGBQUDBAQDAgEPDQ0MCwoJCAcHBQUDAwEBAgQGCAUFBQYHBwgKCgkICAYGBQEDIgIBAQEEAwMEBQUGCAgJCgsKCQkJCAgHxQEgAQIGBggICQoKCwgJCAgICAcHBgUFBQMCAgECAwMEBQUGBwcICAgJCgsLCwkIBwcFASXvBgYGBAQDAgEBAgMEBAYGBv4IBgYFBQQDAQEBAQMEBQUGBl4BAQIDBAUGBgYICAgICgkKAfcKCQkJCAgHBwYGBAQEAgEBAQECBAQEBgYHBwgICQkJCv4ICQoJCAkHCAYGBgUEAwIBAbgGBgYGCwkIBgIBAQG9P/w/vQECAgYICQsFBgcGfgECAwQFBwcICQoKCwwMDA1+fgYHBgULCQgGAgIBvb29vQMzAQIDBAUHBwgJCgoLDAwMDf2KDQwMDAsKCgkIBwcFBAMCATcjBgYGBgYFBQMCAQIDBAUGBwQLBgYEBQMEAgUCAgEBCQgPBwcGBQUEBAMDAQEBAQIEBQcHCAoGBykLCgkIBgYDAgEBAgMDBAQFBgUNDkgZBwQDAQEBAwIDAwgHDAsBAgICBAQEBQYGBwgHCQkFCwsJCAQDAwIBAQEBAgMEBAUGBhoLGWEPDwcGBwUFBQQDAgEBAQICAwMDjg4nIgkIBwUEAwIBAgMEBQUHBwgJCgsLDQ0LCwoKCQkIBwcFBQQEAgIBAgMEBgYHCYBFAQEDBAUFBgb+hgcGBQUDAwIBAQIDAwUFBgcBegYGBQUEAwEBH/6GCgkJCQgIBwcGBgQEBAIBAQEBAgQEBAYGBwcICAkJCQoBegkKCQgJBwgGBgYFBAMCAgICAwQFBgYGCAcJCAkKAVEBAgIGCAkLBQYHRX5+fn5FBwYFCwkIBgICAT/9yQ0MDAwLCgoJCAcGBgQDAgE/AQEBAgYICQsGBgZFP34/fn4NDAwMCwoKCQgHBwUEAwIBAQIDBAUHBwgJCgoLDAwMAAAAAwAAAAAD7wOZADMAWQDJAAABMx8FFQMPDiMhIy8OAzU/BTM3Mx8OMyEfBxUhNT8GMwcVDwkdARMfDjMhMz8OEz0BLwk1Lw8hIy8OKwIPDQORBwYGBQMDASgCAgMEBAUFBgcHBwgICAkJ/awJCQgICAcHBwYFBQQEAwICKAEDAwUGBgf1CQkJCAgIBwc/CwwNDg0PDg8BCwcGBQUEAgIB/QwBAgMDBQUGB18LBwcGBgUFAwMBKQIEBQYHCAoKCwsMDQ4ODg8CVA8ODg4MDQsLCgkJBwYFBAIpAQMDBQUGBgcHCwEBAgQEBAYGBwcICAkJCQr+9QkJCAgICAcHQAsMDQ0ODg8PvgoJCQkICAcHBgYEBAQCAQJeAgQEBgYGB/69CAkIBwgGBwYFBQQDAwIBAQIDAwQFBQYHBggHCAkIAUMHBgYGBAQC/AECAwQEBQY6CggIBgQEAgECAwQEBgYGH50GBgYEBAMCH6YGBQYGCAkJCQoKCgr+vg8ODQ0MDAoKCQcHBgQEAgIEBAYHBwkKCgwMDQ0ODwFCCgoKCgkJCQgGBgUGKAoJCQkICAcHBgUFBAMDAQEBAgMEBAUGOgoIBwYFBAICAgMEBQUGBwcICAkJCQAABgAAAAADmQOZAAMABwALAA8AEwAXAAAlMzUjBTM1IwUzNSMlMzUjBTM1IyUzNSMC3L29/sa8vP7Fvb0Cdb29/sa8vAE6vb1nvb29vb1+vLy8fr0ABQAAAAAD9wP3ACEAWABbAH0A0wAAJR8HIT8HLwYjISMPBQMRMxE1PwkzIRUfDjsBFTM1ASEPDic3JyUfBjMhMz8GLwchDwYnFR8OMyEzPw41LwcPBh0BDwYjISMvBjUvBw8GAcEBAQMEBQUGBgE7BwYFBQMDAgEBAgMDBQUGB/7FBgYFBQQDAb4/AQICBggJCwUGBwYBWgEBAwMEBAYGBwcICAkJCQp+P/7k/qYNDAwMCwoKCQgHBwUEAwL9vr4BuQEBAwQFBQYGATsHBgUFAwMCAQECAwMFBQYH/sUGBgUFBAMBvgEBAgMEBQYGBggICAgKCQoCNgoJCQkICAcHBgYEBAQCAQEBAgMDBQUGBwYGBQUEAwIBAgMDBQUGB/3JBgYFBQQDAQEBAgIEBQUGBwYGBQUEAgJnBwYFBQMDAgEBAgMDBQUGBwYGBQUEAwICAwQFBQYBFf6GAXoHBgYGCgoHBgICAX4KCQkJCAgHBwYFBQQDAgLd3QEbAQIDBAUHBwgJCgoLDAwMMp2enQYGBQUEAwICAwQFBQYGBwYFBQMDAgEBAgMDBQUGOL0JCgkICQcIBgcFBQQDAgICAgMEBQUHBggHCQgJCgm9BwYFBQMDAgEBAgMDBQUGB70GBgUFBAMCAgMEBQUGBr0HBgUFAwMCAQECAwMFBQYAAAIAAAAAA7gD9wADADsAAAEXIQMHEwMPAR0BHwg/AgE/By8HAS8CIw8LFR8BA4MX/cvmMuDgAwICAwQEBQYHBwcHBAcDGgYFBAMDAQEBAQECAgQEBAb86QUGBQYGBQYFBAUEAwMCAQEBAgIEBQG+DP5P/k8IBwgIBwcGBgQEAwIBAQECAc4EBAUFBgYGBgYGBgYFBQUDAcQDAQIBAQIDAwQEBQUGBgYGBwYAAAALAAAAAAO4A5kAAwAjADIANgBFAEkAaQB5AH0AjADQAAABMzUjBx8GOwE/Bi8GKwEPBSUVBxUPCCMRIxEhESMRIy8JPQElMzUjBx8HPwcvBisBDwUlMx8JHQEjESMRIREjESM1NzU/CAcRHw4zITM/DhEvDiMhIw8NAgB+fn4BAgIEBQUGBwYGBQUEAwEBAQEDBAUFBgYHBgUFBAICAfcBAgIGCAkLBgYGRT/+hj9FBwYFCwkIBgICAQF6fn5+AQICBAUFBgcGBgUFBAMBAQEBAwQFBQYGBwYFBQQCAgG4BgcGBQsJCAYCAgF+P/6GP34BAgIGCAkLBgYGeAECAwQFBwcICQoKCwwMDA0Cdg0MDAwLCgoJCAcHBQQDAgEBAgMEBQcHCAkKCgsMDAwN/YoNDAwMCwoKCQgHBwUEAwIBJD4fBgYGBAQDAgIDBAQGBgYGBgYEBAMCAgMEBAYGl/sHBgYGCwkIBQMBAQE6/sYBOv7GAQEDBQgJCwYGBgf7vT8fBgYGBAQDAgEBAgMEBAYGBgYGBgQEAwICAwQFBQaXAQICBQgKCgYGBgf8ATv+xQE7/sX8BwYGBgsJCAUCAgE//coNDQwLCwsJCQkHBgUFAwICAwUFBgcJCQkLCwsMDQ0CNg0NDAsLCwkJCQcGBQUDAgIDBQUGBwkJCQsLCwwNAAEAAAAAAtwDmQArAAAJAQ8CHQEfAgEfAjsBPwU9AS8CCQE/Aj0BLwUrAQ8BAqf+hgQDAgIDBAF4BQYGBgYGBQUEAwICAwT+ngFjBAMCAgMEBQUGBgYGBQOQ/oYFBgYGBgYFBf6HBAMCAgMEBQUGBgYGBQUBYwFlBQUGBgYGBQUEAwICAwAAAAAlAAAAAAP3A/cAAwAHAAsADwATABcAGwAfACMAJwAzADcAOwA/AEsATwBUAFgAZABoAGwAcAB0AHgAfACAAIQAiACSAJYAmgCeAKoArgCzALcAwQAANyE1ISUzNSMFMzUjBTM1IyUzNSMFMzUjBTM1IyUzNSMFMzUjBTM1IyUjFTMVMzUzNSM1IwczNSMHMzUjBzM1IwcjFTMVMzUzNSM1IwczNSMHMTM1IwczNSMHIxUzFTM1MzUjNSMlMzUjBTM1IwUzNSMlFTM1IRUzNQUzNSMlMzUjBTM1IwUzNSMlIxUzFTM1MzUjBzM1IwczNSMHMzUjByMVMxUzNTM1IzUjBzM1IwcxMzUjBzM1IwczFTM1MzUjNSMIA/D8EAOxPz/+J0BA/ig/PwOxPz/+J0BA/ig/PwOxPz/+J0BA/ig/PwOzAgIdICAddjs7djs7dzw8dgICPAICPHY8PHY7O3Y7O1ggIB0CAh0DkT8//idAQP4oPz8DsT/96ED96D8/A7E/P/4nQED+KD8/A7MCAh0gPXY7O3Y7O3c8PHYCAjwCAjx2PDx2Ozt2Ozt4IB0CAj0IPzk7Ozs7Ozs7Ozs7Ozs7Ozs7O3Y7AgI7Aj8/Pz8/PwI7AgI7Aj8/Pz8/PwI7AgI7Ajk8PDw8PHY7Ozs7PDw7Ozs7OztYHQICPT8/Pz8/PyAdAgIdID8/Pz8/Pz0CAh0gAAAAAwAAAAAD2AO4AD0AXwCBAAABDwMdAR8GMz8DERUfBj8HER8EPwY9AS8GKwEPASUVHwYhPwY9AS8GIQ8GNRUfBiE/Bj0BLwYhDwYB8owEAwICAwQFBQYGBgYFBV4CAwQEBgYGBgYGBAQDAgFNBQYGBgYGBQUEAwICAwSKBQUGBgYGBv4xAgMEBQUGBgNyBgYFBQQDAgIDBAUFBgb8jgYGBQUEAwICAwQFBQYGA3IGBgUFBAMCAgMEBQUGBvyOBgYFBQQDAgI4iQUFBgYGBgYFBAMBAQIDBFv+igcGBQUDAwIBAQICBAUFBgcBZ08EAwIBAQIDAwUGBgYGBgUFjQQDAgIDogcGBQUDAwIBAQICBAUFBgcGBgUFBAMBAQEBAwQFBQa1BgYFBQQDAQEBAQMEBQUGBgcGBQUDAwIBAQICBAUFBgAAAwAAAAAD9wP3AEcAxwFHAAABFSMPBx8GOwEVHwc/BzU7AT8GLwcjNS8HDwYFDx8vHz8fHx4FHx8/Hy8fDx4B4LwHBgUFBAICAQECAgQFBQYHvAECAwQEBgYGBgYGBAQDAgG8BwYFBQQCAgEBAgIEBQUGB7wBAgMEBAYGBgYGBgQEAwIB2AEBAwQFBgcICQkLDAwNDg4QEBASEhITFBQUFRUWFhYXFxYWFhUVFBQUExISEhAQEA4ODQwMCwkJCAcGBQQDAQEBAQMEBQYHCAkJCwwMDQ4OEBAQEhISExQUFBUVFhYWFxcWFhYVFRQUFBMSEhIQEBAODg0MDAsJCQgHBgUEAwH8UAECAwQGBwgJCgsMDQ4PEBERExMUFBUWFhcXGBkYGhkaGhkaGBkYFxcWFhUUFBMTEREQDw4NDAsKCQgHBgQDAgEBAgMEBgcICQoLDA0ODxARERMTFBQVFhYXFxgZGBoZGhoZGhgZGBcXFhYVFBQTExEREA8ODQwLCgkIBwYEAwIC3b0BAgMEBAYGBgYGBgQEAwK9BwYFBQQCAgEBAgIEBQUGB70CAwQEBgYGBgYGBAQDAgG9BgYFBQQDAQEBAQMEBQUG4xcWFhYVFRQUFBMSEhIQEBAODg0MDAsJCQgHBgUEAwEBAQEDBAUGBwgJCQsMDA0ODhAQEBISEhMUFBQVFRYWFhcXFhYWFRUUFBQTEhISEBAQDg4NDAwLCQkIBwYFBAMBAQEBAwQFBgcICQkLDAwNDg4QEBASEhITFBQUFRUWFhYXGhkaGBkYFxcWFhUUFBMTEREQDw4NDAsKCQgHBQUDAgEBAgMFBQcICQoLDA0ODxARERMTFBQVFhYXFxgZGBoZGhoZGhgZGBcXFhYVFRMTExEREA8ODQwLCgkIBwYEAwIBAQIDBAYHCAkKCwwNDg8QERETExQUFRYWFxcYGRgaGQAAAAADAAAAAAP3A74AfwD/ATkAACUdAR8FOwE/BjUfDjsBPxQvBiMPGCMvCzM/Bj0BLwUrAQ8GEw8QFR8GOwE/GBczHwojDwYdAR8GMz8GPQEvBSsBDwYVLw4jDwIlMz8MEQ8KFSE1LwoRHwwzJyEBwQIDBAUFBgYHBQYEBAMCATkKCwsLDAwMDA0NDQ0NDg0QDxAPEREQEA8PDg0MDAsKCQkHBwEBAQIDBAUGBgcGBQUFBAMFBQcHCAgJCgoLCwwMDA0ODQ0ODQ4NDQ0NDA0LDAsKPlgGBgYEBAMCAgMEBAYGBocLCgkIBwUDyBEREBAPDg4ODAwLCgkJBwYCAQIDBAUFBgUFBQQEBAMDBwUHBwgICQoKCwsMDA0MDg0ODQ4NDQ0NDQ0MDAsLCj5YBgYFBQQDAgIDBAQGBgaNCwkJBwYEAgIDBAQGBgYGBgYEBAMCATgLCwsLDAwMDQwNDQ4NDQ4PDxD9bx8FBgUGBggJCgsHFSJEAQIBAwMEBAYOFBgBARgUDgYEBAMDAQIBJjEXFAsKCQgHBQUHBR4F/ej3hQYGBgQEAwICAwQEBgYGSTQJCAgHBgYFBQQDAwICAQECAwUFBwcICQoLCw0NDQ8PDxEGBgYGBQQEAwIBAgMEBQYMDAwLCgoKCQgIBwYGBQQDAwEBAQEDAwQFBQcHBwk4AQIDBAQGBgYGBgYEBAMCAQMFBggJCgFwBAYGBwgKCgoMDA0ODg8QEAYGBgYFBQQDAQECAgMEBBEMCwsLCgkJCQcHBwUFBAQCAgEBAgIEBAQGBgcICDkBAQMEBQUGBgcGBQUEAwEBAgQGCAgKCosGBgUFBAMCAgMEBQUGBko1CAkHBwcGBQUEAwMCAgEBAQKuGhUMCwkIBwUFAgQEA/4UDwsFBQMEAwIFAwMgIAMDBQIDBAMFBQUNAfQBAwQFBQYGCAkLDBUamwABAAAAAAJ9An4AAwAAATM1IwGC/PwBgvwAAAAABAAAAAAD9wO4ADMAZwCrAO8AAAEXMx8IFREVDwkrAi8INScRNzU/CDMhFzMfBxUXEQcVDwgrAi8JNRE1PwkzBREfDzM/DxEvDyMPDgURHw8zPw8RLw8jDw4BQwcGBgYKCgcGAgIBAQICBgcKCgYGBge9BgYGBgsJCAYCAgEBAgIGCAkLBgYGBgL0BgYGBgsJCAYCAgEBAgIGCAkLBgYGBr0HBgYGCgoHBgICAQECAgYHCgoGBgYH/UsBAgMEBgYHCAkKCgsMDAwNvQ0MDQsLCgoJCAcHBQQDAgEBAgMEBQcHCAkKCgsMDAwNvQ0MDAwLCgoJCAcGBgQDAgI2AQIDBAUHBwgJCgoLDAwMDb0NDAwMCwoKCQgHBgYEAwIBAQIDBAYGBwgJCgoLDAwMDb0NDA0LCwoKCQgHBwUEAwIDegECAgYICQsGBgYG/YoGBwYFCwkIBgICAQECAgYICQsFBgcGAnYGBwYFCwkIBgICAQECAgYICQsGBgYG/YoGBwYFCwkIBgICAQECAgYICQsFBgcGAnYGBwYFCwkIBgICAT/9ig0MDAwLCgoJCAcHBQQDAgEBAgMEBQcHCAkKCgsMDAwNAnYNDAwMCwoKCQgHBwUEAwIBAQIDBAUHBwgJCgoLDAwMDf2KDQwMDAsKCgkIBwcFBAMCAQECAwQFBwcICQoKCwwMDA0Cdg0MDAwLCgoJCAcHBQQDAgEBAgMEBQcHCAkKCgsMDAwADgAAAAAD9wP3AB8AQABgAGQAhQC5AMgAzADQAQ4BHgE1AUQBpAAAJR8CHQEPBSsBLwY/BjsBHwEnDwQfBjsBPwYvBw8CJx8CHQEPBi8GPQE/Bh8CBzM3Iw8FHwYzPwcvBw8CNzMfChUPCiMhIy8JPQI/CTMlFSMvCT0BJRUjNSEVIzUlDwQfBz8EFR8HPwY9AR8DMz8GNS8IDwIlHwsVIzUjFREjDw8VIxEjFSM1PwoHFREfDyEVHw8hPw8vCBEvDyEPDgMqAwICAgIDBAQGBgYFBQQDAgEBAQECBAQEBgYGBQQwAwMEAgEBAgQFBggICgoICAcGBAIBAQIEBQYHCQoKCAhGAwICAgIDBAUFBgYFBQQDAgICAgMEBQYGBQYEHxN8E40DAwQCAQECBAUGCAgKCggIBwYEAgEBAgQFBgcJCgoJCPEGBgYGCwkIBgIBAQEBAQECBggJCwYGBgb+xQcGBgYKCgcGAgIBAQICBgcKCgYGBgf+hkUHBgULCQgGAgIBAzN+/cl+AYJ9BAMBAQEBAwQFBgYGBgYFBUgBAgMDBQUGBwYGBQUEAwJIBQYGBgYGBQUEAwIBAQMEfwUGBgYGBgUBbQYGBgYLCQgGAgEBAX4/fg0NDAsLCwkJCAgGBQQDAgG9P34BAQECBggJCwYGBngBAgMEBQcHCAkKCgsMDAwNATsBAgMEBQcHCAkKCgsMDAwNATsNDAwMCwoKCQgHBwUEAwIBAQIEBggKCwwJAQIDBAUHBwgJCgoLDAwMDf1LDQwMDAsKCgkIBwcFBAMCywQGBwgIBwYFBAMCAgMEBQYGCAgHBgUEAwICAwcEBAkKCwsJCAcGBAMDBAYICQkLCwoJBwUEAwEBAwRTBQYHCAgGBgYEAwEBAQEDBAUGBwcIBwYFBAMCAQECArLDCwQECQoLCgoIBwYEAwECBQYHCQoLCwkJBwUEAwEBAwRDAQICBggJCwUGBwa9BgcGBQsKBwYCAgEBAgIGCAkLBQYHBr0GBwYGCgoHBgICAT+9AQICBgcKCgYGBwZ+/Pz8vb10fQUGBgYGBgUFBAMBAQEBAwRJsQYGBQUEAwEBAQEDBAUFBgawSAQDAgEBAwQFBgYGBgUGBX4EAgIBAQIDhAEBAQIGCAkLBgYGBn69vf7FAQIDBAUHBwgJCgoLDAwMDT8Ctb1+BgYGBgsJCAYCAQE+fv5HDQwMDAsKCgkIBwcFBAMCAT8NDAwMCwoKCQgHBwUEAwIBAQIDBAUHBwgJCgoLDAwMDcYQEA8ODAwJBgHKDQwMDAsKCgkIBwcFBAMCAQECAwQFBwcICQoKCwwMDAADAAAAAAO9A8gADwB/AJMAAAEPAxUfAzM/AgEnBREVHw0zITM/DTURNS8GDwcRFQ8FIyEjLwU1ETU/BTMhPwcvByEPDiUHFz8DPQEvBisBDwEBGwUDMgEBBAMFBZoHBgGtfv17AgIDBAUFBgcHCAgJCQoJArUKCQkJCAgHBwYFBQQDAgICAwQEBgYGBgYGBAQDAgECAwQEBgYG/UsGBgUFBAMCAgMEBQUGBgGZBwYFBQQDAQEBAQMEBQUGB/5nCQoJCQgIBwcGBQUEAwICAvNCfkIEAwICAwRRBQYGBgYFBgGkBgeYAwMGBQECMwMFAa1+Bv1LCQoJCAkHCAYHBQUEAwICAgIDBAUFBwYIBwkICQoJAXoHBQYEBAMCAQECAwQEBgUH/oYGBgUFBAMCAgMEBQUG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NRE1PwkzIQURHw8hPw8RLw8hDw4CPwIDBAUFBgb8BwYFBQMDAgEBAgMDBQUGB/wGBgUFBAMC/kcBAgMDBQUGB/wGBgUFBAMBAQEBAwQFBQYG/AcGBQUDAwIBuAIDBAUFBgb8BwYFBQMDAgEBAgMDBQUGB/wGBgUFBAMCTwECAgMEBAUGBQYHBwcICzwKCgkJCAgIBwYGBAUDAgIBOwEBAwMEBQYGBwcICQkJCgo8DAcIBgcGBgUFBAQDAwECAgICBAQEBQYGBgcHCAgICAgHBwcHBgUFBQQDAwIB/nZeBwYFBQMDAgEBAgMDBQUGB14BAgMDBQUGBwYGBQUEAwJfBgYFBQQDAgIDBAUFBgZfAgMEBQUGBgcGBQUDAwICdQYGBgYLCQgGAgEBAQEBAQIGCAkLBgYGBv0MBgcGBQsJCAYCAgEBAgIGCAkLBQYHBgL0/I4BAgMEBQcHCAkKCgsMDAwNAvQNDAwMCwoKCQgHBwUEAwIBAQIDBAUHBwgJCgoLDAwMDf0MDQwMDAsKCgkIBwcFBAMC5QcGBQUDAwIBAQIDAwUFBgcGBgUFBAMCAgMEBQUGOQcGBQUEAgIBAQICBAUFBgcGBgUFBAMBAQEBAwQFBQY5BwYFBQMDAgEBAgMDBQUGBwYGBQUEAwIBAQMEBQUGAXEKCQkJCAgIBwYFBQUDAwIBAgIDBAUGBgcICAgJCQoKFxcKCgkJCAgIBwYGBQQDAgIBAgMDBQUFBgcICAgJCQkKCgkKCQgICAYHBQUEBAIBAQEBAgQEBQUHBggICAkKCTdeAQICBAUFBgcGBgUFBAMBAV8GBgUFBAMBAQEBAwQFBQYGXwECAgQFBQYHBgYFBQQDAQFfBgYFBQQDAQEBAgIEBQUGlwECAgYICQsFBgcG/QwGBwYFCwkIBgICAQECAgYICQsFBgcGAvQGBwYFCwkIBgICAT/9DA0MDAwLCgoJCAcHBQQDAgEBAgMEBQcHCAkKCgsMDAwNAvQNDAwMCwoKCQgHBwUEAwIBAQIDBAUHBwgJCgoLDAwMAAMAAAAAA1oDGwAhAEMAZQAAExUfBTMhMz8FPQEvBiEPBjUVHwYhPwY9AS8FIyEjDwU1FR8GIT8GPQEvBSMhIw8FpgIDBAUFBgYCdgYGBQUEAwICAwQFBQYG/YoGBgUFBAMCAgMEBQUGBgJ2BgYFBQQDAgIDBAUFBgb9igYGBQUEAwICAwQFBQYGAnYGBgUFBAMCAgMEBQUGBv2KBgYFBQQDAgEEBgYFBQQDAgIDBAQGBgYGBgYEBAMCAQECAwQEBgb2BgYGBAQDAgEBAgMEBAYGBgYGBQUEAwICAwQEBgb2BgYGBAQDAgEBAgMEBAYGBgYGBQUEAwICAwQEBgYAAAAKAAAAAAP3A7gADgAUADgAPABaAF4AbQBxAIAA3wAAARUrAS8JNSUXBxc3JzcfBxUPByMvBj0CPwYlFSM1JRUjDw4dASM1MzUjNTM1MzUhFSM1JR8LIzUjFSM1IxUjPwsHER8PIR8HIT8PNS8OKwERLw8hDw4BBH4GBwYFCwkIBgICAQJ3enoPq6vMBgYGBAQDAgEBAgMEBAYGBvwGBgUFBAMCAgMEBQUGBv5nvQL0ngkKCQgJCAcHBgUFBAMCAvy9vb1+/oa9ArUGBgYGCwkIBgIBAQG9P/w/vQEBAQIGCAkLBgYGBn4BAgMEBQcHCAkKCgsMDAwNAb4DBwkKDAwODwEDCgkJCQgIBwcGBgQEAwMBAQEBAwMEBAYGBwcICAkJCQofAQIDBAUHBwgJCgoLDAwMDf2KDQwMDAsKCgkIBwcFBAMCAUN+AQICBgcKCwUGB0UkREMcX2A+AQIDAwUFBgf8BgYFBQQDAQEBAQMEBQUGBvwHBgUFAwMCAT9+fr29AQECBAQEBgYHBwgICQkJCtx+P34/fn5+vQEBAQIGCAkLBgYGRX5+fn5FBgYGCwkIBgIBAQE//ckNDAwMCwoKCQgHBwUEAwIBCAwLCggHBAMBAQIEBAQGBgcHCAgJCQkK/AkKCQgJBwgGBgYFBAMCAgE7DQwMDAsKCgkIBwcFBAMCAQECAwQFBwcICQoKCwwMDAAABAAAAAAD9wP3AAMABwALAA8AACUXNyc3FzcnBRc3JzcXNycBKNjY2EjY2Nj86NjY2EjY2Njg2NjYSNjY2NjY2NhI2NjYAAAADAAAAAAD9wP3AC4AaAB2AKoAuQC9AMEA/wEPASYBNQGVAAAlFQ8JKwEvCTU/CTsBHwknDwofDT8OLwwrAQ8GFT8DFTM1IzczHwoVDwojISMvCT0CPwkzJRUjLwk9ATcVIzUhFSM1JRUvBA8HHwg/CC8HDwQ1LwcPBiUfCxUjNSMVESMPDxUjESMVIzU/CgcVER8PIRUfDyE/Dy8IES8PIQ8OA0UBAwMFAwQDBAQFBQUEBQMEAwMFBAMBAQMEBQMDBAQEBQUFBAQEBAMDAgUDAkIGBQUEBAMDAwIBAQEDAgMDBAQFBQUGBgcHCAcGBwUGBAUEAwMDAQIBAQMCAwMDBAUFBQYHBggHCAZ/BwgQDwYOEQcWCOMGBgYGCwkIBgIBAQEBAQECBggJCwYGBgb+xQcGBgYKCgcGAgIBAQICBgcKCgYGBgf+hkUHBgULCQgGAgIBfn4DM37+xUgFBQYGBgYGBQQCAgEBAQMEfQUGBgUHBQYFfwQDAQEBAQMEBQYFBgYGBgVIAQICBAUFBgcGBgUFBAICAXkGBgYGCwkIBgIBAQF+P34NDQwLCwsJCQgIBgUEAwIBvT9+AQEBAgYICQsGBgZ4AQIDBAUHBwgJCgoLDAwMDQE7AQIDBAUHBwgJCgoLDAwMDQE7DQwMDAsKCgkIBwcFBAMCAQECBAYICgsMCQECAwQFBwcICQoKCwwMDA39Sw0MDAwLCgoJCAcHBQQDAuMKEQ8NCgQDAwICAQECAgIEBAoMDhITEw8NCwQEAwICAQECAgMEBAULDhFLBAQFBwYICQkKCxgVFAgIBwcGBQQDAwIBAQEBAgMEBAUGBwgICQoKFxcUCQgIBgYFBAQDAgECAgQFBAgFFgEGCgWnxjkBAgIGCAkLBQYHBr0GBwYFCwoHBgICAQECAgYICQsFBgcGvQYHBgYKCgcGAgIBP70BAgIGBwoKBgYHBn78vb38/F6wSQQDAQEBAQMEBQYFBgYGBgV+BAICAQEBAwR+BQUGBgYGBgUEAgIBAQEDBEivBwYFBQMDAgEBAgMDBQUGlwEBAQIGCAkLBgYGBn69vf7FAQIDBAUHBwgJCgoLDAwMDT8Ctb1+BgYGBgsJCAYCAQE+fv5HDQwMDAsKCgkIBwcFBAMCAT8NDAwMCwoKCQgHBwUEAwIBAQIDBAUHBwgJCgoLDAwMDcYQEA8ODAwJBgHKDQwMDAsKCgkIBwcFBAMCAQECAwQFBwcICQoKCwwMDAArAAAAAAP3A/cACQANABEAFQAhACUAKQAtADEANQA5AD0AQQBFAEkATQBRAFsAXwBjAGcAawBvAHMAfQCBAIUAiQCNAJEAlQCZAJ0AoQCzALcAuwC/AMsAzwDTANcA4QAAJSMVMxUzNSM1IwczNSMHMzUjBzM1IwcjFTMVMzUz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Bv0MBgcGBQsJCAYCAgEDcvzNAQIDAwUFBgcCNgcGBQUEAgIBAQICBAUFBgf9ygcGBQUDAwIC8wYGBgYLCQgGAgEBAfyOAQEBAgYICQsGBgYGfgECAwQFBwcICQoKCwwMDA0C9A0MDAwLCgoJCAcHBQQDAgEBAgMEBQcHCAkKCgsMDAwN/QwNDAwMCwoKCQgHBwUEAwIB0wICAQECHQMGBgMCGwIBAQEDBQM1BgOABwYFBQMDAgEBAgMDBQUGB/4JBwYFBQMDAgEBAgMDBQUGB18BAQMDBAQGBgcHCAgJCQkKAfgJCgkICQcIBgYGBQQDAgICAgMEBQYGBggHCQgJCgn+CAoJCQkICAcHBgYEBAMDAcUGBgUFBAMCAgMEBQUGBgcFBgQEAwIBAQIDBAQGBVh+BwYGBgsJCAUDAQEBAQMFCAkLBgYGB36dBgYGBAQDAgIDBAQGBgYGBgYEBAMCAgMEBAYGWQEBAQIGCAkLBgYGB319BwYGBgsJCAYCAQEBQP7GDQ0MCwsLCQkJBwYFBQMCAgMFBQYHCQkJCwsLDA0NAToNDQwLCwsKCAkHBgUFAwICAwQGBgcICQoLCwsMDQFpAwIGBgMdAgEBAgIbBgMDAwUDAQEBQQIDBAUFBgZ+BgYGBAQDAgEBAgMEBAYGBn4GBgUFBAMCH34KCQkJCAgHBwYFBQQDAwEBAQEDAwQFBQYHBwgICQkJCn4JCgkJCAgHBwYFBQQDAgICAgMEBQUGBwcICAkJCQACAAAAAAODA3kARACaAAABBy8DIw8GHQEfARMDDwIVHwYzPwMfAzM/BjUvAgMTPwE9AS8HDwI3DwUVPwcfCw8SMzUjPxE9AS8NIwcCI7e5BgcHCQQFBAQEAwECBMLCAwIBAgMDBQQFBQgHBwa4ugUHBwgFBQQFBAICAQIDw8IDAwICBAQFBAQFBwgGvg8NDgwNDAwMDA0MDQwNDQ0LBQkEAwMCAQEBAgMFBgkKCww4DgwLCggGAwEBAfy1AQEDAwUKDTcSGA0LBQQDAwIBAgIEBQUHBwkJCQsLDA0NEQLv+fwFAwEBAgMEBQYFBgcFBv74/vcFBgYGBgYFBAMBAgIDBfz8BAQBAQIDBAUFBgYGBgYBCAEJBQYGBgYFBQUCAgEBAQIEgwMEBAYHCDoKCQcGBQMCAQEDBQMHBQQGBQcGBw0MDAoLCQoKKwwL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AgIBAQICBAUFBgf+SAcGBQUDAwIBAQIDAwUFBgcBuAcGBQUEAgIBAQICBAUFBgf+SAcGBQUDAwIBGh8/AQICBggJCwUGBwYGBwYGCgoHBgICAQECAgYHCgoGBgcGBgcGBQsJCAYCAgG6AgIDBAUEBgWhBgYGBgsJCAYCAQEBAQEBAgYICQsGBgYG/YoGBwYFCwkIBgICAQECAgYICQsFBgcGoQUFBQUEAwIEBAQGBgYIBwkJCQoLCgsLCwsLCgoJCQkHCAYGBgQE/tWJDQwMDAsKCgkIBwcFBAMCAQECAwQFBwcICQoKCwwMDA0Cdg0MDAwLCgoJCAcHBQQDAgEBAgMEBQcHCAkKCgsMDAwNiQUHBwkJCgoMDAwNDg4ODw8PDw4ODg0MDAwKCgkJBwflBwYFBQMDAgEBAgMDBQUGBwYGBQUEAwICAwQFBQa3BwYFBQQCAgEBAgIEBQUGBwYGBQUEAwEBAQEDBAUFBrcHBgUFBAICAQECAgQFBQYHBgYFBQQDAQEBAQMEBQUG1gcGBgYKCgcGAgIBAQICBgcKCgYGBgcGBwYFCwkIBgICAQECAgYICQsFBgcTBQUEBAMCAQEBAgIGBwoKBgYHBv2KBgcGBQsJCAYCAgEBAgIGCAkLBQYHBgJ2BgcGBQsJCAYCAgECAgMEBAUQCgoJCQkHBwcFBQQEAgEBAQECBAQFBQcHBwkICgoKGwECAwQFBggICQoKCwwMDA39ig0MDAwLCgoJCAcHBQQDAgEBAgMEBQcHCAkKCgsMDAwNAnYNDAwMCwoKCQgHBwUEAwIBDg0MDAsKCgkIBwYFAwMCAQECAgQFBgcICQoKCwwMDQAAAAMAAAAAA3kD9wBIAHwAwAAAAQ8DFR8DDwMVHwYzPwQfBDM/BjUvAz8DLwcjDwQnMS8DDwIlMx8JFREVDwkjISMvCTURNT8JMwcRHw8hPw8RLw8hDw4BTwUDAwEBAgSNjAQCAQEDAwUFBgUGBgYFBIWGBAUGBgYGBgUFAwIBAQIEjY0DAwEBAQIEBAUGBgYFBgUEhoUFBgYHBQYFAakGBwYFCwkIBgICAQECAgYICQsFBgcG/ggGBwYFCwkIBgICAQECAgYICQsFBgcGfgECAwQFBwcICQoKCwwMDA0B+A0MDAwLCgoJCAcHBQQDAgEBAgMEBQcHCAkKCgsMDAwN/ggNDAwMCwoK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BQUHCAgKCQsLCwwMAgYMDAsLCwkKCAgHBQUEAwIBH50BAgMDBQUGBwYGBQUEAwKeBgYFBQQDAQEBAQMEBQUGBp4CAwQFBQYGBwYFBQMDAgGdBwUGBAQDAgEBAgMDBQUGAAgAAAAAA7gDuAAjAEcAiwDPAPMBFwFbAZ8AAAEfBxUPByMvBj0CPwYhHwcVDwcjLwc1PwcFHQEfDjM/DzUvDisCDw0FFR8PMz8OPQIvDSsCDw0BHwcVDwYrAi8FPQI/BiEfBxUPBisCLwY1PwcFHQEfDTsCPw41Lw8jDw4FFR8OOwI/DT0CLw4jDw4DWgcGBQUDAwIBAQIDAwUFBge9BgYFBQQDAgIDBAUFBgb+xgYGBQUEAwEBAQEDBAUFBga9BwYFBQMDAgEBAgMDBQUGBwGZAgIDBAUGBgYIBwkICQoJvQoJCQkICAcHBgYEBAQCAQEBAQIEBAQGBgcHCAgJCQkKvQkKCQgJBwgGBgYFBAMCAv4IAQECBAQEBgYHBwgICQkJCr0JCgkICQcIBgYGBQQDAgICAgMEBQYGBggHCQgJCgm9CgkJCQgIBwcGBgQEBAIBAxIHBgUFAwMCAQECAwMFBQYHvQYGBQUEAwICAwQFBQYG/sYGBgUFBAMBAQEBAwQFBQYGvQcGBQUDAwIBAQIDAwUFBgcBmQICAwQFBgYGCAcJCAkKCb0KCQkJCAgHBwYGBAQEAgEBAQECBAQEBgYHBwgICQkJCr0JCgkICQcIBgYGBQQDAgL+CAEBAgQEBAYGBwcICAkJCQq9CQoJCAkHCAYGBgUEAwICAgIDBAUGBgYIBwkICQoJvQoJCQkICAcHBgYEBAQCAQGCAQEDBAUFBga9BwYFBQMDAgEBAgIEBQUGB70GBgUFBAMBAQEBAwQFBQYGvQcGBQUDAwIBAQICBAUFBge9BgYFBQQDAQEgvAoJCQkICAcHBgYEBAQCAQEBAQIEBAQGBgcHCAgJCQkKvQkKCQgJBwgGBgYFBAMCAgICAwQFBgYGCAcJCAkKCrwKCQkJCAgHBwYGBAQEAgEBAQECBAQEBgYHBwgICQkJCr0JCgkICQcIBgYGBQQDAgICAgMEBQYGBggHCQgJCgIOAQIDAwUFBge9BgYFBQQDAgIDBAUFBga9BwYFBQMDAgEBAgMDBQUGB70GBgUFBAMCAgMEBQUGBr0HBgUFAwMCASC9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CgkIBQQBvQEBAwMDBggIBQUGDgoLCwsMDAwMDAsMCwsLCggHBgUEAwIBAQIDBAUGCAsDAwEBAQMGBAUGFAwMCwsKCggICAYFBAMCAQECAwQFBggICAoKCwsMDBQGBAQDBAMBAQICDQgGBQQCAgIDBAYHBwkKCQsLCwwMDAwMCwwLCgoMBQgFBAcIBgMDAQICAwQFBggICQoKDAsNDQ0NDAwLCwoKCQgHBgUEAwICAQMDAwYICAUFBQ8KCgsLDAsMDAwMDAwLCwoICAYFBAMBAQEBAwQFBggLAwMBAQEEBQQEBhQMDAsLCgoICAgGBQQDAgEBAgMEBQYICAgKCgsLDAwUBgQEAwQDAQECAg0IBgUEAwEBAQIDBAYGCAkJCgsLCwwMDAwMCwwLCgoMBQgFBAcIBgMDAQICAwQFBggICQoKCwwNDQ0NDAwLCwoKCQgHBgUEAwICAA8ODQ0MDAsKCQgHBgUEAgEBAgQFBQgICQoLCw0NDQ4PDg4ODQwMCwoJCAcGBQQCAgQFBgcICQoLDAwNDg4OCwoUFBMSEBAPDQwKCAcFAwEBAwUHCAoMDQ8QEBITFBQVFRQUEhIREA4OCwsIBwUDAQEDBQcICwsNDxARERMUFAFnBw4NDQsKCQcGAwIBAwQHCAkHBQIBAgIDAwUFBAULCwwLDAoFCgsNDQ0ODQ4NDQoJCAYEAgECAgMGCQoGBgcGBwcGCwoJCAUEAQIEBggJCwwNDg4NDgwNCwoFBQUMDAwLBgYFBQQEBQQBAQQFBAkIBwQDAQMGBwkKCw0NDg4GBQYFCggHAgICAQEEBQgJCgsGFQ4MDAsKCAYDAwEBAwMEBAYLBgUCAQEBAQMCBAUFBAULCwwLCwsFCgsMDQ4NDg4NDAsJCAYEAgECAgIHCQoGBgYHBwYGDAoJBwYEAQIEBggJCwwNDg4ODQ0MCwoKCwsMBgYGBgUGBgQDBgMBAQMGBAkIBwQDAQIDBgcJCgsNDQ4NBgYGBQoIBwICAgEBBAYHCQoMBgYHBQUEAwQDAgMNBwYFBAMBAQECAwQGBggJCQoKCwwLDA0MDAwLCwoKDAUIBQQHCAYDAwECAgMEBQcHCAkKCgwMDA0NDQwMCwsKCgkIBwYFBAMCAgEDAwMGCAgFBQYOCgsLCwwMDAwMDAsMCgsKCAcGBQQDAQEBAQMEBQYHCgQDAQQFBAUFFAwM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dABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGXAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAREBEgETARQBFQEWARcBGAEZARoBGwEcAR0BHgEfASABIQEiASMBJAElASYBJwEoASkBKgErASwBLQEuAS8BMAExATIBMwE0ATUBNgE3ATgBOQE6ATsBPAE9AT4BPwFAAUEBQgFDAUQBRQFGAUcBSAFJAUoBSwFMAU0BTgFPAVABUQFSAVMBVAFVAVYBVwFYAVkBWgFbAVwBXQFeAV8BYAFhAWIBYwFkAWUBZgFnAWgBaQFqAWsBbAFtAW4BbwFwAXEBcgFzAXQBdQF2AXcBeAF5AXoBewF8AX0BfgF/AYABgQGCAYMBhAGFAYYBhwGIAYkBigGLAYwBjQGOAY8BkAGRAZIBkwGUAZUBlgGXAZgBmQGaAZsBnAGdAZ4BnwGgAaEBogGjAaQBpQGmAacBqAGpAaoBqwGsAa0BrgGvAbABsQGyAbMBtAG1AbYBtwG4AbkBugG7AbwBvQG+Ab8BwAHBAcIBwwHEAcUBxgHHAcgByQHKAcsBzAHNAc4BzwHQAdEB0gHTAdQB1QHWAdcB2AHZAdoB2wHcAd0B3gHfAeAB4QHiAeMB5AHlAeYB5wHoAekB6gHrAewB7QHuAe8B8AHxAfIB8wH0AfUB9gH3AfgB+QH6AfsB/AH9Af4B/wIAAgECAgIDAgQCBQIGAgcCCAIJAgoCCwIMAg0CDgIPAhACEQISAhMCFAIVAhYCFwIYAhkCGgIbAhwCHQIeAh8CIAIhAiICIwIkAiUCJgInAigCKQIqAisCLAItAi4CLwIwAjECMgIzAjQCNQI2AjcCOAI5AjoCOwI8Aj0CPgI/AkACQQJCAkMCRAJFAkYCRwJIAkkCSgJLAkwCTQJOAk8CUAJRAlICUwJUAlUCVgJXAlgCWQJaAlsCXAJdAl4CXwJgAmECYgJjAmQCZQJmAmcCaAJpAmoCawJsAm0CbgJvAnACcQJyAnMCdAJ1AnYCdwJ4AnkCegJ7AnwCfQJ+An8CgAKBAoICgwKEAoUChgKHAogCiQKKAosCjAKNAo4CjwKQApECkgKTApQClQKWApcCmAAKZXhwb3J0LXBkZg9tb3JlLXZlcnRpY2FsLTIJc3ViLXRvdGFsEXRhYmxlLWFsaWduLXJpZ2h0BmhlYWRlcgVjbG9jawdyZWZyZXNoCWFsaWduLXRvcA5hcnJvdy1yaWdodC11cAx1c2VyLWRlZmluZWQNcHJvdGVjdC1zaGVldAVwYXN0ZQRwbGF5EWNoZXZyb24tZG93bi1maWxsDGluc2VydC1yaWdodA9wYXN0ZS10ZXh0LW9ubHkHcmVwbGFjZQdsZXZlbC00CHVwbG9hZC0xBHVuZG8NZGVsZXRlLWNvbHVtbgxyZXN0YXJ0LWF0LTEJcGVyaW1ldGVyBXN0YW1wEmNvbnRpbnVlLW51bWJlcmluZwthbGlnbi1yaWdodA9zaG93LWhpZGUtcGFuZWwWY29uZGl0aW9uYWwtZm9ybWF0dGluZxFtb3JlLWhvcml6b250YWwtMQRzZW5kBGNlbGwRc29ydC1kZXNjZW5kaW5nLTISdGltZWxpbmUtd29yay13ZWVrB2p1c3RpZnkOaHlwZXJsaW5rLWVkaXQJcmVjdGFuZ2xlCmdyb3VwLWljb24KbGluZS1zbWFsbA1kcmFnLWFuZC1kcm9wC2NoZWNrLWxhcmdlBnNoYXBlcwxjaGV2cm9uLWRvd24PZGVjcmVhc2UtaW5kZW50DGNpcmNsZS1jaGVjawxmaWx0ZXItY2xlYXIFbm90ZXMGZXhwb3J0DWJyaW5nLWZvcndhcmQEZWRpdAtmaWx0ZXItbWFpbg5zcGxpdC12ZXJ0aWNhbAxjb21tZW50LXNob3cSY2hldnJvbi1kb3duLXNtYWxsDWZpbHRlci1hY3RpdmUXZHJhZy1hbmQtZHJvcC1pbmRpY2F0b3IEYm9sZBJjaGV2cm9uLWxlZnQtc21hbGwPaGlnaGxpZ2h0LWNvbG9yDHByaW50LWxheW91dAdiZXR3ZWVuC2xpbmstcmVtb3ZlEHRhYmxlLW9mLWNvbnRlbnQNZ3JpcC12ZXJ0aWNhbANrcGkJcmVkYWN0aW9uBnZvbHVtZQpicmVhay1wYWdlBmxlbmd0aBNjaGV2cm9uLWxlZnQtZG91YmxlDmh5cGVybGluay1jb3B5Cmxvd2VyLWNhc2UIYnVsbGV0LTINY2hldnJvbi1yaWdodAl1bmdyb3VwLTEQYXV0by1maXQtY29udGVudBhmaWx0ZXJlZC1zb3J0LWRlc2NlbmRpbmcRYWdlbmRhLWRhdGUtcmFuZ2ULZ3JhbmQtdG90YWwNbW91c2UtcG9pbnRlcgxhbGlnbi1taWRkbGUIYm9va21hcmsOZmllbGQtc2V0dGluZ3MXcGFzdGUtbWF0Y2gtZGVzdGluYXRpb24IcGFzc3dvcmQGc2VhcmNoBHJlZG8IbG9jYXRpb24EbGluaw1zdHJpa2V0aHJvdWdoD2F1dG8tZml0LXdpbmRvdwZpdGFsaWMMbW9udGgtYWdlbmRhE2NoZXZyb24tcmlnaHQtc21hbGwFcHJpbnQOdGltZWxpbmUtdG9kYXkSdGV4dC10aGF0LWNvbnRhaW5zC2ZvbGRlci1vcGVuCXJlc2l6ZXItMQ1icmVhay1zZWN0aW9uCGJ1bGxldC02CGljb25zZXRzDGNoZXZyb24tbGVmdA1ib3JkZXItYm90dG9tDXNwYWNpbmctYWZ0ZXIKY2lyY2xlLWFkZBB0ZXh0LWFsdGVybmF0aXZlB2xldmVsLTEKdHdvLWNvbHVtbgZ0b3AtMTAGcmVuYW1lBXN0eWxlCWZvbnQtbmFtZQ9tb3JlLXZlcnRpY2FsLTEPbGluZS12ZXJ5LXNtYWxsBnJlcGVhdAphcnJvdy1sZWZ0BWNoZWNrEnZlcnRpY2FsLWFsaWduLXRvcApjaGV2cm9uLXVwCWJvdHRvbS0xMANkYXkJdW5ncm91cC0yCW9wZW4tbGluawVwYXVzZQRjb3B5DnBhZ2UtbnVtYmVyaW5nDmxpc3QtdW5vcmRlcmVkCmZyZWV6ZS1yb3cHbGV2ZWwtMwpleHBvcnQteGxzDmNvbW1lbnQtcmVvcGVuDHBhaW50LWJ1Y2tldBFib3JkZXItZGlhZ29uYWwtMRJmaXhlZC1jb2x1bW4td2lkdGgFaW1hZ2URbnVtYmVyLWZvcm1hdHRpbmcQcHJvdGVjdC13b3JrYm9vaw9yZWN1cnJlbmNlLWVkaXQMc2VuZC10by1iYWNrC2luc2VydC1sZWZ0BGFyZWEMbGluZS1zcGFjaW5nCnNlbGVjdC1hbGwMYm9yZGVyLWlubmVyBnJhZGl1cwlkYXRhLWJhcnMNYm9yZGVyLW1pZGRsZQp1cHBlci1jYXNlCnBhZ2Utc2V0dXAHem9vbS1pbghmaWx0ZXJlZA5oeXBlcmxpbmstb3BlbhFjYWxjdWxhdGVkLW1lbWJlcgRtZW51DGdyZWF0ZXItdGhhbghidWxsZXQtNA9ib3R0b20tMTAtaXRlbXMRYm9yZGVyLWRpYWdvbmFsLTIJdGh1bWJuYWlsCmZvbnQtY29sb3IMYWxpZ24tYm90dG9tCGRvd25sb2FkC2NsZWFyLXJ1bGVzDnNvcnQtYXNjZW5kaW5nEHNwbGl0LWhvcml6b250YWwHZ3JvdXAtMglkcm9wLWRvd24Lc3VwZXJzY3JpcHQOY2hhbmdlcy1hY2NlcHQUY2hldnJvbi1yaWdodC1kb3VibGUQc29ydC1hc2NlbmRpbmctMgxib3JkZXItcmlnaHQDbWR4DGJvcmRlci1vdXRlcgdzYXZlLWFzDGVuZC1mb290bm90ZRBleGl0LWZ1bGwtc2NyZWVuA3BhbgxyYWRpby1idXR0b24PdGV4dC1hbm5vdGF0aW9uBHVzZXIOc3BhY2luZy1iZWZvcmUPc29ydC1kZXNjZW5kaW5nB2Rpc3BsYXkKYWxpZ24tbGVmdAZwZW9wbGUKZXhwb3J0LWNzdgZmb290ZXIFYnJlYWsOZGF0ZS1vY2N1cnJpbmcIYnVsbGV0LTMMc3Ryb2tlLXdpZHRoC2Rlc2NyaXB0aW9uDGV4cG9ydC1leGNlbAp0YWJsZS1jZWxsC3RleHQtaGVhZGVyC2xpbmUtbm9ybWFsBW1vbnRoDGNvbG9yLXNjYWxlcxJjaGFuZ2Utc2NhbGUtcmF0aW8Ec2F2ZQZleHBhbmQGY2lyY2xlDGxpc3Qtb3JkZXJlZAVlcmFzZQpmb3JtLWZpZWxkCXRleHQtd3JhcApleHBvcnQtc3ZnCGJ1bGxldC0xCmJvcmRlci1hbGwDc3VtCndlYi1sYXlvdXQJc2VsZWN0aW9uE3RhYmxlLWJvcmRlci1jdXN0b20NYmVsb3ctYXZlcmFnZQlsZXNzLXRoYW4KYXJyb3ctZG93bhV2ZXJ0aWNhbC1hbGlnbi1ib3R0b20MdGltZWxpbmUtZGF5CXNpZ25hdHVyZQhmaWxlLW5ldxBjaGV2cm9uLXVwLXNtYWxsA2V5ZQhhcnJvdy11cApib3JkZXItdG9wB29wYWNpdHkSaW50ZXJtZWRpYXRlLXN0YXRlEHJlc2l6ZXItdmVydGljYWwJY2hlY2stYm94FXZlcnRpY2FsLWFsaWduLWNlbnRlcgd0d28tcm93BWNsb3NlA2FsbAV0YWJsZQ1oaWRlLWhlYWRpbmdzD3RhYmxlLWNlbGwtbm9uZQtmcmVlemUtcGFuZQ1zZW5kLWJhY2t3YXJkCmV4cG9ydC1wbmcOZHVwbGljYXRlLWNlbGwLc3BlbGwtY2hlY2sSdGFibGUtYWxpZ24tY2VudGVyCmRlbGV0ZS1yb3cEbm9uZQdncm91cC0xC2NoYW5nZS1jYXNlEHRhYmxlLWFsaWduLWxlZnQGZmlsdGVyCmNsZWFyLWZvcm0LYXJyb3ctcmlnaHQQaGlkZS1mb3JtdWxhLWJhcgNjdXQIYnVsbGV0LTUScmVzaXplci1ob3Jpem9udGFsE2NoZXZyb24tZG93bi1kb3VibGUEbG9jawtjaXJjbGUtaW5mbwxpbnNlcnQtYmVsb3cIcGVudGFnb24MY2xlYXItZm9ybWF0CXRpbWUtem9uZQRwbHVzC2JvcmRlci1sZWZ0B2xldmVsLTINYWJvdmUtYXZlcmFnZQVvcmRlcglzdWJzY3JpcHQNY2hhbmdlcy10cmFjaxBoeXBlcmxpbmstcmVtb3ZlEHRvcC1ib3R0b20tcnVsZXMJY29kZS12aWV3CmNvbGxhcHNlLTIPaW5jcmVhc2UtaW5kZW50DHRhYmxlLWRlbGV0ZRxjb25kaXRpb25hbC1mb3JtYXR0aW5nLWxhcmdlDGFsaWduLWNlbnRlcgdyZWFwcGx5DmNoYW5nZXMtcmVqZWN0DmhpZGUtZ3JpZGxpbmVzBHdlZWsJbGFzdC1wYWdlBGxpbmUHZXF1YWx0bw1jaXJjbGUtcmVtb3ZlC2Z1bGwtc2NyZWVuCWRpbWVuc2lvbhdmaWx0ZXJlZC1zb3J0LWFzY2VuZGluZw10aW1lbGluZS13ZWVrBXRyYXNoDHByb3BlcnRpZXMtMRFjaGV2cm9uLXVwLWRvdWJsZQlzb3J0aW5nLTIJc29ydGluZy0xCHpvb20tb3V0BWNoYXJ0C2JvcmRlci1ub25lDHRhYmxlLXVwZGF0ZQluYW1lZC1zZXQPYW5ub3RhdGlvbi1lZGl0CXZpZXctc2lkZQtjb21tZW50LWFkZAlncmlkLXZpZXcHY2FwdGlvbgl1bmRlcmxpbmUJdGV4dC1mb3JtC2luc2VydC1jb2RlDXJlc2l6ZXItcmlnaHQKZmlyc3QtcGFnZQNib3gPZGF0YS12YWxpZGF0aW9uDGluc2VydC1hYm92ZQdsZXZlbC01C3pvb20tdG8tZml0DmVycm9yLXRyZWV2aWV3C21lcmdlLWNlbGxzDWJvcmRlci1jZW50ZXIGZm9sZGVyCWhpZ2hsaWdodAxwcm9wZXJ0aWVzLTIHdGFibGUtMg5icmluZy10by1mcm9udA1mcmVlemUtY29sdW1uC3Bhc3RlLXN0eWxlCnVuZmlsdGVyZWQJcGFyYWdyYXBoE2NoYXJ0LWluc2VydC1jb2x1bW4MY2hhcnQtbGVnZW5kGGNoYXJ0LWluc2VydC14LXktc2NhdHRlchFhZGQtY2hhcnQtZWxlbWVudA9jaGFydC1ncmlkbGluZXMRY2hhcnQtaW5zZXJ0LWxpbmUXY2hhcnQtc3dpdGNoLXJvdy1jb2x1bW4KY2hhcnQtYXhlcwtjaGFydC1saW5lcxFjaGFydC1heGlzLXRpdGxlcwtjaGFydC10aXRsZRBjaGFydC1pbnNlcnQtcGllEWNoYXJ0LWRhdGEtbGFiZWxzJGNoYXJ0LWF4aXMtdGl0bGVzLXByaW1hcnktaG9yaXpvbnRhbBFjaGFydC1sZWdlbmQtbm9uZRJjaGFydC1sZWdlbmQtcmlnaHQcY2hhcnQtcHJpbWFyeS1taW5vci12ZXJ0aWNhbBtjaGFydC1heGVzLXByaW1hcnktdmVydGljYWwYY2hhcnQtZGF0YS1sYWJlbHMtY2VudGVyFmNoYXJ0LWRhdGEtbGFiZWxzLW5vbmUcY2hhcnQtcHJpbWFyeS1tYWpvci12ZXJ0aWNhbB1jaGFydC1heGVzLXByaW1hcnktaG9yaXpvbnRhbBBjaGFydC1sZWdlbmQtdG9wHmNoYXJ0LXByaW1hcnktbWlub3ItaG9yaXpvbnRhbB5jaGFydC1wcmltYXJ5LW1ham9yLWhvcml6b250YWwTY2hhcnQtbGVnZW5kLWJvdHRvbR1jaGFydC1kYXRhLWxhYmVscy1vdXRzaWRlLWVuZCJjaGFydC1heGlzLXRpdGxlcy1wcmltYXJ5LXZlcnRpY2FsEWNoYXJ0LWxlZ2VuZC1sZWZ0HWNoYXJ0LWRhdGEtbGFiZWxzLWluc2lkZS1iYXNlHGNoYXJ0LWRhdGEtbGFiZWxzLWluc2lkZS1lbmQQY2hhcnQtdGl0bGUtbm9uZRxjaGFydC10aXRsZS1jZW50ZXJlZC1vdmVybGF5FGNoYXJ0LTJkLXN0YWNrZWQtYmFyFWNoYXJ0LTJkLXN0YWNrZWQtbGluZQtjaGFydC1kb251dA5jaGFydC0yZC1waWUtMhljaGFydC0yZC1jbHVzdGVyZWQtY29sdW1uIWNoYXJ0LTJkLTEwMC1wZXJjZW50LXN0YWNrZWQtYXJlYRZjaGFydC0yZC1jbHVzdGVyZWQtYmFyIGNoYXJ0LTJkLTEwMC1wZXJjZW50LXN0YWNrZWQtYmFyDWNoYXJ0LTJkLWxpbmUjY2hhcnQtMmQtMTAwLXBlcmNlbnQtc3RhY2tlZC1jb2x1bW4hY2hhcnQtMmQtMTAwLXBlcmNlbnQtc3RhY2tlZC1saW5lFWNoYXJ0LTJkLXN0YWNrZWQtYXJlYRBjaGFydC1pbnNlcnQtYmFyDWNoYXJ0LTJkLWFyZWETbW9yZS1zY2F0dGVyLWNoYXJ0cxdjaGFydC0yZC1zdGFja2VkLWNvbHVtbg50aW1lbGluZS1tb250aAlkcmFnLWZpbGwMY2lyY2xlLWNsb3NlBnJlc2l6ZQ9jaGV2cm9uLXVwLWZpbGwEaG9tZQlzb3J0aW5nLTMRY2hldnJvbi1sZWZ0LWZpbGwSY2hldnJvbi1yaWdodC1maWxsFGludGVybWVkaWF0ZS1zdGF0ZS0yCHNldHRpbmdzC2NoZWNrLXNtYWxsC3RhYmxlLW1lcmdlDHRhYmxlLW5lc3RlZBB0YWJsZS1pbnNlcnQtcm93E3RhYmxlLWluc2VydC1jb2x1bW4VdGFibGUtb3ZlcndyaXRlLWNlbGxzCWV5ZS1zbGFzaA1nYW50dC1ncmlwcGVyDWJyaW5nLXRvLXZpZXcPYnJpbmctdG8tY2VudGVyB3dhcm5pbmcNY3JpdGljYWwtcGF0aBJib3JkZXItZGlhZ29uYWwtdXAUYm9yZGVyLWRpYWdvbmFsLWRvd24NYm9yZGVyLWN1c3RvbQ1ib3JkZXItbm9uZS0xCmJvcmRlci1ib3gPYm9yZGVyLXNoYWRvdy0xD2JvcmRlci1zaGFkb3ctMgVhdWRpbwV2aWRlbwAA) 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";
        }
    }
}
/*! Accordion's bootstrap5 theme wise override definitions and variables */
// sass-lint:disable-all
$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: 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: 22px;
$acrdn-bgr-icon-font-size: 20px !default;
$acrdn-icon-font-size: 18px !default;
$acrdn-selected-header-font-color: $primary !default;

// Header, Nested header and RTL mode Padding
$acrdn-nest-nrml-header-padding: 8px 0 8px 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;

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

// 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-icon-disable-color: $icon-color-disabled;
$acrdn-text-disable-color: $content-text-color-disabled;
$acrdn-default-border: $acrdn-selected-border-color !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;

                @if $acrdn-skin == 'bootstrap4' {
                    line-height: $acrdn-bgr-item-header-content-line-height;
                    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 {
                        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;

                    @if $acrdn-skin == 'bootstrap4' or $acrdn-skin == 'tailwind' or $acrdn-skin == 'bootstrap5' {
                        font-size: $acrdn-bgr-arrow-icon-font-size;
                    }
                }

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

                    @if $acrdn-skin == 'bootstrap4' or $acrdn-skin == 'tailwind' or $acrdn-skin == 'bootstrap5' {
                        .e-acrdn-icons.e-icons {
                            font-size: $acrdn-bgr-icon-font-size;
                        }
                    }
                }
            }

            .e-acrdn-panel .e-acrdn-content {
                padding: $acrdn-bgr-content-padding;

                @if $acrdn-skin == 'bootstrap4' {
                    font-size: $acrdn-bgr-item-header-content-font-size;
                    line-height: $acrdn-bgr-item-header-content-line-height;
                }

                @if $acrdn-skin == 'highcontrast' {
                    font-size: 13px;
                }
            }
        }

        &.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 {

            @if $acrdn-skin == 'material' {
                &.e-select.e-selected:first-child {
                    border-top: 0;
                }

                &.e-select.e-selected:last-child {
                    border-bottom: 0;
                }
            }

            @if $acrdn-skin == 'bootstrap' {
                border-radius: 4px;
                margin-top: 5px;

                .nested .e-acrdn-item + .e-acrdn-item {
                    margin-top: 0;
                }

                &:not(.e-select) {
                    margin-top: 5px;
                }

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

                &:not(.e-select) + .e-acrdn-item.e-select {
                    margin-top: 5px;
                }
            }

            .e-acrdn-panel.e-nested .e-acrdn-header {

                @if $acrdn-skin == 'bootstrap' {
                    border: 0;
                }
            }

            @if $acrdn-skin == 'bootstrap' {
                .e-acrdn-panel.e-nested .e-acrdn-item.e-select {
                    margin: 2px;
                }
            }

            > .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 {
            @if $acrdn-skin != 'bootstrap5' {
                overflow: hidden;
            }

            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 {
                            @if $acrdn-skin == 'bootstrap' or $acrdn-skin == 'bootstrap4' {
                                text-decoration: underline;
                            }
                        }
                    }
                }
            }

            .e-acrdn-header {
                @if $acrdn-skin == 'bootstrap' {
                    border-radius: 4px;
                }

                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;

                @if $acrdn-skin == 'bootstrap5' {
                    margin-bottom: 4px;
                }

                > * {
                    display: inline-block;
                }

                @if $acrdn-skin == 'bootstrap4' {
                    .e-acrdn-header-content {
                        line-height: $acrdn-content-line-height;
                    }
                }

                .e-toggle-icon {
                    @if $acrdn-skin == 'bootstrap' {
                        display: none;
                    }
                    @else {
                        display: table;
                    }

                    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;

                    @if $acrdn-skin == 'bootstrap4' {
                        .e-acrdn-icons.e-icons {
                            font-size: $acrdn-bgr-arrow-icon-font-size;
                        }
                    }

                    @if $acrdn-skin == 'tailwind' or $acrdn-skin == 'bootstrap5' {
                        .e-acrdn-icons.e-icons {
                            font-size: $acrdn-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;
                    }

                    > .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 */
    // sass-lint:disable no-vendor-prefixes
    .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;

        @if ($acrdn-skin == 'bootstrap4' or $acrdn-skin == 'bootstrap5' or $acrdn-skin == 'FluentUI') {
            border-radius: $acrdn-border-radius;
        }

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

        .e-acrdn-item {
            @if $acrdn-skin == 'fabric' {
                border-bottom: 1px solid $acrdn-item-border-color;
                border-top: 1px solid $acrdn-item-border-color;
            }

            @if $acrdn-skin == 'bootstrap4' or $acrdn-skin == 'tailwind' {
                border-bottom: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
                border-radius: 4px 4px 0 0;

                &.e-select:last-child {
                    border-bottom: 0;
                    border-radius: 0 0 4px 4px;
                }
            }

            @if $acrdn-skin == 'bootstrap5' {
                border-bottom: $acrdn-border-size $acrdn-border-type $acrdn-default-border;

                &:first-child .e-acrdn-header:focus {
                    border-radius: 4px 4px 0 0;
                }

                &:last-child {
                    border-bottom: 0;

                    &:not(.e-expand-state) .e-acrdn-header:focus {
                        border-radius: 0 0 4px 4px;
                    }

                    &.e-selected .e-acrdn-header:focus {
                        border-radius: 0;
                    }
                }
            }

            &.e-item-focus {
                @if $acrdn-skin == 'fabric' {
                    border-bottom: 1px solid $acrdn-header-focus-bg;
                    border-top: 1px solid $acrdn-header-focus-bg;
                }

                @if $acrdn-skin == 'highcontrast' {
                    .e-acrdn-header:focus {
                        border-color: $acrdn-focus-hdr-focus-border-color;
                    }
                }
            }

            &.e-item-focus.e-select.e-selected.e-expand-state {
                @if $acrdn-skin == 'fabric' or $acrdn-skin == 'material' {
                    border-top: 1px solid $acrdn-selected-header-color;
                }

                @if $acrdn-skin == 'highcontrast' {
                    .e-acrdn-header:focus {
                        border: 2px dashed $acrdn-focus-exp-hdr-focus-border-color;
                    }

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

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

            &.e-item-focus.e-expand-state.e-select,
            &.e-item-focus.e-select.e-selected.e-expand-state {
                @if $acrdn-skin == 'material' {
                    border-color: $acrdn-header-focus-bg;
                }
            }

            &.e-expand-state.e-select {
                @if $acrdn-skin == 'fabric' or $acrdn-skin == 'material' {
                    border-bottom: 1px solid $acrdn-selected-header-color;
                    border-top: 1px solid $acrdn-selected-header-color;
                }
            }

            .e-acrdn-header {
                @if $acrdn-skin == 'fabric' {
                    border: 1px solid $acrdn-item-header-border-color;
                }
            }

            @if $acrdn-skin == 'bootstrap4' {
                &.e-overlay.e-select.e-expand-state {
                    .e-acrdn-header {
                        .e-icons,
                        .e-acrdn-header-content {
                            color: $acrdn-disable-color;
                        }
                    }
                }
            }

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

                @if $acrdn-skin == 'bootstrap4' {
                    opacity: $acrdn-opacity;
                }

                @if $acrdn-skin == 'highcontrast' or $acrdn-skin == 'bootstrap4' {
                    .e-acrdn-header {

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

                @if $acrdn-skin == 'tailwind' or $acrdn-skin == 'bootstrap5' {
                    &.e-overlay.e-select.e-expand-state {
                        .e-acrdn-header {

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

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

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

                &:focus {
                    @if $acrdn-skin == 'fabric' {
                        border: 1px solid $acrdn-item-exp-hdr-focus-border-color;
                    }
                    @else if $acrdn-skin == 'highcontrast' {
                        border: 2px dashed $acrdn-item-exp-hdr-focus-border-color;
                    }
                    @else {
                        background: $acrdn-header-focus-bg;
                    }
                }

                @if $acrdn-skin == 'FluentUI' {
                    &:hover {
                        background: $acrdn-header-hover-bg;
                    }

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

            .e-acrdn-panel.e-nested {

                @if $acrdn-skin == 'bootstrap4' or $acrdn-skin == 'tailwind' or $acrdn-skin == 'bootstrap5' {
                    .e-acrdn-content .e-acrdn-item:last-child {
                        border-bottom: $acrdn-border-size $acrdn-selected-border-type $acrdn-default-border;
                    }
                }

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

                @if $acrdn-skin == 'highcontrast' {
                    .e-expand-state {
                        > .e-icons,
                        > .e-acrdn-header-content {
                            color: $acrdn-nested-exp-color;
                        }
                    }
                }
            }

            &.e-select {

                @if $acrdn-skin == 'bootstrap' {
                    background: $acrdn-item-select-bg;
                    border: $acrdn-border-size solid $acrdn-default-border;
                }

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

                    @if $acrdn-skin == 'bootstrap4' {
                        background: $acrdn-item-panel-content-select-bg;
                        border-top: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
                    }

                    @if $acrdn-skin == 'highcontrast' {
                        background: $acrdn-selected-item-content-color;
                    }
                }

                @if $acrdn-skin == 'material' {
                    .e-acrdn-panel .e-acrdn-content .e-content-icon {
                        color: $acrdn-icon-color;
                    }
                }
            }

            .e-acrdn-header {

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

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

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

                &:focus {
                    @if $acrdn-skin == 'fabric' {
                        border: 1px solid $acrdn-item-exp-hdr-focus-border-color;
                    }
                    @else if $acrdn-skin == 'highcontrast' {
                        border-color: $acrdn-item-exp-hdr-focus-border-color;
                    }
                    @else if $acrdn-skin != 'bootstrap5' {
                        background: $acrdn-header-focus-bg;
                    }
                }
            }

            .e-acrdn-header {

                @if $acrdn-skin == 'highcontrast' {
                    border: 1px solid $acrdn-item-header-border-color;
                }

                &:hover {
                    @if $acrdn-skin == 'fabric' {
                        border: 1px solid $acrdn-header-hover-bg;
                    }

                    @if $acrdn-skin != 'bootstrap5' {
                        background: $acrdn-header-hover-bg;
                    }

                    @if $acrdn-skin == 'highcontrast' {
                        border-color: $acrdn-item-header-hover-border-color;
                    }
                }

                &:active {
                    @if $acrdn-skin == 'fabric' {
                        border: 1px solid $acrdn-header-active-bg;
                    }

                    background: $acrdn-header-active-bg;

                    @if $acrdn-skin == 'highcontrast' {
                        border-color: $acrdn-item-header-active-border-color;
                    }
                }

                &:focus {
                    @if ($acrdn-skin == 'fabric') {
                        border: 1px solid $acrdn-item-header-focus-border-color;
                    }

                    @if $acrdn-skin == 'bootstrap5' {
                        box-shadow: $shadow-focus-ring1;
                    }
                    @else {
                        background: $acrdn-header-focus-bg;

                        @if $acrdn-skin == 'FluentUI' {
                            border: 1px solid $acrdn-selected-header-font-color;
                        }
                    }

                    @if $acrdn-skin == 'highcontrast' {
                        background: $acrdn-item-header-focus-bg-color;
                        border: 2px dashed $acrdn-item-header-focus-border-color;

                        &:active {

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

            &.e-select {

                @if $acrdn-skin == 'bootstrap4' {
                    &.e-acrdn-item > .e-acrdn-header {
                        &:hover {
                            .e-icons,
                            .e-acrdn-header-content {
                                color: $acrdn-exp-hdr-hover-color;
                            }

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

                    &.e-selected > .e-acrdn-header {
                        background: $acrdn-selected-header-color;
                    }
                }

                &.e-selected.e-expand-state > .e-acrdn-header,
                &.e-expand-state > .e-acrdn-header {
                    @if $acrdn-skin == 'fabric' {
                        border: 1px solid $acrdn-selected-header-color;
                    }

                    @if $acrdn-skin != 'bootstrap5' {
                        background: $acrdn-selected-header-color;
                    }

                    @if $acrdn-skin == 'bootstrap4' {
                        &:hover {
                            .e-icons,
                            .e-acrdn-header-content {
                                color: $acrdn-exp-hdr-hover-color;
                            }

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

                    @if $acrdn-skin == 'highcontrast' {
                        background: $acrdn-exp-hdr-bg-color;
                        border-color: $acrdn-exp-hdr-border-color;

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

                        &:hover {
                            background: $acrdn-exp-hdr-hover-bg-color;
                            border-color: $acrdn-exp-hdr-hover-border-color;

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

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

                    @if $acrdn-skin != 'bootstrap5' {
                        > .e-toggle-icon {
                            color: $acrdn-selected-icon-color;
                        }

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

                &.e-expand-state > .e-acrdn-header:hover:focus {
                    @if $acrdn-skin == 'highcontrast' {
                        .e-icons,
                        .e-acrdn-header-content {
                            color: $acrdn-exp-hdr-hover-focus-color;
                        }
                    }
                }
            }

            &.e-select {
                @if $acrdn-skin == 'material' {
                    border-bottom: $acrdn-selected-border-size $acrdn-selected-border-type transparent;
                    border-top: $acrdn-selected-border-size $acrdn-selected-border-type transparent;

                    &.e-item-focus {
                        border-color: $acrdn-header-focus-bg;
                    }
                }

                @if $acrdn-skin == 'highcontrast' {
                    &.e-expand-state .e-acrdn-header:hover {
                        border-color: $acrdn-exp-hdr-hover-border-color;

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

            &.e-selected {
                @if $acrdn-skin == 'bootstrap' {
                    border: $acrdn-border-size solid $acrdn-default-border;
                }
                @else {
                    &.e-select {
                        border-bottom: $acrdn-selected-border-size $acrdn-selected-border-type $acrdn-selected-border-color;
                        border-top: $acrdn-selected-border-size $acrdn-selected-border-type $acrdn-selected-border-color;

                        @if $acrdn-skin == 'bootstrap4' or $acrdn-skin == 'tailwind' or $acrdn-skin == 'bootstrap5' {
                            border-bottom: $acrdn-border-size $acrdn-border-type $acrdn-default-border;

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

                @if $acrdn-skin == 'bootstrap5' {
                    > .e-acrdn-header {
                        background: $acrdn-header-focus-bg;
                        border-bottom: $acrdn-border-size $acrdn-border-type $acrdn-default-border;

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

                        &:focus {
                            box-shadow: $shadow-focus-ring1;
                        }
                    }
                }

                + .e-selected {
                    @if $acrdn-skin == 'bootstrap' {
                        border: $acrdn-border-size solid $acrdn-default-border;
                    }

                    @if $acrdn-skin == 'material' {
                        border-top: $acrdn-selected-border-size solid transparent;
                    }
                    @else {
                        border-top: $acrdn-selected-border-size none $acrdn-selected-border-color;
                    }
                }

                @if $acrdn-skin != 'bootstrap' {
                    .e-selected:last-child {
                        border-bottom: $acrdn-selected-border-size none $acrdn-selected-border-color;
                    }
                }

                @if $acrdn-skin == 'highcontrast' {
                    .e-acrdn-item.e-selected:not(.e-expand-state) {
                        > .e-acrdn-header .e-icons,
                        > .e-acrdn-header .e-acrdn-header-content {
                            color: $acrdn-nested-selected-item-hdr-color;
                        }
                    }

                    .e-acrdn-item.e-selected.e-expand-state {
                        > .e-acrdn-header .e-icons,
                        > .e-acrdn-header .e-acrdn-header-content {
                            color: $acrdn-nested-selected-exp-item-hdr-color;
                        }

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

                &.e-select > .e-acrdn-header {
                    @if $acrdn-skin == 'bootstrap' {
                        background: $acrdn-selected-header-color;
                        border: 0;
                        border-bottom: $acrdn-border-size solid $acrdn-default-border;
                        border-radius: 0;
                    }

                    @if $acrdn-skin == 'bootstrap4' {
                        border-radius: 4px;
                    }

                    @if $acrdn-skin == 'highcontrast' {

                        &:focus {
                            border: 2px dashed $acrdn-selected-hdr-focus-border-color;
                        }

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

                            .e-icons,
                            .e-acrdn-header-content {
                                color: $acrdn-selected-hdr-hover-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: 16px;
                line-height: 32px;
                padding-left: 0;
                text-indent: 16px;
            }

            #{if(&, '&', '*')} .e-list-group-item,
            #{if(&, '&', '*')} .e-fixed-head {
                font-size: 14px;
                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: 16px;
                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: 14px;
    }

    .e-bigger .e-input-group .e-control#{&}.e-dropdownlist ~ .e-ddl-icon {
        font-size: 16px;
    }

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

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

            #{if(&, '&', '*')} .e-input-group 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-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-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;
    }
    // sass-lint:disable no-vendor-prefixes
    .e-ddl input.e-input::-webkit-contacts-auto-fill-button {
        display: none;
        pointer-events: none;
        position: absolute;
        right: 0;
        visibility: hidden;
    }
    // sass-lint:enable no-vendor-prefixes

    .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' {
            border: 1px solid $ddl-default-border-color;
        }

        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;
            }
        }
    }
    // sass-lint:disable no-vendor-prefixes
    .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: 500 !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: 16px !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;
}
// sass-lint:disable no-vendor-prefixes
@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: 400;
    }

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

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

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

    .e-input.e-bigger#{$css}:focus,
    .e-bigger .e-input#{$css}:focus {
        @if $input-skin-name == 'material' {
            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' {
            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;
        }
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
        }
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
        }
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
        }
    }
    // sass-lint:disable no-vendor-prefixes
    .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' {
            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;
    }

    .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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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;
        }
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
        }
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
        }
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
        }
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
    }

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

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

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

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

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

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

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

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

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

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

    .e-input-group::before,
    .e-input-group.e-control-wrapper::before {
        @if $input-skin-name != 'material' {
            @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' {
            @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' {
            @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' {
            @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' {
            @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' {
            @include input-group-animation-right;
        }
    }

    .e-input-group::after,
    .e-input-group.e-control-wrapper::after {
        @if $input-skin-name != 'material' {
            @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') {
            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 {
        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 {
        margin-bottom: $input-child-bigger-margin-bottom;
        margin-right: $input-child-bigger-margin-right;
        margin-top: $input-child-bigger-margin-top;
    }

    .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 {
        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 {
        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 {
        margin-bottom: $input-child-small-margin-bottom;
        margin-right: $input-child-small-margin-right;
        margin-top: $input-child-small-margin-top;
    }

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

    .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' {
            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' {
            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' {
            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;
    }
    // sass-lint:disable no-vendor-prefixes
    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;
    }
    // sass-lint:disable no-vendor-prefixes
    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;
    }
    // sass-lint:disable no-vendor-prefixes
    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;
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
    }
    // sass-lint:disable no-vendor-prefixes
    input.e-input#{$css}:-moz-placeholder {
        font-style: $input-font-style;
        user-select: none;
    }
    // sass-lint:disable no-vendor-prefixes
    textarea.e-input#{$css}:-moz-placeholder {
        font-style: $input-font-style;
        user-select: none;
    }
    // sass-lint:disable no-vendor-prefixes
    .e-input-group input.e-input:-moz-placeholder {
        font-style: $input-font-style;
        user-select: none;
    }
    // sass-lint:disable no-vendor-prefixes
    .e-input-group textarea.e-input:-moz-placeholder {
        font-style: $input-font-style;
        user-select: none;
    }
    // sass-lint:disable no-vendor-prefixes
    .e-input-group.e-control-wrapper input.e-input:-moz-placeholder {
        font-style: $input-font-style;
        user-select: none;
    }
    // sass-lint:disable no-vendor-prefixes
    .e-input-group.e-control-wrapper textarea.e-input:-moz-placeholder {
        font-style: $input-font-style;
        user-select: none;
    }
    // sass-lint:disable no-vendor-prefixes
    input.e-input#{$css}:-moz-placeholder {
        font-style: $input-font-style;
        user-select: none;
    }
    // sass-lint:disable no-vendor-prefixes
    .e-input-group input.e-input:-moz-placeholder {
        font-style: $input-font-style;
        user-select: none;
    }
    // sass-lint:disable no-vendor-prefixes
    .e-input-group.e-control-wrapper input.e-input:-moz-placeholder {
        font-style: $input-font-style;
        user-select: none;
    }
    // sass-lint:disable no-vendor-prefixes
    textarea.e-input#{$css}:-moz-placeholder {
        font-style: $input-font-style;
        user-select: none;
    }
    // sass-lint:disable no-vendor-prefixes
    input.e-input#{$css}::-moz-placeholder {
        font-style: $input-font-style;
        user-select: none;
    }
    // sass-lint:disable no-vendor-prefixes
    textarea.e-input#{$css}::-moz-placeholder {
        font-style: $input-font-style;
        user-select: none;
    }
    // sass-lint:disable no-vendor-prefixes
    input.e-input#{$css}:-ms-input-placeholder {
        font-style: $input-font-style;
    }
    // sass-lint:disable no-vendor-prefixes
    textarea.e-input#{$css}:-ms-input-placeholder {
        font-style: $input-font-style;
    }
    // sass-lint:disable no-vendor-prefixes
    input.e-input#{$css}::-webkit-input-placeholder {
        font-style: $input-font-style;
        user-select: none;
    }
    // sass-lint:disable no-vendor-prefixes
    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' {
            @include input-sizing;
        }
    }

    input.e-input.e-bigger#{$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-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;
        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;
    }

    .e-float-input.e-input-group .e-clear-icon,
    .e-float-input.e-input-group.e-control-wrapper .e-clear-icon {
        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-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;
    }

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

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

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

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

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

    .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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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: 400;
        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%;
    }
    // sass-lint:disable no-vendor-prefixes
    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;
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
    }
    // sass-lint:disable no-vendor-prefixes
    .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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            min-height: $input-smaller-min-height;
        }
    }

    input.e-input#{$css},
    textarea.e-input#{$css} {
        @if $input-skin-name == 'material' {
            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' {
            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' {
            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' {
            width: calc(100% - 1px);
        }
    }

    .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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
    .e-outline.e-input-group.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
    .e-outline.e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
    .e-outline.e-float-input.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
    .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-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
    .e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
    .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),
    .e-outline.e-input-group.e-float-icon-left.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.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
        @if $input-skin-name == 'material' {
            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' {
            border: $input-group-border-width;
            border-width: $input-group-border-width;
            margin-left: $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' {
            margin: 9px $outline-input-icon-margin-right 9px $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;
        }
    }

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

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

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

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

    .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' {
            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' {
            margin: $outline-bigger-input-icon-padding $outline-bigger-input-icon-margin-left $outline-bigger-input-icon-padding $zero-value;
        }
    }

    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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            margin: $outline-bigger-small-group-icon-top $outline-small-bigger-icon-margin-left $outline-bigger-small-group-icon-bottom $zero-value;
        }
    }

    .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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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-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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            animation-name: slideTopUp;
        }
    }

    .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' {
            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' {
            animation-name: slideTopUp;
        }
    }

    .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' {
            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' {
            animation-name: slideTopUp;
        }
    }

    .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' {
            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' {
            animation-name: slideTopUp;
        }
    }

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

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

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

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

    .e-filled.e-float-input.e-input-group.e-small .e-input-group-icon,
    .e-small .e-filled.e-float-input.e-input-group .e-input-group-icon,
    .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
    .e-small .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
        @if $input-skin-name == 'material' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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;
        }
    }

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

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

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

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

    .e-filled.e-float-input textarea,
    .e-filled.e-float-input.e-control-wrapper textarea {
        @if $input-skin-name == 'material' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            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' {
            @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' {
            @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' {
            @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' {
            @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' {
            @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' {
            @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' {
            @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' {
            @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' {
            @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' {
            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' {
            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' {
            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;
    }
}




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

    .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;
    }
    // sass-lint:disable no-vendor-prefixes
    .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' {
            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;
    }
    // sass-lint:disable no-vendor-prefixes
    /*! 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;
        }

        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' {
            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' {
            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' {
            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' {
            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' {
            background: $input-error-color;
        }
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
        }
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
        }
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
        }
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
        }
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
        }
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
    }
    // sass-lint:disable no-vendor-prefixes
    input.e-input#{$css}:-moz-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    .e-input-group input.e-input:-moz-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    .e-input-group input.e-input:-moz-placeholder,
    .e-input-group.e-control-wrapper input.e-input:-moz-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    input.e-input#{$css}:-moz-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    .e-input-group input.e-input:-moz-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    .e-input-group.e-control-wrapper input.e-input:-moz-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    textarea.e-input#{$css}:-moz-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    .e-input-group textarea.e-input:-moz-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    .e-input-group.e-control-wrapper textarea.e-input:-moz-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    input.e-input#{$css}::-moz-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    .e-input-group input.e-input::-moz-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    .e-input-group.e-control-wrapper input.e-input::-moz-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    textarea.e-input#{$css}::-moz-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    .e-input-group textarea.e-input::-moz-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    .e-input-group.e-control-wrapper textarea.e-input::-moz-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    input.e-input#{$css}:-ms-input-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    .e-input-group input.e-input:-ms-input-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    .e-input-group.e-control-wrapper input.e-input:-ms-input-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    textarea.e-input#{$css}:-ms-input-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    .e-input-group.e-control-wrapper textarea.e-input:-ms-input-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    .e-input-group textarea.e-input:-ms-input-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    input.e-input#{$css}::-webkit-input-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    .e-input-group.e-control-wrapper input.e-input::-webkit-input-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    .e-input-group input.e-input::-webkit-input-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    textarea.e-input#{$css}::-webkit-input-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    .e-input-group textarea.e-input::-webkit-input-placeholder {
        color: $input-placeholder;
    }
    // sass-lint:disable no-vendor-prefixes
    .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' {
            @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' {
            @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' {
            @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' {
            @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' {
            @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' {
            @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' {
            @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' {
            @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' {
            @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' {
            @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' {
            @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' {
            @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' {
            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' {
            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' {
            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;
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
        }
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
        }
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
        }
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
        }
    }
    // sass-lint:disable no-vendor-prefixes
    .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' {
            border-color: $input-group-border-color-focus;
        }
    }
    // sass-lint:disable no-vendor-prefixes
    .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' {
            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;
        }
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
        }
    }
    // sass-lint:disable no-vendor-prefixes
    .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;
        }
    }
    // sass-lint:disable no-vendor-prefixes
    .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' {
            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' {
            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;
        }
    }
    // sass-lint:disable no-vendor-prefixes
    .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' {
            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' {
            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' {
            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' {
            @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' {
            @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' {
            @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;
        }
    }

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

  // sass-lint:disable no-vendor-prefixes
  input.e-filled.e-input#{$css}:-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled input.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .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' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  input.e-filled.e-input#{$css}:-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled input.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled.e-control-wrapper input.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  textarea.e-filled.e-input#{$css}:-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled textarea.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled.e-control-wrapper textarea.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  input.e-filled.e-input#{$css}::-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled input.e-input::-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled.e-control-wrapper input.e-input::-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  textarea.e-filled.e-input#{$css}::-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled textarea.e-input::-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled.e-control-wrapper textarea.e-input::-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  input.e-filled.e-input#{$css}:-ms-input-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled input.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled.e-control-wrapper input.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  textarea.e-filled.e-input#{$css}:-ms-input-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled.e-control-wrapper textarea.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group textarea.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' {
      color: $input-placeholder-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group textarea.e-input:-moz-placeholder {
    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' {
      color: $input-placeholder-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group .e-input:-ms-input-placeholder {
    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' {
      color: $input-placeholder-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  input.e-input#{$css}::-webkit-input-placeholder {
    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' {
      color: $input-placeholder-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled textarea.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  input.e-filled.e-input#{$css}::-webkit-input-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled.e-control-wrapper input.e-input::-webkit-input-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled input.e-input::-webkit-input-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  textarea.e-filled.e-input#{$css}::-webkit-input-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled textarea.e-input::-webkit-input-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-float-label-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled.e-control-wrapper textarea.e-input::-webkit-input-placeholder {
    @if $input-skin-name == 'material' {
      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' {
      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' {
      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' {
      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;
    }
  }

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

  // sass-lint:disable no-vendor-prefixes
  input.e-filled.e-disabled.e-input#{$css}:-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled.e-disabled input.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .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' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  input.e-filled.e-disabled.e-input#{$css}:-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled.e-disabled input.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  textarea.e-filled.e-disabled.e-input#{$css}:-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled.e-disabled textarea.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled.e-disabled.e-control-wrapper textarea.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  input.e-filled.e-disabled.e-input#{$css}::-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled.e-disabled input.e-input::-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input::-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  textarea.e-filled.e-disabled.e-input#{$css}::-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled.e-disabled textarea.e-input::-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled.e-disabled.e-control-wrapper textarea.e-input::-moz-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  input.e-filled.e-disabled.e-input#{$css}:-ms-input-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled.e-disabled input.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  textarea.e-filled.e-disabled.e-input#{$css}:-ms-input-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled.e-disabled.e-control-wrapper textarea.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled.e-disabled textarea.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  input.e-filled.e-disabled.e-input#{$css}::-webkit-input-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input::-webkit-input-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled.e-disabled input.e-input::-webkit-input-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  textarea.e-filled.e-disabled.e-input#{$css}::-webkit-input-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled.e-disabled textarea.e-input::-webkit-input-placeholder {
    @if $input-skin-name == 'material' {
      color: $filled-input-disabled-font-color;
    }
  }

  // sass-lint:disable no-vendor-prefixes
  .e-input-group.e-filled.e-disabled.e-control-wrapper textarea.e-input::-webkit-input-placeholder {
    @if $input-skin-name == 'material' {
      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' {
      @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' {
      @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' {
      @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' {
      @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' {
      @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' {
      @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' {
      @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' {
      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' {
      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' {
      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' {
      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' {
      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' {
      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' {
      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' {
      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' {
      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' {
      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' {
      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' {
      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' {
      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' {
      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' {
      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' {
      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' {
      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' {
      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' {
      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' {
      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' {
      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' {
      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' {
      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' {
      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' {
      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' {
      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' {
      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' {
      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' {
      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';
        }
    }
}


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

$skin-name: 'bootstrap5';
$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;
}

// sass-lint:disable no-vendor-prefixes
@keyframes material-spinner-rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

// sass-lint:disable no-vendor-prefixes
@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 {
            // sass-lint:disable no-vendor-prefixes
            .e-spinner-inner {
                -webkit-transform: translateX(0%) translateY(-50%);
                left: 0;
                padding-left: $spin-padding;
                transform: translateX(0%) translateY(-50%);
            }
        }

        &.e-spin-right {
            // sass-lint:disable no-vendor-prefixes
            .e-spinner-inner {
                -webkit-transform: translateX(-100%) translateY(-50%);
                left: 100%;
                padding-right: $spin-padding;
                transform: translateX(-100%) translateY(-50%);
            }
        }

        &.e-spin-center {
            // sass-lint:disable no-vendor-prefixes
            .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;
        }
        // sass-lint:disable no-vendor-prefixes
        .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 {
                @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 {
                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: 14px !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: 18px !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;
$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;
$ddl-list-active-font-color: $content-text-color-selected !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 {
        color: $ddl-nodata-font-color;
        cursor: default;
        font-family: $ddl-list-font-family;
        font-size: 14px;
        padding: 14px 16px;
        text-align: center;
    }

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

        @at-root {
            #{if(&, '&', '*')} .e-list-item {
                // sass-lint:disable no-vendor-prefixes
                -webkit-tap-highlight-color: $ddl-list-tap-color;
                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;
                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(&, '&', '*')} .e-list-group-item,
            .e-fixed-head {
                background-color: $ddl-list-bg-color;
                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(&, '&', '*')} .e-list-item.e-active,
            #{if(&, '&', '*')} .e-list-item.e-active.e-hover {
                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 {
                background-color: $ddl-list-hover-bg-color;
                border-color: $ddl-list-hover-border-color;
                color: $ddl-list-hover-font-color;
            }

            #{if(&, '&', '*')} .e-list-item:last-child {
                border-bottom: $ddl-last-child-bottom-border;
            }

            #{if(&, '&', '*')} .e-list-item.e-item-focus {
                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 {
        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 {
        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 {
        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 {
        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 {
        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;
        }
    }
}

//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') {
            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-xsmall {
            font-size: $avatar-xsmall-font-size;

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



// layout variable
// 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: 500 !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 ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'tailwind-dark' or $skin-name == '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 ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
                padding: $badge-pill-padding;
            }
        }

        &.e-badge-ghost {
            @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == '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 ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
                    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 ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == '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 ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
            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 ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
                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 ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' ) {
                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 ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
                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) {
            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 {
                background-color: darken($color: $badge-primary-bg-color, $amount: 10%);
            }
        }

        &.e-badge-secondary[href]:not(.e-badge-ghost) {
            &:hover {
                background-color: darken($color: $badge-secondary-bg-color, $amount: 10%);
            }
        }

        &.e-badge-success[href]:not(.e-badge-ghost) {
            &:hover {
                background-color: darken($color: $badge-success-bg-color, $amount: 10%);
            }
        }

        &.e-badge-danger[href]:not(.e-badge-ghost) {
            &:hover {
                background-color: darken($color: $badge-danger-bg-color, $amount: 10%);
            }
        }

        &.e-badge-warning[href]:not(.e-badge-ghost) {
            &:hover {
                background-color: darken($color: $badge-warning-bg-color, $amount: 10%);
            }
        }

        &.e-badge-info[href]:not(.e-badge-ghost) {
            &:hover {
                background-color: darken($color: $badge-info-bg-color, $amount: 10%);
            }
        }

        &.e-badge-light[href]:not(.e-badge-ghost) {
            &:hover {
                background-color: darken($color: $badge-light-bg-color, $amount: 10%);
            }
        }

        &.e-badge-dark[href]:not(.e-badge-ghost) {
            &:hover {
                background-color: darken($color: $badge-dark-bg-color, $amount: 10%);
            }
        }

        &.e-badge-primary[href].e-badge-ghost {
            &:hover {
                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 {
                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 {
                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 {
                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 {
                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 {
                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 {
                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 {
                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 ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
                    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 ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == '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 ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == '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 ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == '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 ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == '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 ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
                    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;
            }
        }
    }
}

//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: 16px !default;
$btn-small-round-font-size: 14px !default;
$btn-bigger-round-font-size: 22px !default;
$btn-bigger-small-round-font-size: 18px !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 {
        // sass-lint:disable no-vendor-prefixes
        -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;

        @at-root {
            &:disabled {
                cursor: default;
            }

            &:hover,
            &:focus {
                text-decoration: none;
            }
            // sass-lint:disable no-vendor-prefixes
            &::-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;
            }

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

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

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

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

        &.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 == 'tailwind-dark' {
                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-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;
            }

            &.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' {
                    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-color: $btn-focus-bgcolor;
    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-color: $btn-active-bgcolor;
    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-color: $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') {
        box-shadow: $btn-primary-focus-box-shadow;
    }
    @else {
        box-shadow: $btn-hover-focus-box-shadow;
    }
}

@mixin primary-active {
    background-color: $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-color: $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 {
        box-shadow: $btn-hover-focus-box-shadow;
    }
}

@mixin outline-active {
    @if $skin-name == 'bootstrap4' {
        background-color: $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-color: $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;
    }
}

@mixin outline-primary-active {
    @if $skin-name == 'bootstrap4' {
        background-color: $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-color: $btn-primary-bgcolor;
    }
    @else {
        background-color: $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;
}

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

@mixin outline-success-active {
    @if $skin-name == 'bootstrap4' {
        background-color: $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-color: $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;
}

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

@mixin outline-info-active {
    @if $skin-name == 'bootstrap4' {
        background-color: $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-color: $btn-info-bgcolor;
    }
    @else {
        background-color: $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;
}

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

@mixin outline-warning-active {
    @if $skin-name == 'bootstrap4' {
        background-color: $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-color: $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;
}

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

@mixin outline-danger-active {
    @if $skin-name == 'bootstrap4' {
        background-color: $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-color: $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;
}

@mixin outline-disabled {
    background-color: $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-color: $btn-outline-primary-disabled-border-color;
    }
    @else {
        background-color: $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-color: $btn-outline-success-disabled-border-color;
    }
    @else {
        background-color: $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-color: $btn-info-disabled-border-color;
    }
    @else {
        background-color: $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-color: $btn-outline-warning-disabled-border-color;
    }
    @else {
        background-color: $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-color: $btn-outline-danger-disabled-border-color;
    }
    @else {
        background-color: $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-color: $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') {
        box-shadow: $btn-success-focus-box-shadow;
    }
    @else {
        box-shadow: $btn-hover-focus-box-shadow;
    }
}

@mixin success-active {
    background-color: $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-color: $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-color: $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-color: $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') {
        box-shadow: $btn-warning-focus-box-shadow;
    }
    @else {
        box-shadow: $btn-hover-focus-box-shadow;
    }
}

@mixin warning-active {
    background-color: $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-color: $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') {
        box-shadow: $btn-danger-focus-box-shadow;
    }
    @else {
        box-shadow: $btn-hover-focus-box-shadow;
    }
}

@mixin danger-active {
    background-color: $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-color: $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-color: transparent;
        border-color: transparent;
    }
}

@mixin success-disabled {
    background-color: $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-color: $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-color: $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-color: $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-color: $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 */
    // sass-lint:disable no-vendor-prefixes
    .e-btn,
    .e-css.e-btn {
        -webkit-tap-highlight-color: transparent;
        background-color: $btn-bgcolor;
        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-color: $btn-hover-bgcolor;
                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; // sass-lint:disable-line no-important
                }
            }

            &:focus-visible { // only for keybord
                @if $skin-name == 'FluentUI' {
                    background-color: $btn-bgcolor;
                }
            }

            &:active {
                @include button-active;
            }

            &.e-active {
                background-color: $btn-active-bgcolor;
                border-color: $btn-active-border-color;

                @if $skin-name != 'bootstrap5' {
                    box-shadow: $btn-active-box-shadow;
                }

                color: $btn-active-color;
            }

            &:disabled {
                background-color: $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-color: $btn-ripple-bgcolor;
            }

            &.e-round {
                background-color: $btn-round-bgcolor;
                border-color: $btn-round-border-color;
                color: $btn-round-color;

                &:hover {
                    background-color: $btn-round-hover-bgcolor;
                    border-color: $btn-round-hover-border-color;
                    color: $btn-round-hover-color;
                }

                &:focus {
                    background-color: $btn-focus-bgcolor;
                    border-color: $btn-focus-border-color;

                    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
                        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; // sass-lint:disable-line no-important
                    }
                }

                &:focus-visible { // only for keybord
                    @if $skin-name == 'FluentUI' {
                        background-color: $btn-bgcolor;
                    }
                }

                &:active {
                    background-color: $btn-active-bgcolor;
                    border-color: $btn-active-border-color;

                    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
                        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 {
                    background-color: $btn-disabled-bgcolor;
                    border-color: $btn-disabled-border-color;
                    box-shadow: $btn-flat-box-shadow;
                    color: $btn-disabled-color;
                }

                &.e-primary {
                    &:focus {
                        outline: $btn-focus-outline-round;
                    }

                    &:focus:not(:focus-visible) { //mouse click
                        @if $skin-name == 'FluentUI' {
                            outline: none !important; // sass-lint:disable-line no-important
                        }
                    }

                    &:focus-visible { // only for keybord
                        @if $skin-name == 'FluentUI' {
                            background-color: $btn-primary-bgcolor;
                        }
                    }
                }

                &.e-success {
                    &:focus {
                        outline: $btn-focus-outline-round;
                    }

                    &:focus:not(:focus-visible) { //mouse click
                        @if $skin-name == 'FluentUI' {
                            outline: none !important; // sass-lint:disable-line no-important
                        }
                    }

                    &:focus-visible { // only for keybord
                        @if $skin-name == 'FluentUI' {
                            background-color: $btn-success-bgcolor;
                        }
                    }
                }

                &.e-info {
                    &:focus {
                        outline: $btn-focus-outline-round;
                    }

                    &:focus:not(:focus-visible) { //mouse click
                        @if $skin-name == 'FluentUI' {
                            outline: none !important; // sass-lint:disable-line no-important
                        }
                    }

                    &:focus-visible { // only for keybord
                        @if $skin-name == 'FluentUI' {
                            background-color: $btn-info-bgcolor;
                        }
                    }
                }

                &.e-warning {
                    &:focus {
                        outline: $btn-focus-outline-round;
                    }

                    &:focus:not(:focus-visible) { //mouse click
                        @if $skin-name == 'FluentUI' {
                            outline: none !important; // sass-lint:disable-line no-important
                        }
                    }

                    &:focus-visible { // only for keybord
                        @if $skin-name == 'FluentUI' {
                            background-color: $btn-warning-bgcolor;
                        }
                    }
                }

                &.e-danger {
                    &:focus {
                        outline: $btn-focus-outline-round;
                    }

                    &:focus:not(:focus-visible) { //mouse click
                        @if $skin-name == 'FluentUI' {
                            outline: none !important; // sass-lint:disable-line no-important
                        }
                    }

                    &:focus-visible { // only for keybord
                        @if $skin-name == 'FluentUI' {
                            background-color: $btn-danger-bgcolor;
                        }
                    }
                }
            }

            &.e-primary {
                background-color: $btn-primary-bgcolor;
                border-color: $btn-primary-border-color;
                color: $btn-primary-color;

                &:hover {
                    background-color: $btn-primary-hover-bgcolor;
                    border-color: $btn-primary-hover-border-color;
                    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; // sass-lint:disable-line no-important
                    }
                }

                &:focus-visible { // only for keybord
                    @if $skin-name == 'FluentUI' {
                        background-color: $btn-primary-bgcolor;
                    }
                }

                &:active {
                    @include primary-active;
                }

                &.e-active {
                    background-color: $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 {
                    @include primary-disabled;
                }

                & .e-ripple-element {
                    background-color: $btn-ripple-primary-bgcolor;
                }
            }

            &.e-success {
                background-color: $btn-success-bgcolor;
                border-color: $btn-success-border-color;
                color: $btn-success-color;

                &:hover {
                    background-color: $btn-success-hover-bgcolor;
                    border-color: $btn-success-hover-border-color;
                    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; // sass-lint:disable-line no-important
                    }
                }

                &:focus-visible { // only for keybord
                    @if $skin-name == 'FluentUI' {
                        background-color: $btn-success-bgcolor;
                    }
                }

                &:active,
                &.e-active {
                    @include success-active;
                }

                &:disabled {
                    @include success-disabled;
                }

                & .e-ripple-element {
                    background-color: $btn-ripple-success-bgcolor;
                }
            }

            &.e-info {
                background-color: $btn-info-bgcolor;
                border-color: $btn-info-border-color;
                color: $btn-info-color;

                &:hover {
                    background-color: $btn-info-hover-bgcolor;
                    border-color: $btn-info-hover-border-color;
                    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; // sass-lint:disable-line no-important
                    }
                }

                &:focus-visible { // only for keybord
                    @if $skin-name == 'FluentUI' {
                        background-color: $btn-info-bgcolor;
                    }
                }

                &:active,
                &.e-active {
                    @include info-active;
                }

                &:disabled {
                    @include info-disabled;
                }

                & .e-ripple-element {
                    background-color: $btn-ripple-info-bgcolor;
                }
            }

            &.e-warning {
                background-color: $btn-warning-bgcolor;
                border-color: $btn-warning-border-color;
                color: $btn-warning-color;

                &:hover {
                    background-color: $btn-warning-hover-bgcolor;
                    border-color: $btn-warning-hover-border-color;
                    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; // sass-lint:disable-line no-important
                    }
                }

                &:focus-visible { // only for keybord
                    @if $skin-name == 'FluentUI' {
                        background-color: $btn-warning-bgcolor;
                    }
                }

                &:active,
                &.e-active {
                    @include warning-active;
                }

                &:disabled {
                    @include warning-disabled;
                }

                & .e-ripple-element {
                    background-color: $btn-ripple-warning-bgcolor;
                }
            }

            &.e-danger {
                background-color: $btn-danger-bgcolor;
                border-color: $btn-danger-border-color;
                color: $btn-danger-color;

                &:hover {
                    background-color: $btn-danger-hover-bgcolor;
                    border-color: $btn-danger-hover-border-color;
                    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; // sass-lint:disable-line no-important
                    }
                }

                &:focus-visible { // only for keybord
                    @if $skin-name == 'FluentUI' {
                        background-color: $btn-danger-bgcolor;
                    }
                }

                &:active {
                    @include danger-active;
                }

                &.e-active {
                    background-color: $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 {
                    @include danger-disabled;
                }

                & .e-ripple-element {
                    background-color: $btn-ripple-danger-bgcolor;
                }
            }

            &.e-flat {
                background-color: $btn-flat-bgcolor;
                border-color: $btn-flat-border-color;
                box-shadow: $btn-flat-box-shadow;
                color: $btn-flat-color;

                &:hover {
                    background-color: $btn-flat-hover-bgcolor;
                    border-color: $btn-flat-hover-border-color;
                    box-shadow: $btn-flat-box-shadow;
                    color: $btn-flat-hover-color;
                }

                &:focus {
                    background-color: $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 == 'tailwind-dark' 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; // sass-lint:disable-line no-important
                    }
                }

                &:active,
                &.e-active {
                    background-color: $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 {
                    background-color: $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-color: $btn-ripple-flat-bgcolor;
                }

                &.e-primary {
                    background-color: $btn-flat-primary-bgcolor;
                    border-color: $btn-flat-primary-border-color;
                    color: $btn-flat-primary-color;

                    &:hover {
                        background-color: $btn-flat-primary-hover-bgcolor;
                        border-color: $btn-flat-primary-hover-border-color;
                        color: $btn-flat-primary-hover-color;
                    }

                    &:focus {
                        background-color: $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' or $skin-name == 'tailwind-dark') {
                            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; // sass-lint:disable-line no-important
                        }
                    }

                    &:active,
                    &.e-active {
                        background-color: $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 {
                        background-color: $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-color: $btn-ripple-flat-primary-bgcolor;
                    }
                }

                &.e-success {
                    background-color: $btn-flat-success-bgcolor;
                    border-color: $btn-flat-success-border-color;
                    color: $btn-flat-success-color;

                    &:hover {
                        background-color: $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-color: $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' or $skin-name == 'tailwind-dark') {
                            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; // sass-lint:disable-line no-important
                        }
                    }

                    &:active,
                    &.e-active {
                        background-color: $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 {
                        background-color: $btn-flat-success-disabled-bgcolor;
                        border-color: $btn-flat-success-disabled-border-color;
                        color: $btn-flat-success-disabled-color;
                    }

                    & .e-ripple-element {
                        background-color: $btn-ripple-flat-success-bgcolor;
                    }
                }

                &.e-info {
                    background-color: $btn-flat-info-bgcolor;
                    border-color: $btn-flat-info-border-color;
                    color: $btn-flat-info-color;

                    &:hover {
                        background-color: $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-color: $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' 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-flat-box-shadow;
                        }
                    }

                    &:focus:not(:focus-visible) { //mouse click
                        @if $skin-name == 'FluentUI' {
                            outline: none !important; // sass-lint:disable-line no-important
                        }
                    }

                    &:active,
                    &.e-active {
                        background-color: $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 {
                        background-color: $btn-flat-info-disabled-bgcolor;
                        border-color: $btn-flat-info-disabled-border-color;
                        color: $btn-flat-info-disabled-color;
                    }

                    & .e-ripple-element {
                        background-color: $btn-ripple-flat-info-bgcolor;
                    }
                }

                &.e-warning {
                    background-color: $btn-flat-warning-bgcolor;
                    border-color: $btn-flat-warning-border-color;
                    color: $btn-flat-warning-color;

                    &:hover {
                        background-color: $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-color: $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' or $skin-name == 'tailwind-dark') {
                            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; // sass-lint:disable-line no-important
                        }
                    }

                    &:active,
                    &.e-active {
                        background-color: $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 {
                        background-color: $btn-flat-warning-disabled-bgcolor;
                        border-color: $btn-flat-warning-disabled-border-color;
                        color: $btn-flat-warning-disabled-color;
                    }

                    & .e-ripple-element {
                        background-color: $btn-ripple-flat-warning-bgcolor;
                    }
                }

                &.e-danger {
                    background-color: $btn-flat-danger-bgcolor;
                    border-color: $btn-flat-danger-border-color;
                    color: $btn-flat-danger-color;

                    &:hover {
                        background-color: $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-color: $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' or $skin-name == 'tailwind-dark') {
                            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; // sass-lint:disable-line no-important
                        }
                    }

                    &:active,
                    &.e-active {
                        background-color: $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 {
                        background-color: $btn-flat-danger-disabled-bgcolor;
                        border-color: $btn-flat-danger-disabled-border-color;
                        color: $btn-flat-danger-disabled-color;
                    }

                    & .e-ripple-element {
                        background-color: $btn-ripple-flat-danger-bgcolor;
                    }
                }
            }

            &.e-outline {
                background-color: $btn-outline-bgcolor;
                border-color: $btn-outline-border-color;
                box-shadow: $btn-flat-box-shadow;
                color: $btn-outline-color;

                &:hover {
                    @if $skin-name == 'bootstrap4' {
                        background-color: $btn-bgcolor;
                    }
                    @else {
                        background-color: $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; // sass-lint:disable-line no-important
                    }
                }

                &:focus-visible { // only for keybord
                    @if $skin-name == 'FluentUI' {
                        background-color: $btn-outline-bgcolor;
                    }
                }

                &:active,
                &.e-active {
                    @include outline-active;
                }

                &:disabled {
                    @include outline-disabled;
                }

                &.e-primary {
                    background-color: $btn-outline-bgcolor;
                    border-color: $btn-outline-primary-color;
                    color: $btn-outline-primary-color;

                    &:hover {
                        @if $skin-name == 'bootstrap4' {
                            background-color: $btn-primary-bgcolor;
                        }
                        @else {
                            background-color: $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; // sass-lint:disable-line no-important // sass-lint:disable-line no-important
                        }
                    }

                    &:focus-visible { // only for keybord
                        @if $skin-name == 'FluentUI' {
                            background-color: $btn-outline-bgcolor;
                        }
                    }

                    &:active,
                    &.e-active {
                        @include outline-primary-active;
                    }

                    &:disabled {
                        @include outline-primary-disabled;
                    }
                }

                &.e-success {
                    background-color: $btn-outline-bgcolor;

                    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
                        border-color: $success-outline;
                        color: $success-outline;
                    }
                    @else {
                        border-color: $btn-success-bgcolor;
                        color: $btn-success-bgcolor;
                    }

                    &:hover {
                        @if $skin-name == 'bootstrap4' {
                            background-color: $btn-success-bgcolor;
                        }
                        @else {
                            background-color: $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; // sass-lint:disable-line no-important
                        }
                    }

                    &:focus-visible { // only for keybord
                        @if $skin-name == 'FluentUI' {
                            background-color: $btn-outline-bgcolor;
                        }
                    }

                    &:active,
                    &.e-active {
                        @include outline-success-active;
                    }

                    &:disabled {
                        @include outline-success-disabled;
                    }
                }

                &.e-info {
                    background-color: $btn-outline-bgcolor;

                    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
                        border-color: $info-outline;
                        color: $info-outline;
                    }
                    @else {
                        border-color: $btn-info-bgcolor;
                        color: $btn-info-bgcolor;
                    }

                    &:hover {
                        @if $skin-name == 'bootstrap4' {
                            background-color: $btn-info-bgcolor;
                        }
                        @else {
                            background-color: $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; // sass-lint:disable-line no-important
                        }
                    }

                    &:focus-visible { // only for keybord
                        @if $skin-name == 'FluentUI' {
                            background-color: $btn-outline-bgcolor;
                        }
                    }

                    &:active,
                    &.e-active {
                        @include outline-info-active;
                    }

                    &:disabled {
                        @include outline-info-disabled;
                    }
                }

                &.e-warning {
                    background-color: $btn-outline-bgcolor;

                    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
                        border-color: $warning-outline;
                        color: $warning-outline;
                    }
                    @else {
                        border-color: $btn-warning-bgcolor;
                        color: $btn-warning-bgcolor;
                    }

                    &:hover {
                        @if $skin-name == 'bootstrap4' {
                            background-color: $btn-warning-bgcolor;
                        }
                        @else {
                            background-color: $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; // sass-lint:disable-line no-important
                        }
                    }

                    &:focus-visible { // only for keybord
                        @if $skin-name == 'FluentUI' {
                            background-color: $btn-outline-bgcolor;
                        }
                    }

                    &:active,
                    &.e-active {
                        @include outline-warning-active;
                    }

                    &:disabled {
                        @include outline-warning-disabled;
                    }
                }

                &.e-danger {
                    background-color: $btn-outline-bgcolor;

                    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
                        border-color: $danger-outline;
                        color: $danger-outline;
                    }
                    @else {
                        border-color: $btn-danger-bgcolor;
                        color: $btn-danger-bgcolor;
                    }

                    &:hover {
                        @if $skin-name == 'bootstrap4' {
                            background-color: $btn-danger-bgcolor;
                        }
                        @else {
                            background-color: $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; // sass-lint:disable-line no-important
                        }
                    }

                    &:focus-visible { // only for keybord
                        @if $skin-name == 'FluentUI' {
                            background-color: $btn-outline-bgcolor;
                        }
                    }

                    &:active,
                    &.e-active {
                        @include outline-danger-active;
                    }

                    &:disabled {
                        @include outline-danger-disabled;
                    }
                }
            }

            &.e-link {
                background-color: $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; // sass-lint:disable-line no-important
                }

                &:disabled {
                    @include link-disabled;
                }
            }
        }
    }
}

/*! 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: 14px !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: 18px !default;
$calendar-normal-day-header-font-weight: 500 !default;
$calendar-title-font-size: 16px !default;
$calendar-title-margin-left-style: 2px !default;
$calendar-title-font-weight-style: 600 !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: normal !default;
$calendar-yeardecade-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: normal !default;
//pending
$calendar-icon-font-size-style: 14px !default;
$calendar-bigger-icon-font-size: 16px !default;
$calendar-footer-container-padding: 8px !default;
$calendar-bigger-footer-container-padding: 16px !default;
$calendar-week-number-font-weight: 500 !default;
// small size
$calendar-small-icon-size: 24px !default;
$calendar-small-icon-font-size-style: 12px !default;
$calendar-small-title-font-size: 13px !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: 12px !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: 14px !default;
$calendar-small-font-size: 12px !default;
//week number
$calendar-week-number-font-size-style: 14px !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: 15px !default;
$calendar-link-font-weight-style: normal !default;
$calendar-disable-font-weight-style: 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: $content-bg-color-focus !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 {
        // sass-lint:disable no-vendor-prefixes
        -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 {
                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 {
                background-color: $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 {
        border-spacing: 0;
        max-width: $calendar-normal-max-width;
        min-width: $calendar-normal-min-width;
        padding: $calendar-popup-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 {
            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.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 {
            height: $calendar-normal-year-decade-height;
            padding: $calendar-normal-year-decade-padding;
        }

        #{if(&, '&', '*')} .e-content.e-year td > span.e-day,
        #{if(&, '&', '*')} .e-content.e-decade td > span.e-day {
            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;
        }

        #{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 {
            background-color: $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.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 {
            height: $calendar-bigger-year-decade-height;
            padding: $calendar-bigger-year-decade-padding;
        }

        #{if(&, '&', '*')} .e-content.e-year td > span.e-day,
        #{if(&, '&', '*')} .e-content.e-decade td > span.e-day {
            height: $calendar-bigger-year-decade-height;
            line-height: $calendar-bigger-year-decade-height;
            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 {
        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-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(&, '&', '*')} .e-content.e-month td {
            height: $calendar-small-month-view-height;
        }

        #{if(&, '&', '*')} .e-header {
            height: $calendar-small-header-height;

            #{if(&, '&', '*')} span {
                font-size: $calendar-small-icon-font-size-style;
                padding: $calendar-small-icon-padding;
            }

            #{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 {
        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 {
                    background-color: $calendar-yeardecade-hover-bg;
                }

                #{if(&, '&', '*')}.e-year td.e-selected:hover span.e-day,
                #{if(&, '&', '*')}.e-decade td.e-selected:hover span.e-day {
                    background-color: $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 {
                    background-color: $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 {
                    background-color: $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 {
                    background-color: $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 {
                    background-color: $calendar-active-bg-color;
                    border: $calendar-active-bg-border-color;

                    @if ($skin-name == 'material' or $skin-name == 'material-dark') {
                        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 {
                    background-color: $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 {
                    background-color: $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 {
                    background-color: $calendar-hover-color;
                    border: $calendar-hover-border-color;
                    border-radius: $calendar-border-radius;
                    color: $calendar-hover-text;
                }

                #{if(&, '&', '*')} td:focus span.e-day {
                    background-color: $calendar-focus-bg-color;
                    border: $calendar-focus-border-color;
                    border-radius: $calendar-border-radius;
                    color: $calendar-text-color;

                    @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 {
                    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: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' {
                    // sass-lint:disable no-vendor-prefixes
                    -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' {
                    // sass-lint:disable no-vendor-prefixes
                    -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' {
                    // sass-lint:disable no-vendor-prefixes
                    -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';
        }
    }
}

$skin-name: 'bootstrap5' !default;
//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' {
                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: 0;
            }
        }

        &: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: 400;

                    @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: 400;
                    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;

            + :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 */
    // sass-lint:disable no-vendor-prefixes

    .e-card {
        -webkit-tap-highlight-color: $card-highlight-color;
        background-color: $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: 16px !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: 14px !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: 12px !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-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-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' {
                    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-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-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 {
                    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 {
                    margin-left: 0;
                    margin-right: $cbox-bigger-margin;
                }

                + .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 {
        // sass-lint:disable no-vendor-prefixes
        -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 {
                            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 {
                            box-shadow: $cbox-focussed-box-shadow;
                            color: $cbox-indeterminate-hover-color;
                        }
                    }
                }
            }

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

                        &: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' {
                            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;
                    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;
                        }
                        @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;
                        }
                        @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-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;
                            }
                        }
                    }
                }
            }
        }
    }
}


@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: inherit !default;
$chip-border-size: 1px !default;
$chip-font-size: $text-sm !default;
$chip-line-height: $leading-none !default;
$chip-font-weight: 400 !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: 12px !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: 14px !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: 16px !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: 16px !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;

// sass-lint:disable no-vendor-prefixes
@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;

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

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

        .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;
            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-color: $bg-color;
    border-color: $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: 14px !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: 18px !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: 10px !default;
$drop-down-btn-icon-font-size-bigger: 16px !default;
$drop-down-btn-caret-icon-font-size-bigger: 12px !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;

        &:hover {
            @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' {
                box-shadow: none;
            }
        }

        &:focus {
            @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
                box-shadow: $drop-down-btn-box-shadow;
            }
            @else {
                box-shadow: none;
            }
        }

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

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

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

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


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

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

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

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

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

                .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 == '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;
                }
                @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;
                }
                @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 {
        .e-split-btn {
            @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;
            }

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

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

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

            &: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 {
                border-bottom-color: $split-btn-seperator-vertical-border-color;
                border-right-color: $split-btn-seperator-default-border-color;

                &: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;

                    &:disabled {
                        border-bottom-color: $btn-disabled-border-color;
                    }
                }
            }

            &.e-rtl {
                .e-split-btn {
                    border-left-color: $split-btn-seperator-default-border-color;

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

$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: 16px !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') {
                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 {
            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') {
                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 {
            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') {
    // sass-lint:disable no-vendor-prefixes
    // 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') {
            background-color: $slider-handle-bg-color;
            border: 0;
            border-radius: 8px;
            // sass-lint:disable-all
            cursor: -webkit-grab;
            cursor: grab;
            // sass-lint:enable-all
            opacity: 1;

            &.e-popup.e-popup-close {
                display: block;
                opacity: 0;
            }

            &.e-material-tooltip-start {
                background-color: $slider-handle-border-color;

                .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 {
                // sass-lint:disable-all
                cursor: -webkit-grabbing;
                cursor: grabbing;
                // sass-lint:enable-all
            }

            .e-arrow-tip {
                visibility: visible;
            }

            .e-tip-content {
                background-color: transparent;
                height: 16px;
                overflow: hidden;
                padding: 0 8px;
                text-align: center;
                top: calc(50% - 8px);
                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%;
                // sass-lint:disable-all
                cursor: -webkit-grab;
                cursor: grab;
                // sass-lint:enable-all
                opacity: 1;

                &.e-material-tooltip-start {
                    background-color: $slider-handle-border-color;
                }

                &.e-tooltip-active {
                    // sass-lint:disable-all
                    cursor: -webkit-grabbing;
                    cursor: grabbing;
                    // sass-lint:enable-all
                }

                .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;
                    top: calc(50% - 8px);
                    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') {
                .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') {
                            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') {

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

                        &.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') {
                        .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') {
                        .e-button-icon {
                            font-family: 'e-icons';
                        }

                        .e-button-icon::before {
                            color: $slider-button-icon-bg-color;

                            @if ($skin-name == 'FluentUI') {
                                content: '\e738';
                                font-size: 14px;
                            }
                            @else {
                                content: '\e738';
                                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') {
                        .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') {
                        .e-button-icon {
                            font-family: 'e-icons';
                        }

                        .e-button-icon::before {
                            color: $slider-button-icon-bg-color;

                            @if($skin-name == 'FluentUI') {
                                content: '\e75c';
                                font-size: 14px;
                            }
                            @else {
                                content: '\e75c';
                                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') {
                    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 == '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') {
                    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') {
                    background: $slider-track-color;
                }

                @if ($skin-name != 'highcontrast' and $skin-name != 'highcontrast-light' and $skin-name != 'FluentUI') {
                    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') {
                    @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 != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
                        .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') {
                        .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 {
                                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 != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
                        .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') {
                        .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 {
                                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 {
                        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') {
                        left: calc(50% - 3px);
                        width: 6px;
                    }

                    @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
                        @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') {
                    // sass-lint:disable-all
                    cursor: -webkit-grab;
                    cursor: grab;
                    // sass-lint:enable-all

                    &.e-handle-active {
                        // sass-lint:disable-all
                        cursor: -webkit-grabbing;
                        cursor: grabbing;
                        // sass-lint:enable-all
                    }

                    &.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;
                    }
                    // sass-lint:disable-all
                    @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') {
                        background-color: $slider-tab-background;
                        border: $slider-tab-border;
                        box-shadow: $slider-tab-active-box-shadow;
                    }
                    // sass-lint:enable-all
                }
            }

            .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 == '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 == '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') {
                            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') {
                            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') {
                    &.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') {
                        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') {
            &.e-material-slider .e-slider .e-handle.e-handle-first {
                background: transparent;
                border-color: transparent;
            }

            &.e-material-slider .e-slider .e-handle.e-handle-second {
                background: transparent;
                border-color: transparent;
            }
        }

        .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 {
                    height: 18px;
                    width: 18px;
                }
            }

            box-sizing: border-box;
            cursor: pointer;
            outline: none;
            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') {
                    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-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 {
            & .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 == '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;
                }

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

        * {
            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;
    }
    // sass-lint:disable no-vendor-prefixes
    .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 {
            & .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-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 {
            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;
            }
        }

        &.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 {
                            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 {
                    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;
                        }
                        @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;
                        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 == 'tailwind' or $skin-name == 'tailwind-dark' {
                    font-size: 22px;
                    line-height: 22px;
                }
                @else {
                    font-size: 16px;
                    line-height: 16px;
                }
            }
        }

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

                &: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 {
                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 == 'tailwind-dark' {
                        & .e-mode-switch-btn {
                            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-preview-container {
                    margin-left: 0;
                    margin-right: $cpicker-preview-margin-left;
                }
            }

            & .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 {
            &.e-color-picker {
                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;
                    }
                }
            }

            & .e-palette {
                & .e-tile {
                    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-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 == '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 {
        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(&, '&', '*')} .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';
            }
        }
    }
}

//default
//enddefault
//layout variables
$cmenu-back-icon: '\e977' !default;
$cmenu-back-icon-margin: 8px !default;
$cmenu-bigger-caret-font-size: 16px !default;
$cmenu-bigger-font-size: $text-base !default;
$cmenu-bigger-li-height: 32px !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: 16px !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: 18px !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: $flyout-text-color-pressed !default;
$cmenu-hover-icon-color: $flyout-text-color-pressed !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 {
        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' {
                        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' {
            padding: 8px 0;
        }

        & .e-menu-item {
            @include bigger-li-size;

            @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
                padding: $cmenu-bigger-li-padding;
            }

            & .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 {
        @include bigger-rtl-blank-icon;
    }
}


@mixin focused-icon-color {
    & .e-caret {
        color: $cmenu-caret-color;
    }

    & .e-menu-icon {
        color: $cmenu-icon-color;
    }
}

@mixin selected-icon-color {
    & .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 {
                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;

// sass-lint:disable-all
$panel-dragging-zindex: 1111 !important !default;
$panel-drag-prevent: none !default;

// sass-lint:disable-all
$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') {
                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') {
                    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') {
                    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') {
                        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: 18px !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: 22px !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: 16px !default;
// Touch small icon
$datepicker-bigger-small-icon-font-size: 20px !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;
$model-year-font-size: 14px !default;
$model-year-font-weight: 500 !default;
$model-year-line-height: 32px !default;
$model-month-font-size: 20px !default;
$model-month-font-weight: 500 !default;
$model-month-line-height: 32px !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' {
                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 {
            background-color: $datepicker-overlay;
            height: 100%;
            left: 0;
            opacity: .5;
            pointer-events: auto;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 999;
        }

        #{if(&, '&', '*')} .e-model-header {
            background-color: $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: $model-year-font-size;
                font-weight: $model-year-font-weight;
                line-height: $model-year-line-height;
                margin: 0;
            }
        }

        #{if(&, '&', '*')} .e-model-month,
        #{if(&, '&', '*')} .e-model-day {
            font-size: $model-month-font-size;
            font-weight: $model-month-font-weight;
            line-height: $model-month-line-height;
            margin: 0;
        }
    }
}

// sass-lint:disable-all
.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-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;
}

// sass-lint:enable-all


@media screen and (orientation: landscape) and (max-height: 360px) {

    .e-datepicker .e-calendar.e-device .e-month table tbody {
        display: inline-block;
        height: $datepicker-calendar-tbody-landscape-height;
        overflow: auto;
    }
}



@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 {
            background-color: $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;
                }
            }
        }
    }
}


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

//layout variables
$radio-btn-border: 1px solid !default;
$radio-btn-bigger-font-size: 16px !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: 14px !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;
    }
    // sass-lint:disable no-vendor-prefixes
    .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-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 {
                &::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 {
                    &::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 {
                // sass-lint:disable no-vendor-prefixes
                -moz-appearance: none;
                height: 1px;
                opacity: 0;
                position: absolute;
                width: 1px;
            }

            & .e-switch-inner {
                // sass-lint:disable no-vendor-prefixes
                -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 {
                // sass-lint:disable no-vendor-prefixes
                -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 {
                // sass-lint:disable no-vendor-prefixes
                -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;
            }

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

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

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

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

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

        & .e-switch-handle.e-switch-active {
            left: $switch-bigger-small-handle-active-left;
            margin-left: $switch-bigger-small-handle-margin-left;
        }

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

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

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

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

            & .e-switch-handle.e-switch-active {
                left: $switch-bigger-small-handle-active-left;
                margin-left: $switch-bigger-small-handle-margin-left;
            }

            & .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 {
        // sass-lint:disable no-vendor-prefixes
        -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 {
                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;
                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-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;
                }
            }
        }

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

//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: 12px !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') {
    // sass-lint:disable no-vendor-prefixes
    .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') {
                    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;
                }
            }

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

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

            & .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') {
                    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') {
                            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') {
                            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') {
                            margin: $listview-template-avatar-margin;
                        }
                    }
                }

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

// 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: 14px !default;
$range-calendar-btn-font-size: 14px !default;
$range-presets-normal-list-font-size: 13px !default;
$range-presets-bigger-list-font-size: 14px !default;
$range-range-btn-font-weight: 500 !default;
$range-header-label-size: $text-lg !default;
$range-calendar-small-font-size: $text-xs !default;
$range-calendar-bigger-font-size: 20px !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: 15px !default;
$range-bigger-change-icon-size: 18px !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: 13px !default;
$range-device-medium-header-font-size: 13px !default;
$range-device-small-font-size: 11px !default;
$range-week-header-font-size: 13px !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;
// new variable
$range-icon: '\e245' !default;
$range-icon-font-size: 16px !default;
$range-bigger-icon-font-size: 18px !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: 12px !default;
$range-start-end-container-small-height: 32px !default;
$range-calendar-mouse-small-font-size: 12px !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: 12px !default;
$calendar-bigger-small-max-width: 246px !default;
$range-control-header-width: auto !default;
$range-font-weight-normal: 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: 14px !default;
// touch small icon
$range-bigger-small-icon-font-size: 18px !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-pressed !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;
// 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;

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

                #{if(&, '&', '*')} .e-list-parent {
                    margin: $range-value-zero;
                    max-width: $range-presets-width;
                    padding: $range-value-zero;
                }

                #{if(&, '&', '*')} .e-text-content {
                    line-height: $range-list-item-line-height;
                }

                #{if(&, '&', '*')} .e-ul {

                    #{if(&, '&', '*')} li.e-list-item {
                        font-size: $range-presets-normal-list-font-size;
                        height: $range-preset-normal-list-height;
                        line-height: $range-preset-normal-list-height;
                    }
                }
            }

            #{if(&, '&', '*')} .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 {
        background-color: $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(&, '&', '*')} .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(&, '&', '*')} .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;
                    }
                }
            }
        }
    }

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

// sass-lint:disable-all
.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-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;
}

// sass-lint:enable-all


@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 {
                background-color: $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 {
                    background-color: $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' {
                        background-color: $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' {
                        background: $range-hover-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' {
                        background-color: $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' {
                        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-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' {
                        background-color: $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 {
                    background-color: $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 {
                    background-color: $range-selection-bg;
                    color: $range-active-font-color;
                }

                #{if(&, '&', '*')} .e-other-month.e-selected span {
                    color: $range-primary-font-color;
                }
            }

            #{if(&, '&', '*')} .e-presets {
                background-color: $range-presets-bg;
                color: $range-preset-normal-font-color;

                #{if(&, '&', '*')} .e-list-item.e-active {
                    background-color: $range-presets-bg-color;
                    color: $range-presets-font-color;
                }

                #{if(&, '&', '*')} .e-list-item.e-hover {
                    background-color: $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 {
                background-color: $range-separator-color;
            }

            #{if(&, '&', '*')} .e-footer {
                background-color: $range-footer-background;

                #{if(&, '&', '*')} .e-cancel.e-flat:not(:hover) {
                    @if $skin-name == 'tailwind' {
                        // sass-lint:disable no-vendor-prefixes
                        -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' {
                        // sass-lint:disable no-vendor-prefixes
                        -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 {
        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(&, '&', '*')} .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;
        }
    }
}


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


// 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: 14px !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;

@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 {
        // sass-lint:disable no-vendor-prefixes
        -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: 16px;
            margin: $datetime-date-icon-margin;

            @if $skin-name == 'material' or $skin-name == 'material-dark' {
                min-height: $datetime-normal-min-height;
                min-width: $datetime-normal-min-width;
            }

            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 {
        background-color: $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;
            padding: $datetime-list-normal-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' {
                min-height: $datetime-bigger-min-height;
                min-width: $datetime-bigger-min-width;
            }
        }
    }

    .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 {
            padding: $datetime-list-bigger-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;
        }
    }

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

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


@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 {
            background-color: $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 {
                background-color: $datetime-list-hover-bg-color;
                border: $datetime-list-hover-border-color;
                color: $datetime-list-hover-font-color;
            }

            #{if(&, '&', '*')} .e-list-item.e-active {
                background-color: $datetime-list-active-bg-color;
                color: $datetime-list-active-font-color;
            }

            #{if(&, '&', '*')} .e-list-item.e-active.e-hover {
                background-color: $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: 14px !default;
$mask-bigger-font-size: 16px !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;
        }
    }
}


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



// 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: 15px !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: 15px !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: 18px !default;
$remove-icon-font-size: 22px !default;
$delete-icon-font-size: 22px !default;
$abort-icon-font-size: 22px !default;
$delete-icon-font-size-smaller: 18px !default;
$abort-icon-font-size-smaller: 18px !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: 13px !default;
$file-small-name-font-size: 12px !default;
$file-small-name-padding-top: 12px !default;
$list-small-item-status-font-size: 12px !default;
$file-small-size-padding: 6px 0 !default;
$remove-small-icon-font-size: 10px !default;
$remove-small-icon-height: 24px !default;
$delete-small-icon-padding: 12px !default;
$remove-small-icon-width: 24px !default;
$progress-bar-bottom-paddding-small: 2px !default;
$drop-small-area-padding-left: 10px !default;
$li-min-height-small: 79px !default;
$header-padding-rtl-small: 12px 12px 12px 0 !default;

// 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: transparent !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') {
                    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 {
                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' {
            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 {
                        background-color: $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 {
                background-color: $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' {
            // sass-lint:disable no-vendor-prefixes
            -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' {
            // sass-lint:disable no-vendor-prefixes
            -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: 0 !default;
$dialog-header-border: 1px solid $border-light !default;
$dialog-close-icon-font-size: 16px !default;
$dialog-bigger-close-icon-font-size: 20px !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-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: 0 !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-bg-color !default;
$dialog-footer-flat-btn-content-color: $primary-text-color !default;
$dialog-enable-resize-padding-bottom: 15px !default;

@include export-module('dialog-layout') {
    /*! dialog layout */
    // sass-lint:disable no-vendor-prefixes
    .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%;

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

        .e-dlg-modal {
            position: fixed;
        }
        // sass-lint:disable no-important
        .e-scroll-disabled {
            overflow: hidden !important;
        }
        // sass-lint:enable 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;
        }

        & .e-dlg-content {
            font-size: $dialog-bigger-content-font-size;
            padding: $dialog-bigger-content-padding;

            @if $skin-name == 'FluentUI' {
                margin-bottom: $dialog-bigger-content-margin-bottom;
            }
        }

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

        .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 == 'FluentUI' {
                margin-bottom: $dialog-content-margin-bottom;
            }
        }

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

    .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);
                }
            }
        }
    }
    // sass-lint:disable no-important
    .e-dlg-target.e-scroll-disabled {
        overflow: hidden !important;
    }
    // sass-lint:enable 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;
    }
    // sass-lint:disable no-important
    .e-dlg-fullscreen {
        height: 100% !important;
        left: 0 !important;
        width: 100% !important;
    }
    // sass-lint:enable 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 auto;
        width: 600px;
    }
}

@media (max-width: 768px) {
    .e-alert-dialog.e-dialog.e-popup,
    .e-confirm-dialog.e-dialog.e-popup {
        margin: 30px auto;
        width: auto;
    }
}

@media (max-width: 768px) {
    .e-prompt-dialog.e-dialog.e-popup,
    .e-prompt-dialog.e-dialog.e-popup {
        margin: 30px auto;
        width: auto;
    }
}

@media (min-width: 768px) {
    .e-prompt-dialog.e-dialog.e-popup,
    .e-prompt-dialog.e-dialog.e-popup {
        margin: 30px auto;
        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' {
            .e-btn.e-primary.e-flat:not([DISABLED]) {
                background-color: $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]) {
                background-color: $dialog-footer-hover-btn-color;
            }
        }

        @if $skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
            .e-btn.e-flat:not([DISABLED]) {
                background-color: $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-color: $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-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;

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

        .e-hscroll-content {
            display: inline-block;
            height: inherit;
            position: relative;
            touch-action: none;

            > * {
                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%;

            @if $hscroll-skin == 'tailwind' or $hscroll-skin == 'bootstrap5' {
                font-size: $hscroll-device-arrow-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;

                    @if $hscroll-skin == 'material' {
                        border-color: $hscroll-hover-border-color;
                    }

                    @if $hscroll-skin == 'highcontrast' {
                        &:active {
                            background: $hscroll-press-bg;
                        }
                    }
                }
            }
        }

        &:not(.e-scroll-device) {

            .e-scroll-nav {

                &:hover {
                    background: $hscroll-hover-bg;
                    border: $hscroll-hover-border;
                    color: $hscroll-hover-font;

                    @if $hscroll-skin == 'bootstrap4' {
                        .e-icons {
                            color: inherit;
                        }
                    }

                    @if $hscroll-skin == 'highcontrast' {
                        border: 2px solid $hscroll-nav-hover-border-color;

                        &:active {
                            border: 0;
                        }
                    }
                }

                &:focus {
                    background: $hscroll-hover-bg;
                    border: $hscroll-focus-border;
                    color: $hscroll-hover-font;

                    @if $hscroll-skin == 'material' {
                        border-color: $hscroll-hover-border-color;
                    }

                    @if $hscroll-skin == 'bootstrap4' {
                        .e-icons {
                            color: inherit;
                        }
                    }

                    @if $hscroll-skin == 'highcontrast' {
                        background: $hscroll-nav-focus-bg-color;
                        border: $hscroll-dash-border;
                    }
                }

                &:active {
                    background: $hscroll-press-bg;
                    border: $hscroll-active-border;
                    box-shadow: $hscroll-active-box-shadow;
                    color: $hscroll-active-font-color;

                    @if $hscroll-skin == 'highcontrast' {
                        .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;
            touch-action: none;
            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;

                    @if $vscroll-skin == 'highcontrast' {

                        &:active {
                            background: $vscroll-press-bg;
                        }
                    }
                }
            }
        }

        &:not(.e-scroll-device) {

            .e-scroll-nav {

                &:hover {
                    background: $vscroll-hover-bg;
                    border: $vscroll-hover-border;
                    color: $vscroll-hover-font;

                    @if $vscroll-skin == 'highcontrast' {
                        border: 1px solid $hover-border;

                        &:active {
                            border: 0;
                        }
                    }
                }

                &:focus {
                    background: $vscroll-hover-bg;
                    border: $vscroll-focus-border;
                    border-color: $vscroll-hover-border-color;
                    color: $vscroll-hover-font;

                    @if $vscroll-skin == 'highcontrast' {
                        background: inherit;
                        border: $vscroll-dash-border;
                    }
                }

                &:active {
                    background: $vscroll-press-bg;
                    border: $vscroll-active-border;
                    box-shadow: $vscroll-active-box-shadow;
                    color: $vscroll-active-font-color;

                    @if $vscroll-skin == 'highcontrast' {
                        .e-icons {
                            color: $selection-font;
                        }
                    }
                }
            }
        }

        .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: '\e7dd';
            line-height: normal;
        }

        .e-nav-down-arrow::before {
            content: '\e734';
            line-height: normal;
        }
    }
}

/*! Toolbar's bootstrap5 theme wise override definitions and variables */
// sass-lint:disable-all
$tbar-skin: 'bootstrap5' !default;

//font definitions
$tbar-btn-family: $font-family !default;
$tbar-btn-weight: $font-weight-normal !default;
$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 6px !default;
$tbar-btn-icn-nrml-padding: 4px !default;
$tbar-btn-icn-bgr-padding: 4px 6px !default;
$tbar-btn-icn-right-bgr-padding: 4px 6px !default;
$tbar-btn-icn-right-nrml-padding: 4px !default;
$btn-txt-nrml-padding: 4px !default;
$btn-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;
$tbar-item-bgr-padding-bigger: 1.5px 0 !default;
$tbar-item-nrml-padding-small: 1px 0 !default;

// dimension definitions
$tbar-btn-bgr-line-height: 24px !default;
$tbar-btn-nrml-line-height: 22px !default;
$tbar-btn-nrml-minheight: 32px !default;
$tbar-btn-bgr-minheight: 38px !default;
$tbar-btn-nrml-minwidth: 32px !default;
$tbar-btn-bgr-minwidth: 38px !default;
$tbar-btn-bgr-height: calc(100% - 11px) !default;
$tbar-btn-nrml-height: calc(100% - 10px) !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-btn-icon-nrml-line-height: 16px !default;
$tbar-left-item-line-height: 35px !default;
$tbar-right-item-line-height: 24px !default;
$tbar-btn-icon-bgr-width: 13px !default;
$tbar-btn-icon-bgr-height: 18px !default;
$tbar-btn-icon-bgr-line-height: 18px !default;
$tbar-btn-txt-line-height: inherit !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-pop-padding-bottom: 5px !default;
$tbar-big-pop-padding-bottom: 3px !default;
$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: 1.5px 0 !default;
$tbar-multirow-item-top-btm-mrgn-small: 1px 0 !default;
$tbar-multirow-item-mrgn: 0 !default;
$tbar-btn-bgr-mrgn: 0 !default;
$tbar-btn-nrml-mrgn: 0 !default;
$tbar-v-btn-bgr-mrgn: 0 !default;
$tbar-v-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: 0 !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-hover-font-color: $tbar-hover-font !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-font-overlay: $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-active-font-color: $primary-text-color !default;
$tbar-btn-active-font-color: $tbar-press-font !default;
$tbar-popup-btn-bg-color: transparent !default;
$tbar-pop-bg: $flyout-bg-color !default;

@mixin tbar-btn-animation {
    content: '';
}

@mixin tbar-btn-animation-after {
    content: '';
}

@include export-module('toolbar-layout') {
    /*! toolbar layout */
    // sass-lint:disable no-vendor-prefixes
    .e-bigger .e-toolbar,
    .e-toolbar.e-bigger {
        height: $tbar-bgr-size;
        min-height: $tbar-bgr-size;

        .e-tbar-btn {
            @if $tbar-skin == 'bootstrap4' {
                .e-tbar-btn-text {
                    font-size: $tbar-icons-bgr-font-size;
                }
            }
        }

        .e-tbar-btn .e-icons {
            font-size: $tbar-icons-bgr-font-size;

            &.e-btn-icon {

                @if $tbar-skin == 'bootstrap4' {
                    font-size: $tbar-icons-bgr-font-size;
                }
            }
        }

        &.e-extended-toolbar.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-toolpop.e-rtl {

            .e-toolbar-items:not(.e-tbar-pos) {

                .e-toolbar-center .e-toolbar-item {
                    margin: 0;
                }

                .e-toolbar-right .e-toolbar-item:last-child {
                    margin: 0;
                    margin-left: $tbar-item-nrml-mrgn;
                }

                .e-toolbar-right .e-toolbar-item {
                    margin: 0;
                }
            }
        }

        &.e-rtl {

            .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:last-child {
                        margin-left: $tbar-item-bgr-mrgn;
                        margin-right: 0;
                    }

                    .e-toolbar-right .e-toolbar-item {
                        margin: 0;
                    }
                }

                .e-toolbar-left {

                    .e-toolbar-item:first-child {
                        margin-left: 0;
                    }

                    .e-toolbar-item:last-child {
                        margin-left: $tbar-item-nrml-mrgn;
                    }
                }

                &:not(.e-tbar-pos) {

                    .e-toolbar-item:first-child {
                        margin-left: 0;
                        margin-right: $tbar-item-bgr-mrgn;
                    }
                }
            }
        }

        .e-hor-nav {
            min-height: $tbar-bgr-items-size;
            min-width: $tbar-nav-bgr-width;
        }

        .e-toolbar-item {

            .e-tbar-btn.e-btn {
                line-height: $tbar-btn-bgr-line-height;
            }

            .e-btn.e-tbar-btn .e-icons.e-btn-icon {
                line-height: $tbar-btn-icon-bgr-line-height;
                min-height: $tbar-btn-icon-bgr-height;
                min-width: $tbar-btn-icon-bgr-width;

                @if $tbar-skin == 'bootstrap5' {
                    padding-bottom: 4px;
                }
            }
        }

        .e-toolbar-items .e-toolbar-item {

            .e-tbar-btn-text {
                line-height: $tbar-btn-txt-line-height;

                @if $tbar-skin == 'tailwind' or $tbar-skin == 'bootstrap5' {
                    font-size: 16px;
                }
            }
        }

        .e-toolbar-pop {

            .e-toolbar-item {
                @if $tbar-skin == 'material' {
                    height: 48px;
                }

                &:not(.e-separator) {
                    min-width: 48px;
                    padding: $tbar-item-pop-bgr-padding;
                }

                .e-tbar-btn .e-icons.e-btn-icon {
                    min-width: $tbar-btn-icon-bgr-width;

                    @if $tbar-skin == 'tailwind' or $tbar-skin == 'bootstrap5' {
                        font-size: 16px;
                    }
                }

                .e-tbar-btn.e-btn {
                    min-height: $tbar-btn-pop-bgr-minheight;
                    padding: $tbar-pop-btn-bgr-padding;

                    @if $tbar-skin == 'bootstrap' {
                        line-height: 34px;
                    }

                    .e-icons.e-btn-icon {
                        margin-left: $tbar-zero-value;
                        padding: $tbar-pop-icon-bgr-padding;
                    }

                    .e-icon-left {
                        @if $tbar-skin == 'material' {
                            padding-right: 16px;
                        }
                    }

                    .e-tbar-btn-text {
                        padding: $tbar-pop-btn-txt-bgr-pad;

                        @if $tbar-skin == 'tailwind' or $tbar-skin == 'bootstrap5' {
                            font-size: 16px;
                        }
                    }
                }
            }
        }

        .e-toolbar-items {
            min-height: $tbar-bgr-items-size;

            &.e-toolbar-multirow {
                margin-left: $tbar-multirow-items-mrgn-bigger;
                margin-right: $tbar-multirow-items-mrgn-bigger;
                white-space: normal;

                .e-toolbar-item:not(.e-separator) {
                    @if $tbar-skin == 'fabric' or $tbar-skin == 'highcontrast' {
                        margin: $tbar-multirow-item-top-btm-mrgn-bigger;
                    }
                }

                .e-toolbar-item.e-separator.e-multirow-separator,
                .e-toolbar-item.e-separator.e-hidden {
                    display: none;
                }

                .e-toolbar-item.e-separator {
                    display: inline-flex;
                }
            }

            &.e-toolbar-multirow:not(.e-tbar-pos) {

                .e-toolbar-item:first-child {
                    margin-left: $tbar-multirow-item-mrgn;
                }

                .e-toolbar-item:last-child {
                    margin-right: $tbar-multirow-item-mrgn;
                }
            }

            .e-hscroll-bar .e-hscroll-content {

                > .e-toolbar-item:last-child {
                    margin-right: $tbar-item-bgr-mrgn;
                }

                .e-toolbar-center .e-toolbar-item {
                    margin: 0;
                }

                .e-toolbar-right .e-toolbar-item:last-child {
                    margin-right: $tbar-item-bgr-mrgn;
                }

                .e-toolbar-right .e-toolbar-item {
                    margin: 0;
                }
            }

            .e-toolbar-left {

                .e-toolbar-item:first-child {
                    margin-left: $tbar-item-bgr-mrgn;
                }
            }

            &:not(.e-tbar-pos) {

                .e-toolbar-item:first-child {
                    margin-left: $tbar-item-bgr-mrgn;
                }
            }

            .e-toolbar-item {
                min-height: $tbar-bgr-items-size;

                &:not(.e-separator) {
                    min-width: $tbar-bgr-item-size;

                    @if ($tbar-skin != 'FluentUI') {
                        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 {
                                @if $tbar-skin == 'bootstrap5' {
                                    padding-bottom: $tbar-big-pop-padding-bottom;
                                }
                                @else {
                                    padding: $tbar-zero-value;
                                }
                            }
                        }
                    }
                }

                .e-tbar-btn.e-btn,
                .e-tbar-btn.e-btn.e-control {
                    height: $tbar-btn-bgr-height;
                    margin: $tbar-btn-bgr-mrgn;
                    min-height: $tbar-btn-bgr-minheight;
                    min-width: $tbar-btn-bgr-minwidth;
                    padding: $tbar-btn-bgr-padding;

                    @if $tbar-skin == 'bootstrap' or $tbar-skin == 'bootstrap4' {
                        line-height: 34px;

                        &:focus,
                        &:hover,
                        &:active {
                            padding: $tbar-btn-bgr-focus-padding;
                        }
                    }

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

                    .e-tbar-btn-text {
                        padding: $btn-txt-bgr-padding;
                    }
                }
            }
        }

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

                @if $tbar-skin != 'material' {
                    margin-left: -1px;
                }
            }

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

            .e-toolbar-extended.e-popup-open {
                display: inline;
            }

            .e-toolbar-pop.e-toolbar-extended {
                width: inherit;
            }

            .e-toolbar-extended {
                box-shadow: none;
                display: inline;
                white-space: normal;

                .e-toolbar-item:not(.e-separator) {

                    @if $tbar-skin == 'fabric' or $tbar-skin == 'highcontrast' {
                        margin: $tbar-item-bgr-padding-bigger;
                    }

                    min-width: $tbar-bgr-item-size;

                    @if ($tbar-skin != 'FluentUI') {
                        padding: $tbar-item-bgr-padding;
                    }
                }

                .e-toolbar-item.e-separator.e-extended-separator {
                    display: none;
                }

                .e-toolbar-item.e-separator {
                    display: inline-flex;
                }

                .e-toolbar-item {
                    align-content: center;
                    align-items: center;
                    cursor: pointer;
                    display: inline-flex;
                    min-height: $tbar-bgr-items-size;
                    vertical-align: middle;
                    width: auto;

                    .e-tbar-btn.e-btn .e-tbar-btn-text,
                    .e-tbar-btn.e-btn.e-control .e-tbar-btn-text {
                        padding: $btn-txt-bgr-padding;
                    }

                    .e-tbar-btn.e-btn,
                    .e-tbar-btn.e-btn.e-control {
                        height: $tbar-btn-bgr-height;
                        margin: $tbar-btn-bgr-mrgn;
                        min-height: $tbar-btn-bgr-minheight;
                        min-width: $tbar-btn-bgr-minwidth;
                        padding: $tbar-btn-bgr-padding;

                        @if $tbar-skin == 'bootstrap' {
                            &:hover,
                            &:focus,
                            &:active {
                                padding: 0 6px;
                            }
                        }

                        @if $tbar-skin == 'bootstrap4' {
                            &:hover,
                            &:focus,
                            &:active {
                                padding: 0 5.5px;
                            }
                        }
                    }

                    .e-tbar-btn.e-btn {
                        line-height: $tbar-btn-bgr-line-height;
                    }
                }

                .e-toolbar-item.e-separator {
                    height: $tbar-separator-bgr-height;
                    margin: $tbar-separator-bgr-mrgn;
                    min-height: $tbar-separator-bgr-minheight;
                }

                .e-toolbar-item .e-btn.e-tbar-btn .e-icons.e-btn-icon {
                    line-height: $tbar-btn-icon-bgr-line-height;
                    min-height: $tbar-btn-icon-bgr-height;
                    min-width: $tbar-btn-icon-bgr-width;
                }
            }
        }

        &.e-extended-toolbar.e-rtl {

            .e-hor-nav {
                left: 0;
                right: auto;
            }

            .e-toolbar-extended {
                padding-right: $tbar-item-bgr-mrgn;

                @if $tbar-skin != 'material' {
                    margin-left: 0;
                }
            }
        }

        &.e-vertical {

            .e-toolbar-items {

                .e-toolbar-item {

                    &:not(.e-separator) {
                        min-height: 38px;
                    }

                    &.e-separator {
                        height: auto;
                        margin: $tbar-separator-vertical-bgr-mrgn;
                        min-height: auto;
                    }

                    .e-tbar-btn.e-btn {
                        margin: $tbar-v-btn-bgr-mrgn;
                    }
                }

                &:not(.e-tbar-pos) .e-toolbar-item {

                    &:first-child {
                        margin-left: 0;
                    }

                    &:last-child {
                        margin-right: 0;
                    }
                }
            }

            .e-hor-nav {
                min-height: 40px;
                min-width: 50px;
            }
        }
    }

    .e-toolbar {
        border-radius: $tbar-radius;
        display: block;
        height: $tbar-nrml-size;
        min-height: $tbar-nrml-size;
        position: relative;
        touch-action: none;
        user-select: none;
        white-space: nowrap;

        .e-blazor-toolbar-items {
            position: absolute;
            top: -9999px;
            visibility: hidden;
        }

        &.e-extended-toolbar.e-rtl {

            .e-hor-nav {
                left: 0;
                right: auto;
            }

            .e-toolbar-extended {
                padding-right: $tbar-item-nrml-mrgn;

                @if $tbar-skin != 'material' {
                    margin-left: 0;
                }

                .e-toolbar-item .e-tbar-btn.e-btn .e-icon-left {
                    padding-left: 0;
                }
            }
        }

        &.e-extended-toolbar {

            .e-toolbar-items .e-toolbar-item {

                &.e-popup-text .e-tbar-btn-text {
                    display: none;
                }
            }

            &.e-extended-toolbar.e-tbar-extended {
                border-bottom: 0;
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
            }

            .e-hor-nav.e-ie-align {
                display: table;
            }

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

                @if $tbar-skin != 'material' {
                    margin-left: -1px;
                }

                .e-toolbar-item.e-toolbar-text .e-tbar-btn-text {
                    display: none;
                }
            }

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

            .e-toolbar-extended.e-popup-open {
                display: inline;
            }

            .e-toolbar-pop.e-toolbar-extended {
                width: inherit;
            }

            .e-toolbar-extended {
                box-shadow: none;
                display: inline;
                white-space: normal;

                .e-toolbar-item:not(.e-separator) {

                    @if $tbar-skin == 'fabric' or $tbar-skin == 'highcontrast' {
                        margin: $tbar-item-nrml-padding-small;
                    }

                    height: 100%;
                    min-width: $tbar-item-nrml-minwidth;

                    @if ($tbar-skin != 'FluentUI') {
                        padding: $tbar-item-nrml-padding;
                    }
                }

                .e-toolbar-item.e-separator.e-extended-separator {
                    display: none;
                }

                .e-toolbar-item.e-separator {
                    display: inline-flex;
                }

                .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.e-btn .e-tbar-btn-text,
                    .e-tbar-btn.e-btn.e-control .e-tbar-btn-text {
                        padding: $btn-txt-nrml-padding;
                    }

                    .e-tbar-btn-text {
                        display: inline-block;
                        font-family: $tbar-btn-family;
                        font-size: $tbar-btn-txt-font-size;
                        line-height: inherit;
                        vertical-align: middle;
                        width: auto;
                    }

                    .e-tbar-btn.e-btn,
                    .e-tbar-btn.e-btn.e-control {
                        height: $tbar-btn-nrml-height;
                        margin: $tbar-btn-nrml-mrgn;
                        min-height: $tbar-btn-nrml-minheight;
                        min-width: $tbar-btn-nrml-minwidth;
                        padding: $tbar-btn-nrml-padding;
                    }

                    .e-tbar-btn.e-btn {
                        line-height: $tbar-btn-nrml-line-height;

                        @if $tbar-skin == 'bootstrap' or $tbar-skin == 'bootstrap4' {
                            &:hover,
                            &:focus,
                            &:active {
                                padding: 0 1.5px;
                            }
                        }
                    }
                }

                .e-toolbar-item.e-separator {
                    margin: $tbar-separator-nrml-mrgn;
                    min-height: $tbar-btn-icon-nrml-height;
                    min-width: 1px;
                    vertical-align: middle;
                }

                .e-toolbar-item .e-btn.e-tbar-btn .e-icons.e-btn-icon:not(.e-toolbar-pop) {
                    line-height: $tbar-btn-icon-nrml-line-height;
                    min-height: $tbar-btn-icon-nrml-height;
                    min-width: $tbar-btn-icon-nrml-width;
                    padding: 0;

                    @if $tbar-skin == 'tailwind' or $tbar-skin == 'bootstrap5' {
                        font-size: 16px;
                        padding: 5px 6px;
                    }
                }
            }

            .e-toolbar-items {

                .e-toolbar-item.e-separator:last-of-type {
                    display: inline-flex;
                }
            }

            .e-toolbar-pop.e-toolbar-extended {

                .e-toolbar-item:not(.e-separator) {
                    height: auto;
                }

                .e-toolbar-item {

                    .e-tbar-btn .e-icons.e-btn-icon {
                        font-size: 14px;
                        vertical-align: middle;
                    }

                    .e-tbar-btn {
                        cursor: pointer;
                        font-family: $tbar-btn-family;
                        font-size: $tbar-btn-font-size;
                        font-weight: $tbar-btn-weight;
                        overflow: hidden;
                        padding: $tbar-btn-nrml-padding;
                        text-align: center;
                        text-decoration: none;
                        text-transform: none;
                    }
                }

                .e-tbar-btn:first-child {
                    display: inline-block;
                }

                .e-toolbar-item > * {
                    align-self: center;
                    text-overflow: ellipsis;
                }
            }
        }

        &.e-control[class*='e-toolbar'] {
            box-sizing: content-box;
        }

        &.e-toolpop {

            .e-toolbar-items .e-toolbar-item {

                &.e-popup-text .e-tbar-btn-text {
                    display: none;
                }
            }
        }

        &,
        .e-toolbar-items .e-toolbar-item {

            .e-tbar-btn-text {
                display: inline-block;
                padding: $btn-txt-nrml-padding;
            }

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

        &.e-corner {
            border-radius: $tbar-border-radius;
        }

        .e-toolbar-pop {
            border-radius: $tbar-pop-radius;
            overflow: hidden;
            padding: $tbar-popup-padding;
            position: absolute;


            &.e-toolbar-extended {

                .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
                    margin: 0;
                    width: auto;
                }
            }

            .e-toolbar-item {

                &.e-toolbar-popup.e-hidden {
                    display: none;
                }

                .e-tbar-btn.e-btn {
                    align-items: center;
                    display: inline-flex;
                    justify-content: flex-start;
                    min-height: $tbar-btn-pop-nrml-minheight;
                    padding: $tbar-pop-btn-nrml-padding;

                    @if $tbar-skin == 'bootstrap' or $tbar-skin == 'bootstrap4' {
                        border: 0;
                        border-radius: 0;
                        margin: 0;
                    }

                    .e-icons.e-btn-icon {
                        margin: $tbar-zero-value;
                        padding: $tbar-pop-icon-nrml-padding;
                        width: auto;
                    }

                    .e-icon-left {
                        @if $tbar-skin == 'material' {
                            padding-right: 16px;
                        }
                    }

                    .e-tbar-btn-text {
                        padding: $tbar-pop-btn-txt-nrml-pad;
                    }
                }

                .e-tbar-btn .e-icons.e-btn-icon {
                    min-width: $tbar-btn-icon-nrml-width;
                }

                &:not(.e-separator) {
                    min-width: 34px;
                    padding: $tbar-item-pop-nrml-padding;
                }

                &.e-tbtn-align .e-btn.e-control {
                    text-align: center;

                    .e-icons.e-btn-icon {
                        min-width: 100%;
                    }
                }
            }

            .e-toolbar-item {
                align-content: center;
                align-items: center;
                display: flex;
                height: $tbar-item-height;
                justify-content: center;

                > * {
                    height: 100%;
                    min-width: 100%;
                    text-overflow: ellipsis;
                }
            }

            .e-toolbar-text .e-tbar-btn-text {
                display: none;
            }

            .e-toolpopup {
                text-align: center;
            }
        }

        .e-toolbar-popup {
            text-align: center;
        }

        &.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:last-child {
                    margin: 0;
                    margin-left: $tbar-item-nrml-mrgn;
                }

                .e-toolbar-right .e-toolbar-item {
                    margin: 0;
                }
            }
        }

        &.e-rtl {

            .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:last-child {
                    margin-right: $tbar-item-nrml-mrgn;
                }

                .e-toolbar-right .e-toolbar-item {
                    margin: 0;
                }
            }

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

                    .e-toolbar-item: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-hscroll-bar:first-child {

                        .e-toolbar-left {

                            .e-toolbar-item:last-child {
                                margin-left: 0;
                            }

                            .e-toolbar-item:first-child {
                                margin-left: 0;
                                margin-right: $tbar-item-nrml-mrgn;
                            }
                        }

                        .e-toolbar-center {

                            .e-toolbar-item:last-child {
                                margin-right: 0;
                            }
                        }

                        .e-toolbar-right {

                            .e-toolbar-item {

                                &:last-child {
                                    margin-left: $tbar-item-nrml-mrgn;
                                    margin-right: 0;
                                }

                                &:first-child {
                                    margin-right: 0;
                                }
                            }
                        }

                        .e-toolbar-item:last-child {
                            margin-left: $tbar-item-nrml-mrgn;
                            margin-right: 0;
                        }
                    }

                    > .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-toolbar-pop {

                .e-toolbar-item .e-tbar-btn.e-btn .e-icon-left {
                    @if $tbar-skin == 'material' {
                        padding-left: 16px;
                        padding-right: 0;
                    }
                }
            }

            .e-hor-nav {
                left: $tbar-zero-value;
                right: auto;

                @if $tbar-skin == 'bootstrap' $tbar-skin == 'bootstrap4' {
                    border-radius: $tbar-radius 0 0 $tbar-radius;
                }
            }
        }

        .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: table-cell;
            text-align: center;
            vertical-align: middle;
            width: 100%;

            @if $tbar-skin == 'tailwind' or $tbar-skin == 'bootstrap5' {
                font-size: $tbar-btn-font-size;
            }
        }

        .e-toolbar-item {

            .e-tbar-btn.e-btn {
                line-height: $tbar-btn-nrml-line-height;

                .e-icons.e-btn-icon {
                    line-height: $tbar-btn-icon-nrml-line-height;
                    min-height: $tbar-btn-icon-nrml-height;
                }
            }
        }

        .e-toolbar-items {
            border-radius: $tbar-radius 0 0 $tbar-radius;
            display: inline-block;
            height: 100%;
            min-height: $tbar-nrml-items-size;
            vertical-align: middle;

            &.e-toolbar-multirow {
                margin-bottom: 1px;
                margin-left: $tbar-multirow-items-mrgn-small;
                margin-right: $tbar-multirow-items-mrgn-small;
                white-space: normal;

                .e-toolbar-item:not(.e-separator) {
                    @if $tbar-skin == 'fabric' or $tbar-skin == 'highcontrast' {
                        margin: $tbar-multirow-item-top-btm-mrgn-small;
                    }
                }

                .e-toolbar-item.e-separator.e-multirow-separator,
                .e-toolbar-item.e-separator.e-hidden {
                    display: none;
                }

                .e-toolbar-item.e-separator {
                    display: inline-flex;
                }
            }

            &.e-multirow-pos {

                .e-toolbar-left,
                .e-toolbar-center,
                .e-toolbar-right {
                    display: inline;
                }
            }

            &.e-toolbar-multirow:not(.e-tbar-pos) {

                .e-toolbar-item:first-child {
                    margin-left: $tbar-multirow-item-mrgn;
                }

                .e-toolbar-item:last-child {
                    margin-right: $tbar-multirow-item-mrgn;
                }
            }

            &.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;
                    line-height: $tbar-left-item-line-height;
                }

                .e-toolbar-center {
                    margin: 0 auto;
                }
            }

            .e-toolbar-left,
            .e-toolbar-center,
            .e-toolbar-right {
                display: inline-block;
            }

            .e-toolbar-left {

                .e-toolbar-item:first-child {
                    margin-left: $tbar-item-nrml-mrgn;
                }
            }

            &:not(.e-tbar-pos) {

                .e-toolbar-item:first-child {
                    margin-left: $tbar-item-nrml-mrgn;
                }

                .e-toolbar-right {

                    .e-toolbar-item:first-child {
                        margin-left: 0;
                    }
                }
            }

            &:first-child {

                .e-hscroll-bar:first-child {

                    .e-toolbar-left {

                        .e-toolbar-item:last-child {
                            margin-right: 0;
                        }

                        .e-toolbar-item:first-child {
                            margin-left: $tbar-item-nrml-mrgn;
                        }
                    }

                    .e-toolbar-center {
                        .e-toolbar-item:last-child {
                            margin-right: 0;
                        }
                    }

                    .e-toolbar-right {

                        .e-toolbar-item {

                            &:last-child {
                                margin-right: $tbar-item-nrml-mrgn;
                            }

                            &:first-child {
                                margin-left: 0;
                            }
                        }
                    }

                    .e-toolbar-item:last-child {
                        margin-right: $tbar-item-nrml-mrgn;
                    }
                }

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

                > .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:last-child {
                    margin-right: $tbar-item-nrml-mrgn;
                }

                .e-toolbar-right .e-toolbar-item {
                    margin: 0;
                }
            }

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

                &:not(.e-separator) {
                    height: inherit;
                    min-width: $tbar-item-nrml-minwidth;

                    @if ($tbar-skin != 'FluentUI') {
                        padding: $tbar-item-nrml-padding;
                    }
                }

                &.e-separator {
                    margin: $tbar-separator-nrml-mrgn;
                    min-height: $tbar-separator-nrml-minheight;
                    min-width: 1px;
                }

                input[type='checkbox'] {
                    height: auto;
                }

                &.e-popup-text {

                    .e-tbar-btn.e-btn {

                        &.e-tbtn-txt {

                            .e-icons.e-btn-icon {
                                @if $tbar-skin == 'bootstrap5' {
                                    padding-bottom: $tbar-pop-padding-bottom;
                                }
                                @else {
                                    padding: $tbar-zero-value;
                                }
                            }
                        }
                    }
                }

                .e-tbar-btn.e-btn {
                    height: $tbar-btn-nrml-height;
                    margin: $tbar-btn-nrml-mrgn;
                    min-height: $tbar-btn-nrml-minheight;
                    min-width: $tbar-btn-nrml-minwidth;
                    padding: $tbar-btn-nrml-padding;

                    @if $tbar-skin == 'tailwind' or $tbar-skin == 'bootstrap5' {
                        border-radius: 4px;
                    }

                    @if $tbar-skin == 'bootstrap' {
                        line-height: 27px;

                        &:hover,
                        &:focus,
                        &:active {
                            padding: 0 1.5px;
                        }
                    }

                    @if $tbar-skin == 'bootstrap4' {
                        line-height: 27px;

                        &:focus,
                        &:active,
                        &:hover {
                            padding: 0 2px;
                        }
                    }

                    @if $tbar-skin == 'highcontrast' or $tbar-skin == 'fabric' or $tbar-skin == 'FluentUI' {
                        &:focus {
                            outline: none;
                        }
                    }

                    &.e-tbtn-txt {

                        .e-icons.e-btn-icon {
                            padding: $tbar-btn-icn-nrml-padding;
                        }

                        .e-icons.e-icon-right.e-btn-icon {
                            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;

                        @if $tbar-skin == 'bootstrap5' {
                            padding-bottom: 4px;
                        }
                    }
                }

                > * {
                    align-self: center;
                    text-overflow: ellipsis;
                }

                &.e-separator {
                    height: $tbar-separator-nrml-height;
                    vertical-align: middle;

                    + .e-separator {
                        display: none;
                    }

                    &:last-of-type,
                    &:first-of-type {
                        display: none;
                    }
                }
            }
        }

        .e-tbar-btn > :first-child {
            display: inline-block;
        }

        .e-tbar-btn {
            border: $tbar-btn-border;
            cursor: pointer;
            font-family: $tbar-btn-family;
            font-size: $tbar-btn-font-size;
            font-weight: $tbar-btn-weight;
            overflow: hidden;
            padding: $tbar-btn-nrml-padding;
            text-align: center;
            text-decoration: none;
            text-transform: none;

            .e-icons.e-btn-icon {
                font-size: $tbar-btn-font-size;
                vertical-align: middle;
            }

            div {
                vertical-align: middle;
            }

            .e-tbar-btn-text {
                display: inline-block;
                font-family: $tbar-btn-family;
                font-size: $tbar-btn-txt-font-size;
                line-height: inherit;
                vertical-align: middle;
                width: auto;
            }
        }

        &.e-vertical {
            display: flex;
            flex-direction: column;

            &.e-rtl.e-tbar-pos {

                .e-toolbar-left {
                    bottom: 0;
                    top: auto;
                }

                .e-toolbar-right {
                    bottom: auto;
                    top: 0;
                }
            }

            .e-toolbar-items {

                &.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-tbar-btn.e-btn {
                        margin: $tbar-v-btn-nrml-mrgn;
                    }
                }
            }

            .e-hor-nav {
                bottom: 0;
                height: auto;
                left: 0;
                min-height: 40px;
                min-width: 50px;
                right: auto;
                top: auto;
                width: auto;
            }
        }
    }
}


@include export-module('toolbar-theme') {
    /*! toolbar theme */
    // sass-lint:disable no-vendor-prefixes
    .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-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-extended-toolbar {

            .e-toolbar-extended {

                .e-toolbar-item.e-overlay {
                    background: $tbar-default-bg;
                }

                .e-toolbar-item.e-separator {
                    border: $tbar-separator-border-type $tbar-separator-border;
                    border-width: $tba-horizontal-separator;
                }

                .e-toolbar-item .e-tbar-btn .e-icons {
                    color: $tbar-default-icon-color;
                }

                .e-toolbar-item .e-tbar-btn {
                    background: $tbar-default-bg;
                    box-shadow: $tbar-btn-box-shadow;
                    color: $tbar-default-font;

                    .e-toolbar-item .e-tbar-btn-text {
                        color: $tbar-default-font;
                    }

                    @if $tbar-skin == 'bootstrap' {
                        margin: 1px 0;
                    }

                    @if $tbar-skin == 'highcontrast' {
                        border: 2px $tbar-border-type $ext-tbar-btn-border-color;
                    }

                    &:focus {
                        background: $tbar-focus-bg;
                        border-color: $tbar-focus-border-color;
                        border-radius: $tbar-btn-border-radius;
                        color: $tbar-hover-font-color;

                        @if $tbar-skin == 'bootstrap' {
                            border: 1px solid $tbar-focus-border-color;
                            margin: 0;
                        }

                        @if $tbar-skin == 'bootstrap4' {
                            border: 1px solid $tbar-focus-border-color;
                            box-shadow: $tbar-focus-btn-box-shadow;
                        }

                        @if $tbar-skin == 'bootstrap5' {
                            .e-toolbar-item .e-tbar-btn-text,
                            .e-icons {
                                color: $tbar-active-icon-color;
                            }
                        }

                        @if $tbar-skin == 'highcontrast' {
                            border: $tbar-dash-border;

                            &:active {
                                background: $ext-tbar-btn-focus-active-bg-color;
                            }
                        }
                    }

                    &:hover {
                        background: $tbar-hover-bg;
                        border-color: $tbar-hover-border-color;
                        border-radius: $tbar-btn-border-radius;
                        color: $tbar-hover-font-color;

                        @if $tbar-skin == 'bootstrap' {
                            border: 1px solid $tbar-hover-border-color;
                        }

                        @if $tbar-skin == 'highcontrast' {
                            border: 2px $tbar-border-type $ext-tbar-btn-hover-border-color;

                            .e-icons {
                                color: $tbar-hover-font;
                            }

                            &:focus {

                                .e-icons,
                                .e-tbar-btn-text {
                                    color: $tbar-hover-font;
                                }
                            }

                            &:active {

                                .e-icons,
                                .e-tbar-btn-text {
                                    color: $tbar-select-font;
                                }
                            }
                        }

                        @if $tbar-skin == 'bootstrap5' {
                            .e-toolbar-item .e-tbar-btn-text,
                            .e-icons {
                                color: $tbar-active-icon-color;
                            }
                        }
                    }

                    &:active {
                        background: $tbar-btn-press-bg;
                        border-color: $tbar-press-border-color;
                        border-radius: $tbar-btn-border-radius;
                        box-shadow: $tbar-btn-pressed-box-shadow;
                        color: $tbar-btn-active-font-color;

                        @if $tbar-skin == 'bootstrap' {
                            border-left: 1px solid $tbar-press-border-color;
                        }

                        @if $tbar-skin == 'highcontrast' {
                            .e-icons,
                            .e-tbar-btn-text {
                                color: $tbar-pressed-font;
                            }
                        }

                        @if $tbar-skin == 'bootstrap5' {
                            .e-icons {
                                color: $tbar-active-icon-color;
                            }
                        }
                    }
                }
            }
        }

        .e-tbar-btn.e-btn .e-icons {
            color: $tbar-default-icon-color;

            @if $tbar-skin == 'bootstrap5' {
                padding-bottom: 4px;
            }
        }

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

                @if $tbar-skin == 'bootstrap4' {
                    .e-tbar-btn:hover,
                    .e-tbar-btn:active,
                    .e-tbar-btn:focus {
                        background: $primary;
                        box-shadow: none;
                        color: $primary-font;

                        .e-icons,
                        .e-tbar-btn-text {
                            color: inherit;
                        }
                    }

                    .e-tbar-btn {
                        background: $tbar-popup-btn-bg-color;
                    }
                }

                @if $tbar-skin == 'tailwind' or $tbar-skin == 'bootstrap5' {
                    .e-tbar-btn {
                        background: $tbar-popup-btn-bg-color;

                        &:focus {
                            background: $tbar-focus-bg;
                        }

                        &:hover {
                            background: $tbar-hover-bg;
                        }
                    }
                }

                @if $tbar-skin == 'highcontrast' or $tbar-skin == 'fabric' or $tbar-skin == 'FluentUI' {
                    .e-btn:focus {
                        outline: none;
                    }
                }

                &:not(.e-separator) {
                    background: $tbar-item-pop-bg-color;
                }
            }
        }

        &.e-extended-toolbar .e-toolbar-pop {
            background: $tbar-default-bg;
        }

        &.e-toolpop {

            .e-hor-nav.e-nav-active,
            .e-hor-nav.e-nav-active:not(.e-expended-nav) {
                background: $tbar-pressed-bg;
                border: $tbar-nav-press-border;
                box-shadow: $tbar-nav-pressed-box-shadow;

                @if $tbar-skin != 'bootstrap4' {
                    border-left: $border-size $tbar-border-nav-active-type $tbar-pressed-bg;
                }

                @if $tbar-skin == 'highcontrast' {
                    &:focus {
                        border: $tbar-dash-border;
                    }
                }

                .e-icons {
                    color: $tbar-active-font-color;

                    @if $tbar-skin == 'bootstrap4' {
                        &:active {
                            color: inherit;
                        }
                    }
                }
            }
        }

        .e-tbar-btn {
            background: $tbar-items-default-bg;
            box-shadow: $tbar-btn-box-shadow;
            color: $tbar-default-font;

            @if $tbar-skin == 'bootstrap' {
                margin: 1px 0;
            }

            @if $tbar-skin == 'highcontrast' {
                border: 2px $tbar-border-type $tbar-btn-border-color;
            }

            &:focus {
                background: $tbar-focus-bg;

                @if $tbar-skin == 'bootstrap4' {
                    box-shadow: $tbar-focus-btn-box-shadow;
                }

                @if $tbar-skin == 'bootstrap' or $tbar-skin == 'bootstrap4' {
                    border: 1px solid $tbar-focus-border-color;
                    margin: 0;
                }

                border-color: $tbar-focus-border-color;
                border-radius: $tbar-btn-border-radius;
                color: $tbar-hover-font;

                @if $tbar-skin == 'highcontrast' {
                    border: $tbar-dash-border;

                    &:active {
                        background: $tbar-btn-focus-active-bg-color;
                    }
                }

                @if $tbar-skin == 'bootstrap5' {
                    .e-icons,
                    .e-tbar-btn-text {
                        color: $tbar-active-icon-color;
                        padding-bottom: 4px;
                    }
                }
            }

            &:hover {
                background: $tbar-hover-bg;

                @if $tbar-skin == 'bootstrap' or $tbar-skin == 'bootstrap4' {
                    border: 1px solid $tbar-hover-border-color;
                }

                border-color: $tbar-hover-border-color;
                border-radius: $tbar-btn-border-radius;
                color: $tbar-hover-font;

                @if $tbar-skin == 'bootstrap4' {
                    .e-icons,
                    .e-tbar-btn-text {
                        color: inherit;
                    }
                }

                @if $tbar-skin == 'highcontrast' {
                    border: 2px $tbar-border-type $tbar-btn-hover-border-color;

                    .e-icons {
                        color: $tbar-hover-font;
                    }

                    &:focus {
                        .e-icons,
                        .e-tbar-btn-text {
                            color: $tbar-hover-font;
                        }
                    }

                    &:active {
                        .e-icons,
                        .e-tbar-btn-text {
                            color: $tbar-select-font;
                        }
                    }
                }

                @if $tbar-skin == 'bootstrap5' {
                    .e-icons,
                    .e-tbar-btn-text {
                        color: $tbar-active-icon-color;
                        padding-bottom: 4px;
                    }
                }
            }
        }

        .e-toolbar-items {
            background: $tbar-default-bg;

            .e-toolbar-item {

                &.e-overlay {
                    background: $tbar-default-bg;

                    @if $tbar-skin == 'highcontrast' {
                        opacity: 1;
                    }

                    @if $tbar-skin == 'bootstrap4' {
                        opacity: .65;
                    }

                    .e-tbar-btn-text {
                        color: $tbar-default-font-overlay;
                    }

                    .e-icons {
                        color: $tbar-default-icon-overlay;
                    }
                }

                @if $tbar-skin != 'bootstrap5' {
                    @if $tbar-skin != 'highcontrast' and $tbar-skin != 'bootstrap4' {
                        .e-tbar-btn-text {
                            color: $tbar-default-font;
                        }
                    }
                }

                @if $tbar-skin == 'bootstrap4' {
                    .e-tbar-btn {
                        &:hover,
                        &:focus {
                            .e-icons,
                            .e-tbar-btn-text {
                                color: inherit;
                            }
                        }
                    }
                }

                &.e-separator {
                    border: $tbar-separator-border-type $tbar-separator-border;
                    border-width: $tba-horizontal-separator;
                }
            }
        }

        &.e-rtl .e-hor-nav {
            background: $tbar-default-bg;
            border: $tbar-border-nav-type $tbar-default-border;
            border-left: 0;
            border-width: $tbar-popup-rtl-border-width;

            &:not(.e-nav-active):hover {
                background: $tbar-hover-bg;
                color: $tbar-hover-font;
            }
        }

        .e-hor-nav {
            background: $tbar-default-bg;
            border: $tbar-border-nav-type $tbar-default-border;
            border-width: $tbar-popup-border-width;
        }

        .e-hor-nav {

            &::after {
                @include tbar-btn-animation;
            }

            @if $tbar-skin == 'bootstrap' or $tbar-skin == 'bootstrap4' {
                &.e-nav-active {
                    &:active,
                    &:focus,
                    &:hover {
                        border-bottom-right-radius: 0;
                    }
                }
            }

            &:active {
                border: $tbar-nav-press-border;
                box-shadow: $tbar-nav-pressed-box-shadow;
                color: $tbar-select-font;

                @if $tbar-skin == 'bootstrap4' {
                    background: $tbar-hover-bg;

                    .e-icons {
                        color: inherit;
                    }
                }

                &::after {
                    @include tbar-btn-animation-after;
                }
            }

            &:hover {
                background: $tbar-hover-bg;
                border-left: $tbar-nav-hover-border;

                @if $tbar-skin == 'bootstrap4' {
                    background: $tbar-popup-hover-bg;

                    .e-icons {
                        color: inherit;
                    }
                }

                @if $tbar-skin == 'bootstrap5' {
                    color: $tbar-active-icon-color;

                    .e-icons {
                        color: inherit;
                    }
                }
                @else {
                    color: $tbar-hover-font;
                }

                @if $tbar-skin == 'highcontrast' {
                    &:not(.e-nav-active) {
                        border: 2px $tbar-border-type $tbar-nav-hover-color;
                    }

                    &:active {
                        background: $tbar-nav-hover-active-bg-color;
                        border: 0;
                    }
                }
            }

            &:focus {
                background: $tbar-hover-bg;
                border-left: $tbar-nav-focus-border;

                @if $tbar-skin != 'bootstrap' {
                    border-color: $tbar-pressed-border;
                }

                @if $tbar-skin == 'bootstrap4' {
                    .e-icons {
                        color: inherit;
                    }
                }

                @if $tbar-skin == 'bootstrap5' {
                    color: $tbar-active-icon-color;

                    .e-icons {
                        color: inherit;
                    }
                }
                @else {
                    color: $tbar-pressed-font;
                }

                @if $tbar-skin == 'highcontrast' {
                    background: inherit;
                    border: $tbar-dash-border;
                }
            }
        }

        .e-tbar-btn {

            &:active {
                background: $tbar-press-bg;

                @if $tbar-skin == 'bootstrap5' {
                    background: $tbar-active-bg;
                }

                @if $tbar-skin == 'bootstrap' {
                    border-left: 1px solid $tbar-press-border-color;
                }

                border-color: $tbar-press-border-color;
                border-radius: $tbar-btn-border-radius;
                box-shadow: $tbar-btn-pressed-box-shadow;
                color: $tbar-press-font;

                @if $tbar-skin == 'bootstrap4' {
                    background: $tbar-active-btn-bg;
                    border: 1px solid $tbar-active-border-color;

                    .e-icons,
                    .e-tbar-btn-text {
                        color: inherit;
                    }
                }

                @if $tbar-skin == 'highcontrast' {
                    color: $tbar-pressed-font;

                    .e-icons,
                    .e-tbar-btn-text {
                        color: $tbar-pressed-font;
                    }
                }
            }
        }
    }
}



@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 */
// sass-lint:disable-all
/*! Horizontal Tab */
$tab-skin: 'bootstrap5' !default;

// font definitions
$tab-font-family: $font-family !default;
$tab-big-vertical-nav-arrow-font-size: 12px !default;
$tab-nrml-vertical-nav-arrow-font-size: 10px !default;
$tab-content-font-color: $content-text-color !default;
$tab-big-font-size: 16px !default;
$tab-nrml-font-size: 14px !default;
$tab-font-weight: 400 !default;
$tab-semi-font-weight: 400 !default;
$tab-light-font-weight: 400 !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-alt-item-border: 0 !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 2px 0 0 !default;
$tab-nrml-boot-item-margin: 0 2px 0 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-ileft-active-text-wrap-padding: 0 !default;
$tab-nrml-ileft-active-text-wrap-padding: 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-nrml-active-text-container-height: 32px !default;
$tab-big-active-it-text-container-height: 42px !default;
$tab-nrml-active-it-text-container-height: 32px !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-padding: 0 !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-hover-nav-pop-icon-top: 0 !default;
$tab-nrml-hover-nav-pop-icon-top: 0 !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-pop-close-icon-top: 0 !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: $primary-bg-color-focus !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-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;

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

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

                @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' or $tbar-skin == 'FluentUI' {
                    height: $tab-big-height;
                    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-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 {
                    @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                        margin: 1px 2px 0 0;
                    }
                }
            }

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

                    @if $tab-skin == 'FluentUI' {
                        width: 38px;
                    }

                    @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                        border-radius: 4px;
                        width: 38px;
                    }
                }
            }

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

                    @if $tab-skin == 'fabric' {
                        height: $tab-big-height - 2;
                    }
                    @else if $tab-skin == 'highcontrast' {
                        height: $tab-big-height - 4;
                    }
                }

                .e-tab-text {
                    font-size: $tab-big-font-size;

                    @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                        align-self: auto;
                    }
                }

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

                    @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                        &.e-ileft:not(.e-icon) .e-tab-icon::before {
                            position: relative;
                            top: -.5px;
                        }
                    }

                    .e-text-wrap {
                        height: $tab-big-active-text-container-height;
                        margin-top: $tab-active-text-container-margin;

                        @if $tab-skin == 'fabric' {
                            height: $tab-big-height - 2;
                        }
                        @else if $tab-skin == 'highcontrast' {
                            height: $tab-big-height - 4;
                        }
                    }

                    &.e-ileft .e-text-wrap,
                    &.e-iright .e-text-wrap {
                        height: $tab-big-active-it-text-container-height;

                        @if $tab-skin == 'fabric' {
                            height: $tab-big-height - 2;
                        }
                        @else if $tab-skin == 'highcontrast' {
                            height: $tab-big-height - 4;
                        }
                    }

                    &.e-ileft .e-text-wrap {
                        padding: $tab-big-ileft-active-text-wrap-padding;

                        @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                            padding: 0;
                        }
                    }
                }

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

                    @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                        line-height: $tab-big-icon-container-size;
                    }
                }

                .e-tab-icon,
                .e-tab-icon::before {
                    font-size: $tab-big-icon-size;
                }

                &.e-icon {

                    .e-tab-wrap {
                        padding: $tab-big-io-wrap-padding;
                    }
                }

                @if $tab-skin == 'FluentUI' {
                    .e-icon-right {
                        margin: $tab-big-it-text-margin;

                        @media screen and (max-width: 480px) {
                            margin: $tab-mob-it-text-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;
                    }

                    @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {

                        .e-text-wrap {
                            height: auto;
                        }

                        &.e-active .e-tab-wrap {
                            height: 72px;
                        }
                    }
                }

                &.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-big-pop-item-height;

                        @if $tab-skin == 'fabric' {
                            height: $tab-big-pop-item-height - 2;
                        }
                        @else if $tab-skin == 'highcontrast' {
                            height: $tab-big-pop-item-height - 4;
                        }
                    }

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

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

                        @if $tab-skin == 'highcontrast' {
                            top: -2px;
                        }
                    }
                }
            }

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

                        @if $tab-skin == 'highcontrast' {
                            top: -2px;
                        }
                    }

                    &:hover {
                        @if $tab-skin == 'bootstrap' {
                            line-height: 42px;
                        }

                        @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                            line-height: 38px;
                        }

                        &::before {
                            top: $tab-big-hover-nav-pop-icon-top;

                            @if $tab-skin == 'bootstrap' {
                                line-height: 42px;
                                top: .5px;
                            }

                            @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                                line-height: 38px;
                                top: .5px;
                            }

                            @if $tab-skin == 'highcontrast' {
                                top: -2px;
                            }
                        }
                    }
                }

                &:focus {

                    .e-popup-up-icon,
                    .e-popup-down-icon {
                        @if $tab-skin == 'bootstrap' {
                            line-height: 42px;
                        }

                        @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                            line-height: 38px;
                        }

                        &::before {
                            top: $tab-big-hover-nav-pop-icon-top;

                            @if $tab-skin == 'bootstrap' {
                                line-height: 42px;
                            }

                            @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                                line-height: 38px;
                            }

                            @if $tab-skin == 'highcontrast' {
                                top: -2px;
                            }
                        }

                        &:hover {
                            @if $tab-skin == 'bootstrap' {
                                line-height: 42px;
                                top: -2px;
                            }

                            @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                                line-height: 38px;
                                top: -2px;
                            }
                        }
                    }
                }
            }

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

                        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                            .e-close-icon::before {
                                top: .5px;
                            }

                            &.e-itop .e-text-wrap,
                            &.e-ibottom .e-text-wrap {
                                height: initial;
                            }

                            &.e-itop .e-close-icon::before,
                            &.e-ibottom .e-close-icon::before {
                                top: 1.5px;
                            }
                        }
                    }

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

                        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4'or $tbar-skin == 'bootstrap5' {

                            .e-tab-text {
                                padding-top: .5px;
                            }

                            .e-close-icon::before {
                                top: 0;
                            }
                        }
                    }

                    &.e-itop,
                    &.e-ibottom {
                        padding-bottom: 0;
                        padding-top: 0;
                    }

                    &.e-itop.e-active .e-tab-wrap:focus,
                    &.e-ibottom.e-active .e-tab-wrap:focus {

                        @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {

                            .e-icon-close::before {
                                top: -1px;
                            }
                        }
                    }

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

                        @if $tab-skin == 'fabric' {
                            height: $tab-big-height - 2;
                        }
                        @else if $tab-skin == 'highcontrast' {
                            height: $tab-big-height - 4;
                        }
                    }

                    &.e-active.e-itop .e-text-wrap,
                    &.e-active.e-ibottom .e-text-wrap {
                        height: $tab-big-height;

                        @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                            height: auto;
                        }
                    }

                    &.e-itop.e-active .e-text-wrap,
                    &.e-ibottom.e-active .e-text-wrap {
                        height: initial;
                    }

                    &.e-ileft.e-active {

                        @if $tab-skin == 'fabric' {
                            height: $tab-big-height - 2;
                        }
                        @else if $tab-skin == 'highcontrast' {
                            height: $tab-big-height - 4;
                        }
                    }
                }
            }

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

                    @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {

                        &.e-ileft.e-icon {
                            min-height: $tab-big-height;
                            min-width: $tab-big-height;
                        }
                    }
                }

                .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-toolbar-item.e-active,
                .e-toolbar-item:not(.e-separator):last-child.e-active {

                    @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {

                        .e-text-wrap::before {
                            bottom: -10px;
                            top: auto;
                        }
                    }
                }

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

            @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                &.e-rtl .e-toolbar-item.e-active {
                    margin: 0 0 0 2px;
                }
            }

            &.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-big-height;

                        @if $tab-skin == 'fabric' {
                            height: $tab-big-height - 2;
                        }
                        @else if $tab-skin == 'highcontrast' {
                            height: $tab-big-height - 4;
                        }
                    }

                    &.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-big-pop-item-height;

                                @if $tab-skin == 'fabric' {
                                    height: $tab-big-pop-item-height - 2;
                                }
                                @else if $tab-skin == 'highcontrast' {
                                    height: $tab-big-pop-item-height - 4;
                                }
                            }
                        }

                        &.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-big-height;
                                padding: 0;

                                @if $tab-skin == 'fabric' {
                                    height: $tab-big-height - 2;
                                }
                                @else if $tab-skin == 'highcontrast' {
                                    height: $tab-big-height - 4;
                                }
                            }

                            &.e-ileft {

                                @if $tab-skin == 'fabric' {
                                    height: $tab-big-height - 2;
                                }
                                @else if $tab-skin == 'highcontrast' {
                                    height: $tab-big-height - 4;
                                }
                            }
                        }
                    }
                }
            }
        }

        &.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 {

            @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {

                .e-tab-header {

                    .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child.e-active {
                        margin: $tab-big-rtl-item-margin;
                    }

                    &.e-horizontal-bottom {

                        .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:not(.e-separator) {
                            margin: 0 0 0 2px;

                            &.e-active {
                                margin: 0 0 0 2px;
                            }
                        }
                    }
                }
            }
        }

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

                    @if $tab-skin == 'tailwind' {
                        padding: 0 12px;
                    }
                }

                .e-toolbar-item {

                    &:not(.e-separator) {
                        height: $tab-big-fill-height;
                        margin: $tab-alt-item-margin;
                        min-height: $tab-big-fill-height;

                        @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-big-fill-height;

                        @media screen and (max-width: 480px) {
                            height: $tab-mob-fill-height;
                        }

                        @if $tab-skin == 'fabric' {
                            height: $tab-big-fill-height - 2;
                        }

                        @if $tab-skin == 'highcontrast' {
                            height: $tab-big-fill-height - 4;
                        }
                    }

                    &.e-active {
                        padding: $tab-alt-big-active-item-padding;

                        .e-tab-wrap {
                            margin-bottom: $tab-fill-big-active-item-wrap-margin-bottom;
                        }

                        .e-text-wrap {
                            height: $tab-big-fill-height;

                            @media screen and (max-width: 480px) {
                                height: $tab-mob-fill-height;
                            }

                            @if $tab-skin == 'fabric' {
                                height: $tab-big-fill-height - 2;
                            }

                            @if $tab-skin == 'highcontrast' {
                                height: $tab-big-fill-height - 4;
                            }
                        }

                        &.e-ileft .e-text-wrap,
                        &.e-iright .e-text-wrap {
                            height: $tab-fill-big-active-it-text-container-height;

                            @media screen and (max-width: 480px) {
                                height: $tab-fill-big-active-it-text-container-height;
                            }

                            @if $tab-skin == 'fabric' {
                                height: $tab-big-fill-height - 2;
                            }
                            @else if $tab-skin == 'highcontrast' {
                                height: $tab-big-fill-height - 4;
                            }
                        }
                    }

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

                        @if $tab-skin == 'fabric' {
                            height: $tab-big-fill-height - 2;
                        }

                        @if $tab-skin == 'highcontrast' {
                            height: $tab-big-fill-height - 4;
                        }
                    }

                    .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-focus-big-fill-height;

                            @if $tab-skin == 'fabric' {
                                height: $tab-big-fill-height - 2;
                            }

                            @if $tab-skin == 'highcontrast' {
                                height: $tab-big-fill-height - 4;
                            }
                        }

                        &.e-active .e-tab-wrap:focus {

                            .e-text-wrap {
                                @if $tab-skin == 'fabric' {
                                    height: $tab-big-fill-height - 2;
                                }
                                @else if $tab-skin == 'highcontrast' {
                                    height: $tab-big-fill-height - 4;
                                }
                            }

                            .e-close-icon::before {

                                @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                                    top: 1px;
                                }
                            }
                        }

                        &.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-horizontal-bottom {

                        .e-tab-wrap:focus .e-text-wrap {
                            @if $tab-skin == 'fabric' {
                                height: $tab-big-fill-height - 2;
                            }

                            @if $tab-skin == 'highcontrast' {
                                height: $tab-big-fill-height - 4;
                            }
                        }
                    }
                }
            }

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

                    @if $tab-skin == 'tailwind' {
                        padding: 0 12px;
                    }
                }

                .e-toolbar-item {

                    &:not(.e-separator) {
                        @if $tab-skin != 'bootstrap5' {
                            margin: $tab-alt-item-margin;
                        }
                    }

                    .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-alt-big-active-item-padding;

                        .e-tab-wrap {
                            margin-bottom: $tab-bg-big-active-item-wrap-margin-bottom;
                        }

                        .e-text-wrap {
                            height: $tab-big-height;

                            @if $tab-skin == 'fabric' {
                                height: $tab-big-height - 2;
                            }

                            @if $tab-skin == 'highcontrast' {
                                height: $tab-big-height - 4;
                            }
                        }
                    }

                    &:hover {
                        @if $tab-skin == 'highcontrast' {
                            &.e-itop,
                            &.e-ibottom {

                                .e-text-wrap {
                                    height: auto;
                                }
                            }
                        }
                    }
                }

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

                    @if $tab-skin == 'FluentUI' {
                        .e-icon-right {
                            margin: $tab-rtl-big-it-text-margin;

                            @media screen and (max-width: 480px) {
                                margin: $tab-rtl-mob-it-text-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;

                @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                    display: block;
                }
            }

            &:not(.e-vertical) {

                &::before {
                    bottom: 0;
                    top: 0;
                    width: 100%;
                }
            }

            .e-toolbar-items {
                height: auto;
                margin: 0;
                min-height: $tab-nrml-height;
                position: relative;

                @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' or $tbar-skin == 'FluentUI' {
                    height: $tab-nrml-height;
                    min-height: $tab-nrml-height;
                }

                @media screen and (max-width: 480px) {
                    min-height: $tab-big-height;

                    @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                        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;
                    }
                }

                @if $tab-skin == 'FluentUI' {
                    .e-toolbar-item.e-active {
                        position: relative;

                        &:hover::before {
                            left: 0;
                            right: 0;
                        }

                        &::before {
                            background-color: $tab-alt-hdr-bg-color;
                            bottom: 0;
                            content: '';
                            height: 2px;
                            left: 8px;
                            position: absolute;
                            right: 8px;
                            transition: left .267s cubic-bezier(.1, .25, .75, .9) 0s, right .267s cubic-bezier(.1, .25, .75, .9) 0s;
                        }

                        &::after {
                            color: transparent;
                            content: attr(data-content);
                            display: block;
                            font-weight: 700;
                            height: 1px;
                            overflow: hidden;
                            visibility: hidden;
                        }
                    }
                }
            }

            .e-toolbar-items.e-hscroll {

                &.e-scroll-device {
                    padding: 0;

                    .e-scroll-right-nav {
                        display: none;
                    }
                }

                @if $tab-skin == 'bootstrap'or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {

                    &[style*= 'overflow: hidden'] .e-toolbar-item:not(.e-separator).e-active {
                        margin-bottom: 0;
                    }
                }

                @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                    .e-hscroll-bar {
                        padding: 0 1px;
                    }
                }

                .e-scroll-nav {
                    width: 40px;

                    @if $tab-skin == 'FluentUI' {
                        width: 32px;
                    }

                    @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                        border-radius: 4px;
                        width: 32px;
                    }

                    @if $tab-skin == 'tailwind' {
                        width: 24px;
                    }
                }

                &: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;
                transition: left .125s cubic-bezier(.35, 0, .25, 1), right .25s cubic-bezier(.35, 0, .25, 1);

                @if $tab-skin == 'tailwind' {
                    border-radius: $tab-border-width;
                    transition: all .4s cubic-bezier(.25,.46,.45,.94); // sass-lint:disable-line no-transition-all space-after-comma
                }
            }

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

                    @media screen and (max-width: 480px) {
                        height: $tab-big-height;
                    }

                    @if $tab-skin == 'fabric' {
                        height: $tab-nrml-height - 2;
                    }
                    @else if $tab-skin == 'highcontrast' {
                        height: $tab-nrml-height - 4;
                    }
                }

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

                    @media screen and (max-width: 480px) {
                        font-size: $tab-big-font-size;
                    }
                }

                @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                    .e-tab-text {
                        align-self: auto;
                    }
                }

                &.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-active-text-container-height;
                        margin-top: $tab-active-text-container-margin;

                        @media screen and (max-width: 480px) {
                            height: $tab-big-active-text-container-height;
                        }

                        @if $tab-skin == 'fabric' {
                            height: $tab-nrml-height - 2;
                        }
                        @else if $tab-skin == 'highcontrast' {
                            height: $tab-nrml-height - 4;
                        }
                    }

                    .e-tab-wrap {
                        margin-bottom: $tab-nrml-active-item-wrap-margin-bottom;

                        @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                            &:hover {
                                border: 0;
                            }
                        }
                    }

                    .e-tab-text {
                        font-weight: $tab-semi-font-weight;
                    }

                    @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                        .e-tab-text {
                            align-self: auto;
                        }
                    }

                    @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                        .e-tab-icon::before {
                            top: -1px;
                        }
                    }

                    &.e-ileft,
                    &.e-iright {

                        .e-text-wrap {
                            height: $tab-nrml-active-it-text-container-height;
                            padding: $tab-nrml-ileft-active-text-wrap-padding;

                            @media screen and (max-width: 480px) {
                                height: $tab-big-active-it-text-container-height;
                            }

                            @if $tab-skin == 'fabric' {
                                height: $tab-nrml-height - 2;
                                padding: 0;
                            }
                            @else if $tab-skin == 'highcontrast' {
                                height: $tab-nrml-height - 4;
                                padding: 0;
                            }
                        }

                        @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                            .e-tab-wrap .e-tab-text {
                                align-self: auto;
                            }

                            .e-tab-wrap:focus .e-tab-text {
                                align-self: auto;
                            }
                        }
                    }
                }

                .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: $tab-pop-close-icon-top;

                    @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                        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;

                    @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                        line-height: $tab-nrml-icon-container-size;
                    }

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

                @if $tab-skin == 'FluentUI' {
                    .e-icon-right {
                        margin: $tab-nrml-it-text-margin;

                        @media screen and (max-width: 480px) {
                            margin: $tab-mob-it-text-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-big-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-big-icon-top-bottom-item-height;
                        }

                        &:focus {

                            .e-text-wrap {
                                height: auto;
                            }
                        }
                    }

                    .e-text-wrap {
                        display: block;
                        height: auto;
                    }

                    &.e-active {

                        .e-tab-wrap {
                            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                                height: 62px;
                            }

                            &: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;

                        @if $tab-skin == 'tailwind' {
                            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-height;
                        width: 100%;

                        @if $tab-skin == 'fabric' {
                            height: $tab-nrml-pop-item-height - 2;
                        }
                        @else if $tab-skin == 'highcontrast' {
                            height: $tab-nrml-pop-item-height - 4;
                        }
                    }

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

                    @if $tab-skin == 'fabric' {
                        top: -1px;
                    }

                    @if $tab-skin == 'highcontrast' {
                        top: -2px;
                    }
                }

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

                        @if $tab-skin == 'fabric' {
                            top: -1px;
                        }

                        @if $tab-skin == 'highcontrast' {
                            top: -2px;
                        }

                        @media screen and (max-width: 480px) {
                            font-size: $tab-mob-nav-icon-size;
                        }
                    }

                    &:hover {
                        @if $tab-skin == 'bootstrap' {
                            line-height: 34px;
                        }

                        @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                            line-height: 32px;
                        }

                        &::before {
                            top: $tab-nrml-hover-nav-pop-icon-top;

                            @if $tab-skin == 'fabric' {
                                top: -1px;
                            }

                            @if $tab-skin == 'bootstrap' {
                                line-height: 34px;
                                top: 0;

                                @media screen and (max-width: 480px) {
                                    line-height: 43px;
                                }
                            }

                            @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                                line-height: 32px;
                                top: 0;

                                @media screen and (max-width: 480px) {
                                    line-height: 43px;
                                }
                            }

                            @if $tab-skin == 'highcontrast' {
                                top: -2px;
                            }
                        }
                    }
                }

                .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 {
                        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                            line-height: 32px;
                        }

                        &::before {
                            top: $tab-nrml-hover-nav-pop-icon-top;

                            @if $tab-skin == 'fabric' {
                                top: -1px;
                            }

                            @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                                line-height: 32px;
                                top: 0;

                                @media screen and (max-width: 480px) {
                                    line-height: 43px;
                                }
                            }

                            @if $tab-skin == 'highcontrast' {
                                top: -2px;
                            }
                        }

                        &:hover {
                            @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                                line-height: 32px;
                                top: -.5px;
                            }
                        }
                    }
                }
            }

            &.e-horizontal-bottom {

                @if $tab-skin == 'FluentUI' {
                    .e-toolbar-items .e-toolbar-item.e-active {
                        position: relative;

                        &:hover::before {
                            left: 0;
                            right: 0;
                        }

                        &::before {
                            background-color: $tab-alt-hdr-bg-color;
                            content: '';
                            height: 2px;
                            left: 8px;
                            position: absolute;
                            right: 8px;
                            top: 0;
                            transition: left .267s cubic-bezier(.1, .25, .75, .9) 0s, right .267s cubic-bezier(.1, .25, .75, .9) 0s;
                        }

                        &::after {
                            color: transparent;
                            content: attr(data-content);
                            display: block;
                            font-weight: 700;
                            height: 1px;
                            overflow: hidden;
                            visibility: hidden;
                        }
                    }
                }

                &::before {
                    bottom: auto;
                }

                @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                    .e-hscroll-bar {
                        margin-top: -1px;
                    }
                }

                .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-height;
                            padding: $tab-even-active-text-container-padding;

                            @if $tab-skin == 'fabric' {
                                height: $tab-nrml-height - 2;
                                padding: 0;
                            }
                            @else if $tab-skin == 'highcontrast' {
                                height: $tab-nrml-height - 4;
                                padding: 0;
                            }
                        }

                        @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                            .e-text-wrap::before,
                            &:not(.e-separator):last-child .e-text-wrap::before {
                                top: 0;
                            }

                            &.e-itop {

                                @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                                    .e-tab-wrap:focus .e-close-icon::before {
                                        top: 0;
                                    }

                                    .e-text-wrap {
                                        height: auto;
                                    }
                                }
                            }
                        }

                        &.e-ileft {

                            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                                .e-tab-wrap .e-tab-text {
                                    align-self: auto;
                                }

                                .e-tab-wrap:focus .e-tab-text {
                                    align-self: auto;
                                }
                            }
                        }
                    }

                    &.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: top .125s cubic-bezier(.35, 0, .25, 1), bottom .25s cubic-bezier(.35, 0, .25, 1);
                    width: 2px;

                    @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                        transition: initial;
                    }
                }

                .e-toolbar-items {
                    height: inherit;

                    &.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 {

                        @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                            min-height: $tab-nrml-height;
                            min-width: $tab-nrml-height;

                            .e-tab-icon {
                                margin: auto;
                            }
                        }
                    }

                    &.e-itop,
                    &.e-ibottom {

                        .e-close-icon {
                            right: $tab-v-nrml-close-icon-top-bottom-right;
                        }
                    }
                }

                .e-toolbar-pop {
                    top: initial !important; // sass-lint:disable-line no-important
                }

                &.e-vertical-left {
                    float: left;

                    &::before {
                        right: 0;
                    }

                    .e-indicator {
                        left: auto;
                        right: 0;
                    }

                    @if $tab-skin == 'FluentUI' {
                        .e-toolbar-items .e-toolbar-item.e-active {
                            position: relative;

                            &:hover::before {
                                bottom: 0;
                                height: 100%;
                            }

                            &::before {
                                background-color: $tab-alt-hdr-bg-color;
                                bottom: 10px;
                                content: '';
                                height: 60%;
                                left: 99%;
                                position: absolute;
                                right: 0;
                                transition: bottom .267s cubic-bezier(.1, .25, .75, .9) 0s, height .267s cubic-bezier(.1, .25, .75, .9) 0s;
                                width: 2px;
                            }

                            &::after {
                                color: transparent;
                                content: attr(data-content);
                                display: block;
                                font-weight: 700;
                                height: 1px;
                                overflow: hidden;
                                visibility: hidden;
                            }
                        }
                    }
                }

                &.e-vertical-right {
                    float: right;

                    &::before {
                        right: auto;
                    }

                    .e-indicator {
                        left: 0;
                        right: auto;
                    }

                    .e-tab-wrap {
                        text-align: right;
                    }

                    .e-toolbar-pop {

                        .e-tab-text {
                            width: auto;
                        }
                    }

                    @if $tab-skin == 'FluentUI' {
                        .e-toolbar-items .e-toolbar-item.e-active {
                            position: relative;

                            &:hover::before {
                                bottom: 0;
                                height: 100%;
                            }

                            &::before {
                                background-color: $tab-alt-hdr-bg-color;
                                bottom: 10px;
                                content: '';
                                height: 60%;
                                left: 0;
                                position: absolute;
                                right: 99%;
                                transition: bottom .267s cubic-bezier(.1, .25, .75, .9) 0s, height .267s cubic-bezier(.1, .25, .75, .9) 0s;
                                width: 2px;
                            }

                            &::after {
                                color: transparent;
                                content: attr(data-content);
                                display: block;
                                font-weight: 700;
                                height: 1px;
                                overflow: hidden;
                                visibility: hidden;
                            }
                        }
                    }
                }

                .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 {
                    @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                        .e-text-wrap {
                            position: static;

                            &::before {
                                content: none;
                            }
                        }

                        .e-tab-wrap::before {
                            content: '';
                            display: block;
                            position: absolute;
                            top: 96%;
                            width: calc(100% - 16px);

                            @if $tab-skin == 'fabric' {
                                border: 1px solid $theme-primary;
                            }
                            @else if $tab-skin == 'highcontrast' {
                                border: 1px solid $selection-bg;
                            }
                        }
                    }
                }

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

                        @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                            width: 3px;
                        }
                    }

                    .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 {
                        @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                            .e-tab-wrap::before {
                                top: 0;
                            }
                        }
                    }
                }
            }

            @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                &.e-rtl .e-tab-header .e-toolbar-item.e-active {
                    margin: 0 0 0 2px;
                }
            }

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

                        @if $tab-skin == 'fabric' {
                            height: $tab-nrml-height - 2;
                        }
                        @else if $tab-skin == 'highcontrast' {
                            height: $tab-nrml-height - 4;
                        }
                    }
                }

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

                            @if $tab-skin == 'fabric' {
                                height: $tab-nrml-pop-item-height - 2;
                            }
                            @else if $tab-skin == 'highcontrast' {
                                height: $tab-nrml-pop-item-height - 4;
                            }
                        }
                    }

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

                            @if $tab-skin == 'fabric' {
                                height: $tab-nrml-height - 2;
                            }
                            @else if $tab-skin == 'highcontrast' {
                                height: $tab-nrml-height - 4;
                            }
                        }

                        &.e-ileft {

                            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                                .e-tab-wrap:focus .e-tab-text {
                                    align-self: auto;
                                }
                            }
                        }
                    }

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

                @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                    &::before {
                        display: none;
                    }
                }

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

                        @if $tab-skin == 'tailwind' {
                            padding: 0 8px;
                        }
                    }
                }

                .e-toolbar-item {

                    &:not(.e-separator) {
                        height: $tab-nrml-fill-height;
                        margin: $tab-alt-item-margin;
                        min-height: $tab-nrml-fill-height;

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

                        @media screen and (max-width: 480px) {
                            height: $tab-mob-fill-height;
                        }

                        @if $tab-skin == 'fabric' {
                            height: $tab-nrml-fill-height - 2;
                        }

                        @if $tab-skin == 'highcontrast' {
                            height: $tab-nrml-fill-height - 4;
                        }
                    }

                    &.e-active {
                        padding: $tab-alt-nrml-active-item-padding;

                        .e-tab-wrap {
                            margin-bottom: $tab-fill-nrml-active-item-wrap-margin-bottom;
                        }

                        .e-text-wrap {
                            height: $tab-nrml-fill-height;

                            @media screen and (max-width: 480px) {
                                height: $tab-mob-fill-height;
                            }

                            @if $tab-skin == 'fabric' {
                                height: $tab-nrml-fill-height - 2;
                            }

                            @if $tab-skin == 'highcontrast' {
                                height: $tab-nrml-fill-height - 4;
                            }
                        }

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

                            @if $tab-skin == 'fabric' {
                                height: $tab-nrml-fill-height - 2;
                            }
                            @else if $tab-skin == 'highcontrast' {
                                height: $tab-nrml-fill-height - 4;
                            }
                        }
                    }

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

                                @media screen and (max-width: 480px) {
                                    height: $tab-mob-fill-height;
                                }

                                @if $tab-skin == 'fabric' {
                                    height: $tab-nrml-fill-height - 2;
                                }

                                @if $tab-skin == 'highcontrast' {
                                    height: $tab-nrml-fill-height - 4;
                                }
                            }
                        }

                        &.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-focus-nrml-fill-height;

                            @if $tab-skin == 'fabric' {
                                height: $tab-nrml-fill-height - 2;
                            }

                            @if $tab-skin == 'highcontrast' {
                                height: $tab-nrml-fill-height - 4;
                            }
                        }
                    }

                    &.e-active .e-tab-wrap:focus {

                        @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                            .e-text-wrap {
                                @if $tab-skin == 'fabric' {
                                    height: $tab-nrml-fill-height - 2;
                                }
                                @else if $tab-skin == 'highcontrast' {
                                    height: $tab-nrml-fill-height - 4;
                                }
                            }

                            .e-close-icon::before {
                                top: 1px;
                            }
                        }
                    }

                    &.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 {

                @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                    &::before {
                        display: none;
                    }
                }

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

                    @if $tab-skin == 'tailwind' {
                        padding: 0 8px;
                    }
                }

                .e-toolbar-item {

                    &:not(.e-separator) {
                        margin: $tab-alt-item-margin;
                    }

                    &:hover {
                        @if $tab-skin == 'highcontrast' {
                            &.e-itop .e-text-wrap,
                            &.e-ibottom .e-text-wrap {
                                height: auto;
                            }
                        }
                    }

                    .e-tab-wrap {
                        padding: $tab-bg-nrml-wrap-padding;

                        @media screen and (max-width: 480px) {
                            padding: $tab-bg-big-wrap-padding;
                        }
                    }

                    &.e-active {
                        padding: $tab-alt-nrml-active-item-padding;

                        .e-tab-wrap {
                            margin-bottom: $tab-bg-nrml-active-item-wrap-margin-bottom;
                        }

                        .e-text-wrap {
                            height: $tab-nrml-height;

                            @if $tab-skin == 'fabric' {
                                height: $tab-nrml-height - 2;
                            }

                            @if $tab-skin == 'highcontrast' {
                                height: $tab-nrml-height - 4;
                            }
                        }

                        .e-tab-text {
                            font-weight: $tab-light-font-weight;
                        }
                    }
                }

                &.e-vertical {

                    @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {

                        .e-indicator {
                            display: none;
                        }
                    }

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

                                @if $tab-skin == 'fabric' {
                                    height: $tab-nrml-pop-item-height - 2;
                                }
                                @else if $tab-skin == 'highcontrast' {
                                    height: $tab-nrml-pop-item-height - 4;
                                }
                            }
                        }
                    }
                }
            }

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

                @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                    .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child.e-active {
                        margin: $tab-nrml-rtl-item-margin;
                    }
                }

                .e-toolbar-item:not(.e-separator) {
                    margin: $tab-nrml-rtl-item-margin;

                    @if $tab-skin == 'FluentUI' {
                        .e-icon-right {
                            margin: $tab-rtl-nrml-it-text-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;
                    }
                }

                @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                    &.e-horizontal-bottom {

                        .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:not(.e-separator) {
                            margin: 0 0 0 2px;

                            &.e-active {
                                margin: 0 0 0 2px;

                                .e-tab-text {
                                    margin-bottom: 0;
                                }
                            }
                        }
                    }
                }

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

            @media screen and (max-width: 480px) {
                height: $tab-big-height;
            }

            @if $tab-skin == 'fabric' {
                height: $tab-nrml-height - 2;
            }
            @else if $tab-skin == 'highcontrast' {
                height: $tab-nrml-height - 4;
            }
        }

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

            @media screen and (max-width: 480px) {
                font-size: $tab-big-font-size;
            }
        }

        @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
            .e-tab-text {
                align-self: auto;
            }
        }

        .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: $tab-pop-close-icon-top;

            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                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;

            @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                line-height: $tab-nrml-icon-container-size;
            }

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

        @if $tab-skin == 'FluentUI' {
            .e-icon-right {
                margin: $tab-nrml-it-text-margin;

                @media screen and (max-width: 480px) {
                    margin: $tab-mob-it-text-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-big-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-big-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-big-height;

            @if $tab-skin == 'fabric' {
                height: $tab-big-height - 2;
            }
            @else if $tab-skin == 'highcontrast' {
                height: $tab-big-height - 4;
            }
        }

        .e-tab-text {
            font-size: $tab-big-font-size;

            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                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;

            @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                line-height: $tab-big-icon-container-size;
            }
        }

        .e-tab-icon,
        .e-tab-icon::before {
            font-size: $tab-big-icon-size;
        }

        &.e-icon {

            .e-tab-wrap {
                padding: $tab-big-io-wrap-padding;
            }
        }

        @if $tab-skin == 'FluentUI' {
            .e-icon-right {
                margin: $tab-big-it-text-margin;

                @media screen and (max-width: 480px) {
                    margin: $tab-mob-it-text-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;
            }

            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {

                .e-text-wrap {
                    height: auto;
                }

                &.e-active .e-tab-wrap {
                    height: 72px;
                }
            }
        }

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

            @if $tab-skin == 'FluentUI' {
                box-shadow: none;
            }

            @if $tab-skin == 'tailwind' {
                font-weight: $tab-font-weight;
            }

            @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {

                &::before {
                    border-color: $tab-hdr-bdr-color;
                    border-style: solid;
                }

                &:not(.e-vertical) {

                    &::before {
                        border-width: 0 0 1px;
                    }
                }

                &[style*= 'overflow: hidden'] {
                    border: 0;
                }
            }
            @else {
                border-bottom: $tab-hdr-border;
            }

            &:not(.e-vertical) {

                .e-toolbar-item.e-active {
                    border-bottom: $tab-active-item-hide-border;

                    @if $tab-skin == 'FluentUI' {
                        margin-bottom: $tab-item-wrap-border-radius;
                    }
                }
            }

            .e-toolbar-items {
                background: inherit;
            }

            .e-indicator {
                background: $tab-border-color;
            }

            .e-toolbar-item {
                background: inherit;
                border: $tab-item-border;

                @if $tab-skin == 'FluentUI' {
                    &:hover {
                        background: $tab-alt-hover-bg-color;
                    }
                }

                .e-ripple-element {
                    background: $tab-ripple-bg-color;
                }

                .e-tab-wrap {
                    border-radius: $tab-active-item-border-radius;
                    color: $tab-text-color;

                    @if $tab-skin == 'fabric' {
                        border: 1px solid $tab-wrap-border-color;
                    }
                    @else if $tab-skin == 'highcontrast' {
                        border: 2px solid $tab-wrap-border-color;
                    }

                    @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                        border: $tab-vscroll-nav-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;

                        @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                            border: 1px solid $tab-hover-border-color;
                            border-radius: $tab-top-active-item-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 {

                        &:hover {

                            .e-tab-text,
                            .e-tab-icon {
                                color: $tab-active-text-color;
                            }
                        }

                        @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                            border: 0;
                        }
                    }

                    .e-text-wrap {
                        @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                            position: relative;

                            &::before {
                                border: 1px solid $tab-active-line-color;
                                content: '';
                                display: block;
                                position: absolute;
                                top: 95%;
                                width: 100%;
                            }
                        }
                    }

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

                            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                                border-color: $tab-wrap-hover-border-color;
                            }

                            @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                                border: $tab-vscroll-nav-border;
                                border-radius: 0;
                            }

                            .e-tab-text,
                            .e-tab-icon,
                            .e-close-icon {
                                color: $tab-hover-text-color;
                            }

                            @if $tab-skin == 'FluentUI' {
                                .e-tab-icon,
                                .e-close-icon {
                                    color: $tab-comb-icon-color;
                                }
                            }
                        }

                        &:active {
                            background: $tab-active-bg-color;

                            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                                border-color: $tab-wrap-active-border-color;
                            }

                            @if $tab-skin == 'highcontrast' {

                                .e-tab-text,
                                .e-tab-icon {
                                    color: $tab-wrap-active-color;
                                }
                            }

                            @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {

                                .e-tab-text,
                                .e-tab-icon {
                                    color: $tab-alt-active-text-color;
                                }
                            }
                        }
                    }

                    &.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 {
                @if $tab-skin != 'tailwind' {
                    background: inherit;
                }

                border: 0;


                .e-nav-arrow {
                    @if $tab-skin != 'FluentUI' {
                        color: $tab-nav-icon-color;
                    }

                    @if $tab-skin == 'fabric' {
                        border: 1px solid $tab-wrap-border-color;
                    }

                    @if $tab-skin == 'highcontrast' {
                        border: 2px solid $tab-wrap-border-color;
                    }

                    &:hover {
                        background: $tab-hover-nav-bg-color;
                        color: $tab-hover-nav-icon-color;

                        @if $tab-skin == 'highcontrast' {
                            border: 2px solid $tab-wrap-hover-border-color;
                        }
                    }

                    &:active {
                        box-shadow: none;

                        @if $tab-skin == 'fabric' {
                            border: 1px solid $tab-wrap-active-border-color;
                        }
                    }
                }

                &:focus {

                    .e-nav-arrow {
                        background: $tab-nav-focus-bg-color;
                        color: $tab-nav-focus-icon-color;

                        @if $tab-skin == 'fabric' {
                            border: 1px solid $tab-wrap-focus-border-color;
                        }

                        @if $tab-skin == 'highcontrast' {
                            border: 2px solid $tab-wrap-focus-border-color;
                        }

                        &:hover {
                            background: $tab-hover-nav-bg-color;
                            color: $tab-hover-nav-icon-color;

                            @if $tab-skin == 'highcontrast' {
                                border: 2px solid $tab-nav-focus-hover-border-color;
                            }
                        }

                        &:active {
                            @if $tab-skin == 'highcontrast' {
                                background: $tab-nav-focus-active-bg-color;
                                border-color: $tab-nav-focus-active-border-color;
                                color: $tab-nav-focus-active-color;
                            }
                        }
                    }

                    @if $tab-skin == 'tailwind' {
                        background: $tab-nav-focus-bg-color;
                    }
                }

                &:active {

                    @if $tab-skin == 'bootstrap' {
                        box-shadow: $tab-nav-active-box-shadow;
                    }

                    @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                        border: $tab-nav-pop-press-active-border;
                    }

                    @if $tab-skin == 'tailwind' {
                        background: $tab-active-bg-color;
                    }
                }

                &.e-overlay {

                    .e-nav-arrow {
                        @if $tab-skin != 'FluentUI' {
                            color: $tab-disable-nav-icon-color;
                        }

                        &:hover {
                            @if $tab-skin != 'FluentUI' {
                                color: $tab-disable-nav-icon-color;
                            }

                            @if $tab-skin == 'highcontrast' {
                                background: $tab-nav-disable-hover-bg-color;
                                border-color: $tab-nav-disable-hover-border-color;
                            }

                            @if $tab-skin == 'tailwind' {
                                background: $tab-pop-icon-hover-bg-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;

                    @if $tab-skin == 'fabric' {
                        border: 1px solid $tab-wrap-border-color;
                    }

                    @if $tab-skin == 'highcontrast' {
                        border: 2px solid $tab-wrap-border-color;
                    }

                    @if $tab-skin == 'bootstrap4' or $tbar-skin == 'bootstrap5' {
                        border: $tab-active-text-item-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;

                        @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                            border: $tab-active-text-item-border;
                        }
                    }
                }

                &:focus {

                    .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-icon-hover-bg-color;
                            border: $tab-pop-up-icon-active-border;
                            border-radius: $tab-active-item-border-radius;
                            box-shadow: $tab-pop-border-box-shadow;

                            @if $tab-skin == 'highcontrast' {
                                background: $tab-nav-focus-active-bg-color;
                                color: $tab-nav-focus-active-color;
                            }
                        }
                    }

                    @if $tab-skin == 'tailwind' {
                        background: $tab-nav-focus-bg-color;
                    }
                }

                &:hover {
                    border: 0;

                    &:active {
                        background: transparent;
                    }

                    @if $tab-skin == 'tailwind' {
                        background: $tab-pop-icon-hover-bg-color;
                    }
                }

                &:active {

                    @if $tab-skin == 'bootstrap' {
                        box-shadow: $tab-nav-active-box-shadow;
                    }

                    @if $tab-skin == 'tailwind' {
                        background: $tab-active-bg-color;
                    }
                }

                &.e-nav-active {
                    background: inherit;
                    border: 0;
                    box-shadow: none;

                    @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                        background: $tab-nav-focus-bg-color;
                        border: $tab-nav-pop-press-active-border;
                        border-radius: $tab-active-item-border-radius;
                    }

                    @if $tab-skin == 'highcontrast' {
                        .e-icons {
                            color: $tab-nav-pop-arrow-active-color;
                        }

                        &:focus {
                            border: $tab-nav-pop-arrow-active-focus-border;
                        }
                    }
                }
            }

            &.e-horizontal-bottom {

                @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {

                    &[style*= 'overflow: hidden'] {
                        border: 0;
                    }

                    &[style*= 'overflow: hidden'] .e-toolbar-items {
                        border-bottom: 0;
                        border-top: $tab-items-border;
                    }
                }
                @else {
                    border-bottom: 0;
                    border-top: $tab-hdr-border;
                }

                .e-toolbar-item {

                    &.e-active {
                        border-bottom: $tab-even-active-item-bottom-border-color;

                        @if $tab-skin == 'FluentUI' {
                            margin-top: $tab-item-wrap-border-radius;
                        }
                        @else {
                            border-radius: $tab-bottom-active-item-border-radius;
                            border-top: $tab-active-item-hide-border;
                            border-top-color: $tab-active-item-border-color;
                        }
                    }
                }
            }

            &.e-vertical {

                @if $tab-skin == 'tailwind' {
                    border-bottom: 0;
                }

                &::before {
                    border-width: 0 1px 0 0;
                }

                .e-toolbar-item {

                    &.e-active {
                        border-bottom: $tab-hdr-border;
                        border-top: $tab-hdr-border;
                    }
                }

                &.e-vertical-left {

                    .e-toolbar-item {

                        &.e-active {
                            border-radius: $tab-left-active-item-border-radius;
                            border-right: $tab-active-item-hide-border;
                        }
                    }
                }

                &.e-vertical-right {

                    .e-toolbar-item {

                        &.e-active {
                            border-left: $tab-active-item-hide-border;
                            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;

                        @if $tab-skin == 'highcontrast' {
                            border-color: $border-fg;

                            &:active:focus {
                                background: $selection-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 {

                                @if $tab-skin == 'highcontrast' {
                                    color: $selection-font;
                                }
                            }
                        }

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

                            @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                                color: $gray-900;
                            }
                        }
                    }

                    &: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 {

                                @if $tab-skin == 'highcontrast' {
                                    color: $content-font;
                                }
                            }
                        }
                    }

                    &:hover {

                        .e-popup-up-icon,
                        .e-popup-down-icon {
                            border: 0;
                        }
                    }
                }
            }
        }

        &.e-focused > .e-tab-header {

            .e-toolbar-item {

                .e-tab-wrap:focus {
                    background: $tab-focus-bg-color;

                    @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                        border-color: $tab-focused-wrap-focus-border-color;
                    }

                    @if $tab-skin == 'bootstrap5' {
                        border: 1px solid $tab-focused-wrap-focus-border-color;
                    }

                    @if $tab-skin == 'highcontrast' {
                        border-style: solid;
                    }

                    .e-tab-icon,
                    .e-tab-text {
                        color: $tab-focus-text-color;
                    }

                    @if $tbar-skin == 'bootstrap5' or $tab-skin == 'FluentUI' {
                        .e-tab-icon {
                            color: $tab-comb-icon-color;
                        }
                    }
                }
            }

            .e-scroll-nav {

                &:focus {

                    .e-nav-arrow {
                        color: $tab-nav-focus-icon-color;

                        @if $tab-skin == 'highcontrast' {
                            background: inherit;
                            border: 2px solid $tab-focused-nav-focus-border-color;
                        }
                    }
                }
            }

            .e-hor-nav {

                &:focus {

                    .e-popup-up-icon,
                    .e-popup-down-icon {
                        color: $tab-nav-focus-icon-color;

                        @if $tab-skin == 'highcontrast' {
                            background: inherit;
                            border: 2px solid $tab-focused-nav-focus-border-color;
                        }
                    }
                }
            }

            &.e-vertical {

                .e-scroll-nav {

                    &:focus {

                        @if $tab-skin == 'fabric' {
                            border-color: $neutral-secondary-alt;
                        }

                        @if $tab-skin == 'highcontrast' {
                            border-color: $tab-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-popup-up-icon,
                        .e-popup-down-icon {

                            @if $tab-skin == 'fabric' {
                                border-color: $neutral-secondary-alt;
                            }

                            @if $tab-skin == 'highcontrast' {
                                border-color: $tab-focused-nav-focus-border-color;
                            }
                        }
                    }
                }
            }
        }

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

                @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                    .e-toolbar-items.e-hscroll {
                        border: 0;
                    }
                }

                .e-toolbar-item {
                    border: $tab-alt-item-border;

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

                        @if $tab-skin == 'FluentUI' {
                            &:hover .e-tab-icon {
                                color: $tab-comb-icon-color;
                            }
                        }
                    }

                    .e-text-wrap {
                        margin-top: 0;
                    }

                    &.e-active {
                        border: 0;

                        .e-tab-wrap {
                            background: $tab-fill-active-bg-color;
                            border-radius: $tab-active-item-border-radius;

                            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                                border-color: $tab-fill-active-wrap-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 {
                            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                                border: 0;
                            }
                        }

                        .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 {
                            @if $tab-skin != 'tailwind' {
                                color: $tab-alt-active-hover-close-icon-color;
                            }

                            @if $tab-skin == 'bootstrap5' {
                                color: $tab-alt-active-close-icon-color;
                            }
                        }
                    }
                }

                .e-toolbar-pop {

                    .e-toolbar-item:active:hover {

                        @if $tab-skin == 'highcontrast' {
                            .e-tab-text,
                            .e-tab-icon {
                                color: $tab-fill-pop-item-active-hover-color;
                            }
                        }
                    }

                    .e-tab-wrap {
                        &:hover {
                            @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                                background: $tab-active-bg-color;

                                .e-tab-text,
                                .e-tab-icon,
                                .e-close-icon {
                                    color: $tab-alt-active-close-icon-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;

                        @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                            border-color: $tab-fill-focused-active-wrap-focus-border-color;
                        }

                        @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {

                            .e-tab-text,
                            .e-close-icon {
                                color: $tab-fill-focused-active-wrap-focus-color;
                            }
                        }

                        @if $tab-skin == 'highcontrast' {
                            border-style: solid;
                        }

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

                @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                    .e-toolbar-items.e-hscroll {
                        border: 0;
                    }
                }

                .e-indicator {
                    background: $tab-alt-border-color;

                    @if $tab-skin == 'tailwind' {
                        bottom: 1px;
                    }
                }

                .e-toolbar-item {
                    border: $tab-alt-item-border;

                    @if $tab-skin == 'bootstrap5' {
                        margin: 0;
                    }

                    .e-ripple-element {
                        background: $tab-alt-ripple-bg-color;
                    }

                    .e-tab-wrap {
                        background: $tab-alt-item-bg-color;

                        @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                            border-color: $tab-alt-wrap-border-color;
                        }

                        .e-tab-text,
                        .e-tab-icon,
                        .e-close-icon {
                            color: $tab-alt-text-color;
                        }

                        @if $tab-skin != 'tailwind' {
                            .e-close-icon:hover {
                                color: $tab-alt-active-wrap-close-icon-color;
                            }
                        }

                        &:hover {
                            background: $tab-bg-item-wrap-hover-bg-color;

                            .e-tab-text,
                            .e-tab-icon {
                                color: $tab-alt-active-text-color;

                                @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                                    color: $tab-alt-wrap-hover-color;
                                }
                            }

                            @if $tab-skin == 'FluentUI' {
                                .e-tab-text,
                                .e-tab-icon,
                                .e-close-icon {
                                    color: $tab-alt-border-color;
                                }
                            }

                            @if $tab-skin == 'material' {
                                .e-close-icon {

                                    &:hover,
                                    &:active {
                                        color: $tab-alt-wrap-hover-close-icon-focus-or-active-color;
                                    }
                                }
                            }

                            @if $tab-skin == 'bootstrap' {
                                .e-tab-text,
                                .e-close-icon {
                                    color: $tab-alt-wrap-hover-color;
                                }
                            }

                            @if $tab-skin == 'bootstrap4' {
                                .e-tab-text {
                                    color: $tab-alt-wrap-hover-color;
                                }

                                .e-close-icon {
                                    color: $tab-close-icon-color;
                                }
                            }

                            @if $tab-skin == 'bootstrap5' {
                                .e-tab-text,
                                .e-close-icon {
                                    color: $tab-alt-active-text-color;
                                }
                            }

                            @if $tab-skin == 'highcontrast' {
                                background-color: $tab-alt-wrap-hover-bg-color;
                                border-color: $tab-alt-wrap-hover-border-color;

                                .e-tab-text,
                                .e-close-icon {
                                    color: $tab-alt-wrap-hover-color;
                                }

                                .e-close-icon {

                                    &:hover,
                                    &:active {
                                        color: $tab-alt-wrap-hover-close-active-or-hover-color;
                                    }
                                }
                            }
                        }
                    }

                    &.e-active {
                        border: 0;
                        margin: 0;

                        @if $tab-skin == 'FluentUI' {
                            background: $tab-alt-active-text-color;
                        }

                        .e-tab-wrap {

                            @if $tab-skin == 'FluentUI' {
                                .e-tab-text,
                                .e-tab-icon,
                                .e-close-icon {
                                    color: $tab-fill-active-bg-color;
                                }
                            }

                            @if $tab-skin == 'bootstrap5' {
                                background: $tab-active-item-border-color;
                                border-color: $tab-alt-active-bg-color;
                                border-radius: $tab-top-active-item-border-radius;
                                border-style: solid;
                                border-width: 2px 2px 0;
                            }
                            @else {
                                background: $tab-alt-active-bg-color;
                                border-radius: $tab-active-item-border-radius;
                            }

                            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                                border-color: $tab-alt-active-wrap-border-color;
                            }

                            &:hover {

                                .e-tab-text,
                                .e-tab-icon {
                                    color: $tab-alt-active-text-color;

                                    @if $tab-skin == 'FluentUI' {
                                        color: $tab-fill-active-bg-color;
                                    }
                                }

                                @if $tab-skin == 'bootstrap5' {
                                    .e-tab-text,
                                    .e-close-icon {
                                        color: $tab-active-text-color;
                                    }
                                }

                                @if $tab-skin == 'fabric' {
                                    background: $tab-alt-active-wrap-hover-bg-color;
                                }

                                @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' {
                                    .e-close-icon {
                                        color: $tab-alt-active-wrap-hover-close-color;
                                    }
                                }

                                @if $tab-skin == 'highcontrast' {
                                    background: $tab-alt-active-wrap-hover-bg-color;
                                    border-color: $tab-alt-active-wrap-hover-border-color;

                                    .e-tab-icon,
                                    .e-tab-text,
                                    .e-close-icon {
                                        color: $tab-alt-active-wrap-hover-color;
                                    }

                                    .e-close-icon {

                                        &:hover,
                                        &:active {
                                            color: $tab-alt-active-wrap-hover-close-hover-or-active-color;
                                        }
                                    }

                                    &:focus {
                                        background: $tab-alt-active-wrap-hover-focus-bg-color;

                                        .e-tab-icon,
                                        .e-tab-text {
                                            color: $tab-alt-active-wrap-hover-focus-color;

                                            @if $tab-skin == 'FluentUI' {
                                                color: $tab-fill-active-bg-color;
                                            }
                                        }
                                    }
                                }
                            }

                            &:focus {
                                background: $tab-alt-active-focus-bg-color;

                                @if $tab-skin == 'bootstrap5' {
                                    background-color: $tab-active-item-border-color;
                                }

                                .e-tab-text,
                                .e-tab-icon {
                                    color: $tab-alt-active-text-color;

                                    @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                                        color: $tab-alt-active-hover-text-color;
                                    }

                                    @if $tab-skin == 'FluentUI' {
                                        color: $tab-fill-active-bg-color;
                                    }
                                }
                            }

                            &:focus:hover {

                                @if $tab-skin == 'bootstrap5' {
                                    .e-tab-text,
                                    .e-close-icon {
                                        color: $tab-active-text-color;
                                    }
                                }

                                @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' {

                                    .e-tab-text,
                                    .e-close-icon {
                                        color: $tab-alt-active-text-color;
                                    }
                                }
                            }
                        }

                        @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                            .e-text-wrap::before {
                                border: 0;
                            }
                        }

                        .e-tab-text,
                        .e-tab-icon {
                            color: $tab-alt-active-text-color;

                            @if $tab-skin == 'FluentUI' {
                                color: $tab-fill-active-bg-color;
                            }
                        }

                        .e-close-icon {
                            color: $tab-alt-active-close-icon-color;

                            @if $tab-skin == 'FluentUI' {
                                color: $tab-fill-active-bg-color;
                            }
                        }

                        .e-close-icon:hover {
                            @if $tab-skin != 'tailwind' {
                                color: $tab-alt-active-hover-close-icon-color;

                                @if $tab-skin == 'FluentUI' {
                                    color: $tab-fill-active-bg-color;
                                }
                            }
                        }

                        @if $tab-skin == 'bootstrap5' {
                            .e-close-icon:hover,
                            .e-tab-text:hover,
                            .e-close-icon,
                            .e-tab-text {
                                color: $tab-active-text-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 {
                                color: $tab-alt-text-color;
                            }

                            @if $tab-skin == 'FluentUI' {
                                .e-tab-text,
                                .e-tab-icon,
                                .e-close-icon {
                                    color: $tab-bg-nav-focus-icon-color;
                                }
                            }

                            &:hover {
                                background: $tab-alt-hover-bg-color;

                                @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                                    background: $tab-active-bg-color;
                                }

                                .e-tab-text,
                                .e-tab-icon,
                                .e-close-icon {
                                    color: $tab-alt-active-text-color;

                                    @if $tab-skin == 'fabric' or $tab-skin == 'bootstrap' or $tab-skin == 'highcontrast' {
                                        color: $tab-alt-pop-wrap-hover-color;
                                    }

                                    @if $tab-skin == 'FluentUI' {
                                        color: $tab-alt-active-style-hover-text-color;
                                    }
                                }
                            }

                            &:active {
                                @if $tab-skin == 'highcontrast' {
                                    background: $tab-alt-pop-wrap-active-bg-color;

                                    .e-tab-text,
                                    .e-close-icon {
                                        color: $tab-alt-pop-wrap-active-color;
                                    }
                                }

                                @if $tab-skin == 'bootstrap4' {
                                    .e-tab-text,
                                    .e-tab-icon {
                                        color: $primary-font;
                                    }
                                }
                            }
                        }
                    }
                }

                .e-hscroll:not(.e-scroll-device) .e-scroll-nav,
                .e-scroll-nav {
                    @if $tab-skin == 'FluentUI' {
                        background: $tab-alt-active-wrap-hover-close-color;
                    }

                    .e-nav-arrow {
                        color: $tab-alt-nav-icon-color;

                        @if $tab-skin == 'fabric' {
                            border: 1px solid $tab-alt-nav-border-color;
                        }

                        @if $tab-skin == 'highcontrast' {
                            border: 2px solid $tab-alt-nav-border-color;
                        }

                        &:hover {
                            background: $tab-bg-hover-nav-bg-color;

                            @if $tab-skin == 'FluentUI' {
                                background: $tab-item-wrap-hover-bg-color;
                            }

                            color: $tab-bg-hover-nav-icon-color;

                            @if $tab-skin == 'highcontrast' {
                                border-color: $tab-alt-nav-hover-border-color;
                                color: $tab-alt-nav-hover-color;
                            }
                        }

                        &:active {

                            @if $tab-skin == 'highcontrast' {
                                background: $tab-alt-nav-active-bg-color;
                                color: $tab-alt-nav-active-color;
                            }

                            .e-icons {
                                @if $tab-skin == 'highcontrast' {
                                    color: $tab-alt-nav-active-color;
                                }
                            }
                        }
                    }

                    &:focus {

                        .e-nav-arrow {
                            color: $tab-bg-hover-nav-icon-color;

                            @if $tab-skin == 'fabric' {
                                border: 1px solid $tab-nav-focus-border-color;
                            }

                            @if $tab-skin == 'highcontrast' {
                                background: transparent;
                                border: 2px solid $tab-alt-nav-focus-border-color;
                            }

                            &:hover {
                                background: $tab-bg-hover-nav-bg-color;
                                color: $tab-bg-hover-nav-icon-color;

                                @if $tab-skin == 'highcontrast' {
                                    border: 2px solid $tab-nav-focus-hover-border-color;
                                    color: $tab-alt-nav-focus-hover-color;
                                }
                            }

                            &:active {
                                @if $tab-skin == 'highcontrast' {
                                    background: $tab-nav-focus-active-bg-color;
                                    border-color: $tab-nav-focus-active-border-color;
                                    color: $tab-nav-focus-active-color;
                                }
                            }
                        }
                    }

                    &:active::after {
                        @include hscroll-alt-btn-animation-after;
                    }

                    &.e-overlay {
                        @if $tab-skin == 'FluentUI' {
                            .e-nav-arrow {
                                color: $tab-alt-nav-icon-color;
                            }
                        }
                    }
                }

                .e-hor-nav:not(.e-expended-nav),
                .e-hor-nav {
                    @if $tab-skin == 'FluentUI' {
                        background: $tab-border-color;
                    }

                    .e-popup-up-icon,
                    .e-popup-down-icon {
                        color: $tab-alt-nav-icon-color;

                        @if $tab-skin == 'FluentUI' {
                            color: $tab-alt-border-color;
                        }

                        @if $tab-skin == 'fabric' {
                            border: 1px solid $tab-alt-nav-border-color;
                        }

                        @if $tab-skin == 'highcontrast' {
                            border: 2px solid $tab-alt-nav-border-color;
                        }

                        &:hover {
                            background: $tab-bg-hover-nav-bg-color;
                            color: $tab-bg-hover-nav-icon-color;

                            @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                                background: $tab-alt-nav-hover-bg-color;
                            }

                            @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                                background: $tab-pop-icon-hover-bg-color;
                            }

                            @if $tab-skin == 'highcontrast' {
                                border-color: $tab-alt-nav-hover-border-color;
                                color: $tab-alt-nav-hover-color;
                            }
                        }

                        &:active {

                            .e-icons {
                                @if $tab-skin == 'highcontrast' {
                                    color: $tab-alt-nav-active-color;
                                }
                            }

                            &:hover {

                                @if $tab-skin == 'highcontrast' {
                                    background: $tab-alt-nav-active-bg-color;
                                    color: $tab-alt-nav-active-color;
                                }
                            }
                        }
                    }

                    &:focus {

                        .e-popup-up-icon,
                        .e-popup-down-icon {
                            color: $tab-bg-hover-nav-icon-color;

                            @if $tab-skin == 'FluentUI' {
                                background: $tab-item-wrap-hover-bg-color;
                            }

                            @if $tab-skin == 'fabric' {
                                border: 1px solid $tab-nav-focus-border-color;
                            }

                            @if $tab-skin == 'highcontrast' {
                                background: $tab-alt-nav-focus-bg-color;
                                border: 2px solid $tab-alt-nav-focus-border-color;
                            }

                            &:hover {

                                @if $tab-skin == 'highcontrast' {
                                    background: $tab-alt-nav-focus-hover-bg-color;
                                    border: 2px solid $tab-nav-focus-hover-border-color;
                                    color: $tab-alt-nav-focus-hover-color;
                                }
                            }

                            &:active {
                                @if $tab-skin == 'highcontrast' {
                                    background: $tab-nav-focus-active-bg-color;
                                    border-color: $tab-nav-focus-active-border-color;
                                    color: $tab-nav-focus-active-color;
                                }
                            }
                        }
                    }

                    &:active::after {
                        @include tbar-alt-btn-animation-after;
                    }

                    &.e-nav-active {
                        @if $tab-skin == 'FluentUI' {
                            background: $tab-fill-active-bg-color;
                        }

                        .e-popup-up-icon {
                            color: $tab-bg-hover-nav-icon-color;
                        }

                        @if $tab-skin == 'FluentUI' {
                            .e-popup-up-icon,
                            .e-popup-down-icon {
                                color: $tab-alt-active-text-color;
                            }
                        }
                    }
                }

                @if $tab-skin == 'bootstrap5' {
                    &.e-horizontal-bottom {
                        .e-toolbar-item.e-active {
                            border: 0;
                            margin: 0;

                            .e-tab-wrap {
                                border-color: $tab-alt-active-bg-color;
                                border-radius: 0 0 4px 4px;
                                border-style: solid;
                                border-width: 0 2px 2px;
                            }
                        }
                    }
                }

                &.e-vertical {

                    @if $tab-skin == 'bootstrap5' {
                        &.e-vertical-left {
                            .e-toolbar-item.e-active {
                                border: 0;
                                margin: 0;

                                .e-tab-wrap {
                                    border-color: $tab-alt-active-bg-color;
                                    border-radius: 4px 0 0 4px;
                                    border-style: solid;
                                    border-width: 2px 0 2px 2px;
                                }
                            }
                        }

                        &.e-vertical-right {
                            .e-toolbar-item.e-active {
                                border: 0;
                                margin: 0;

                                .e-tab-wrap {
                                    border-color: $tab-alt-active-bg-color;
                                    border-radius: 0 4px 4px 0;
                                    border-style: solid;
                                    border-width: 2px 2px 2px 0;
                                }
                            }
                        }
                    }

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

                    @if $tab-skin == 'tailwind' {
                        background: $tab-alt-border-color;
                        bottom: 1px;
                    }
                }

                &.e-disable {

                    .e-indicator {
                        background: $tab-disable-border-color;
                    }
                }
            }

            &.e-focused .e-tab-header {

                .e-toolbar-item {

                    .e-tab-wrap:focus {

                        @if $tab-skin == 'material' or $tab-skin == 'bootstrap' {
                            background: $tab-alt-hover-bg-color;
                        }

                        @if $tab-skin == 'FluentUI' {
                            background: $tab-item-wrap-hover-bg-color;
                        }

                        @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                            border-color: $tab-wrap-focus-border-color;
                        }

                        @if $tab-skin == 'highcontrast' {
                            border-style: solid;
                        }

                        @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                            background: $tab-active-bg-color;
                        }

                        .e-tab-icon,
                        .e-tab-text,
                        .e-close-icon {
                            color: $tab-alt-text-color;

                            @if $tab-skin == 'FluentUI' {
                                color: $tab-alt-border-color;
                            }
                        }
                    }

                    &.e-active {

                        .e-tab-wrap:focus {

                            @if $tab-skin == 'material' or $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                                background: $tab-key-alt-active-focus-bg-color;
                            }

                            @if $tab-skin == 'FluentUI' {
                                background: $tab-alt-active-text-color;
                            }

                            @if $tab-skin == 'fabric' or $tab-skin == 'highcontrast' {
                                border-color: $tab-alt-focused-active-wrap-focus-border-color;
                            }

                            @if $tab-skin == 'highcontrast' {
                                border-style: solid;
                            }
                        }

                        .e-tab-wrap:focus .e-tab-text,
                        .e-tab-wrap:focus .e-tab-icon {
                            color: $tab-alt-active-hover-text-color;

                            @if $tab-skin == 'FluentUI' {
                                color: $tab-fill-active-bg-color;
                            }
                        }

                        .e-tab-wrap:hover {

                            @if $tab-skin == 'fabric' {
                                background: $tab-alt-focused-active-wrap-hover-bg-color;
                            }

                            @if $tab-skin == 'FluentUI' {
                                background: $tab-alt-active-text-color;
                            }

                            @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                                border: 1px solid $tab-hover-border-color;
                                border-radius: $tab-top-active-item-border-radius;
                            }
                        }

                        .e-tab-wrap:focus,
                        .e-tab-wrap:hover {

                            @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                                .e-tab-text,
                                .e-close-icon {
                                    color: $tab-alt-focused-active-wrap-focus-or-hover-color;
                                }
                            }

                            @if $tab-skin == 'FluentUI' {
                                .e-tab-text,
                                .e-tab-icon,
                                .e-close-icon {
                                    color: $tab-fill-active-bg-color;
                                }
                            }
                        }

                        .e-tab-wrap:focus:hover {

                            @if $tab-skin == 'bootstrap' or $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {

                                .e-tab-text,
                                .e-close-icon {
                                    color: $tab-alt-focused-active-wrap-focus-and-hover-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;

                @if $tab-skin == 'tailwind' {
                    font-size: $tab-nrml-font-size;
                    line-height: $tab-nrml-text-wrap-height;
                }
            }
        }
    }

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

            @if $tab-skin == 'fabric' {
                border: 1px $tab-wrap-border-color;
            }
            @else if $tab-skin == 'highcontrast' {
                border: 2px $tab-wrap-border-color;
            }

            @if $tab-skin == 'bootstrap4' or $tab-skin == 'bootstrap5' {
                border: $tab-vscroll-nav-border;
            }

            .e-tab-icon {
                color: $tab-clone-text-color;
            }
        }
    }
}


@include export-module('tab-bootstrap5-icons') {
    /*! tab icons */
    #{&}.e-tab {

        .e-tab-header {

            .e-toolbar-items.e-hscroll.e-rtl {

                .e-nav-left-arrow::before {
                    content: '\e748';
                }

                .e-nav-right-arrow::before {
                    content: '\e765';
                }
            }

            .e-scroll-nav {

                .e-nav-left-arrow::before {
                    content: '\e765';
                }

                .e-nav-right-arrow::before {
                    content: '\e748';
                }
            }

            .e-close-icon::before {
                content: '\e7e7';
                position: relative;
            }

            .e-popup-up-icon::before {
                content: '\e776';

                @media screen and (max-width: 480px) {
                    content: '\e770';
                }
            }

            .e-popup-down-icon::before {
                content: '\e729';

                @media screen and (max-width: 480px) {
                    content: '\e770';
                }
            }
        }

        &.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-scroll-nav {

                    .e-nav-up-arrow::before {
                        content: '\e776';
                    }

                    .e-nav-down-arrow::before {
                        content: '\e729';
                    }
                }

                .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 */
// sass-lint:disable-all
$treeview-font-size: $text-sm !default;
$treeview-icon-font-size: 20px !default;
$treeview-image-font-size: 20px !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 2px 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: 24px !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: 24px !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: 20px !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;

// sass-lint:disable no-vendor-prefixes
@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 {
        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' {
            .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 {
                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') {
                & + .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' {
                .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' {
                padding: 2px 0;
            }

            .e-ul {
                margin: 2px 0 -2px;
                padding: $treeview-child-ul-padding;
            }

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

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

                .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;
            }
        }
    }
    // sass-lint:enable no-vendor-prefixes
}


// sass-lint:disable no-vendor-prefixes
@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 {
    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 {
            background: transparent;
        }

        .e-list-item.e-hover > .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 {
            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 {
            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 {
            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 {
            @include active-hover-theme;
        }

        .e-list-item.e-editing.e-active > .e-fullrow,
        .e-list-item.e-editing.e-hover > .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 {
                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 {
                @include active-hover-theme;
            }

            .e-list-item.e-editing.e-active > .e-text-content,
            .e-list-item.e-editing.e-hover > .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;

            .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;
                    }
                }
            }
        }
        // sass-lint:enable no-vendor-prefixes
    }
}



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



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

    ejs-sidebar {
        display: none;
    }

    .e-sidebar-display {
        display: block;
    }

    .e-sidebar {
        // sass-lint:disable no-vendor-prefixes
        -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') {
            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;
    }
    // sass-lint:disable-all
    .e-sidebar-overflow {
        overflow-x: hidden !important;
    }
    // sass-lint:enable-all

    .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: 14px !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: 18px !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: $submenu-caret-font-size !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;
                    }

                    & .e-caret {
                        font-size: $menu-caret-font-size;
                        height: auto;

                        @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
                            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;

                    &.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;
                    }
                }
                // sass-lint:disable-all

                & .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;
                }
                // sass-lint:enable-all
            }

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



@include export-module('menu-theme') {
    /*! menu theme */
    .e-menu-wrapper,
    .e-menu-container {
        background-color: $menu-ul-bgcolor;

        @at-root {
            & .e-menu {
                @if $skin-name == 'bootstrap4' {
                    background-color: $cmenu-ul-bgcolor;
                }
                @else {
                    background-color: 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-color: $menu-ul-bgcolor;

                            & .e-caret {
                                color: $menu-caret-color;
                            }

                            & .e-menu-icon {
                                color: $menu-icon-hover-color;
                            }
                        }
                        @else {
                            @include focused-icon-color;
                            background-color: $menu-li-bgcolor;
                        }
                    }

                    &.e-selected {
                        color: $menu-selected-color;
                        outline: $menu-li-selected-outline;
                        outline-offset: $menu-li-selected-outline-offset;

                        @if $skin-name == 'bootstrap4' {
                            background-color: $menu-ul-bgcolor;
                        }

                        @if $skin-name == 'FluentUI' {
                            background-color: $cmenu-li-bgcolor;
                        }
                        @else {
                            background-color: $menu-li-selection-bgcolor;
                        }

                        & .e-caret {
                            color: $menu-caret-color;
                        }

                        & .e-menu-icon {
                            color: $menu-caret-color;
                        }
                    }

                    &.e-separator {
                        border-bottom-color: $menu-seperator-border-color;
                    }
                }

                @include disabled-color;
            }

            & .e-ul {
                background-color: 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 {
                        @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 {
                        @include selected-color;
                    }

                    &.e-separator {
                        border-bottom-color: $cmenu-li-border-color;
                    }
                }
            }
        }

        &.e-menu-popup {
            background-color: $cmenu-ul-bgcolor;

            &.e-sfcontextmenu .e-menu-vscroll {
                background-color: 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-color: darken($gray-600, 7.5%);
                    border: 1px inset darken($gray-600, 10%);

                    & .e-icons {
                        color: $menu-icon-focussed-color;
                    }
                }
                @else {
                    background: $menu-li-bgcolor;
                }
            }

            &:focus {
                @if $skin-name == 'bootstrap4' {
                    background-color: 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-color: 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-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-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-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-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: 10px 10.5px 11px 10.5px !default;
$pager-numeric-icon-padding: 10px 12.5px 11px 12.5px !default;
$pager-pagecontainer-icon-padding: 14px 12px 12px 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: 10px 12.5px 11px 12.5px !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-item-hover-border-width: 0 1px 0 0 !default;
$pager-item-hover-border-color: $pager-border-color !default;
$pager-bigger-current-item-hover-padding: $pager-bigger-current-item-padding !default;
$pager-numeric-icon-hover-padding: $pager-numeric-icon-padding !default;
$pager-bigger-rtl-activeitem-hover-padding: 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;
$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;
            }
        }

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

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

        .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-spacing,
        &.e-rtl .e-numericitem:hover,
        &.e-rtl .e-currentitem {
            @if $pager-skin == 'bootstrap5' {
                margin: $pager-rtl-numeric-margin;
                padding: 12px 15px 13px;
            }
            @else if $pager-skin == 'tailwind' {
                margin: $pager-rtl-numeric-margin;
                padding: 7px 14px;
            }
            @else {
                margin: $pager-rtl-numeric-margin;
                padding: $pager-activeitem-padding;
            }
        }

        .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
            padding: $pager-bigger-current-item-hover-padding;
        }

        &.e-rtl,
        &.e-rtl .e-numericitem:hover,
        &.e-rtl .e-currentitem {
            margin: $pager-bigger-rtl-numeric-margin;
            padding: $pager-bigger-rtl-activeitem-padding;
        }

        &.e-rtl .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
            padding: $pager-bigger-rtl-activeitem-hover-padding;
        }

        &.e-rtl {
            & .e-pp,
            & .e-np,
            & .e-pp:hover,
            & .e-np: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;
                }
            }

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

        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-font-line-height;
            margin-right: $pager-numericitem-margin-right;
            min-width: $pager-numericitem-min-width;
            padding: $pager-numericitem-padding;
            text-align: center;
        }

        .e-numericitem.e-currentitem {
            @if $pager-skin == 'tailwind' {
                border: 1px solid $primary;
                padding: 3.5px 11px 4px 10px;
            }
            @else if $pager-skin == 'bootstrap5' {
                padding: 7px 10.5px 8px 9.5px;
            }
        }

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

        &.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-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
            padding: $pager-numeric-icon-hover-padding;
        }

        .e-currentitem {
            @if $pager-skin == 'fluent' {
                border-bottom: $pager-active-item-border-bottom;
            }

            @if $pager-skin == 'bootstrap5' {
                border: 3px solid $primary-light;
            }

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

        .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;
        }
        // sass-lint:disable-all
        .e-mfirst,
        .e-mprev,
        .e-mnext,
        .e-mlast {
            -webkit-tap-highlight-color: $pager-bg-color;
        }
        // sass-lint:enable-all

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

        @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;
                vertical-align: top;
                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;
            }

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

            & .e-lastpage:hover {
                border-radius: 4px 0 0 4px;
            }

            & .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-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
                padding: $pager-activeitem-hover-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;
        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;
        }

        .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:hover:not(.e-np):not(.e-pp):not(.e-active) {
            border-left: $pager-item-hover-borders-width solid $pager-item-hover-border-color;
        }

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

            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: 16px !default;
$breadcrumb-collapsed-icon-bigger-font-size: 18px !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' {
            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' {
                    &: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 {
                    color: $breadcrumb-item-hover-color;
                }

                &:active {
                    color: $breadcrumb-item-active-color;
                }
            }

            @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' {
                &:not([data-active-item]):not(.e-breadcrumb-separator) {
                    &:hover {
                        background-color: $breadcrumb-item-hover-bgcolor;
                    }

                    &:active {
                        background-color: $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-color: $breadcrumb-collapsed-icon-hover-bgcolor;
                        color: $breadcrumb-collapsed-icon-hover-color;
                    }

                    &:active {
                        background-color: $breadcrumb-collapsed-icon-active-bgcolor;
                        color: $breadcrumb-collapsed-icon-hover-color;
                    }

                    @if $breadcrumb-skin == 'material' or $breadcrumb-skin == 'bootstrap' {
                        .e-breadcrumb-text:focus {
                            background-color: $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-color: $breadcrumb-collapsed-icon-hover-bgcolor;
                color: $breadcrumb-collapsed-icon-hover-color;
            }

            &:active {
                background-color: $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-color: $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-color: $breadcrumb-popup-bgcolor;

        .e-breadcrumb-text {
            color: $breadcrumb-popup-item-color;

            &:hover {
                background-color: $breadcrumb-popup-item-hover-bgcolor;
                color: $breadcrumb-popup-item-hover-color;
            }
        }

        .e-breadcrumb-item .e-breadcrumb-text:focus {
            background-color: $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;

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

@include export-module('carousel-layout') {
    /*! carousel component styles */
    .e-carousel {
        display: block;
        margin: 0;
        padding: 0;
        position: relative;

        .e-carousel-items {
            height: 100%;
            margin: 0;
            overflow: hidden;
            padding: 0;
            position: relative;
            width: 100%;
        }

        &.e-carousel-slide-animation {
            .e-carousel-item {
                backface-visibility: hidden;
                display: none;
                float: left;
                height: 100%;
                margin-right: -100%;
                position: relative;
                transition: transform $carousel-animation-duration $carousel-animation-timing-function;
                width: 100%;

                &.e-prev,
                &.e-next,
                &.e-active {
                    display: block;
                }

                &.e-next:not(.e-transition-start),
                &.e-active.e-transition-end {
                    transform: translateX(100%);
                }

                &.e-prev:not(.e-transition-end),
                &.e-active.e-transition-start {
                    transform: translateX(-100%);
                }
            }
        }

        &.e-carousel-fade-animation {
            .e-carousel-item {
                backface-visibility: hidden;
                display: block;
                float: left;
                height: 100%;
                margin-right: -100%;
                opacity: 0;
                position: relative;
                transition: opacity $carousel-animation-duration $carousel-animation-timing-function;
                width: 100%;
                z-index: 0;

                &.e-active {
                    opacity: 1;
                    z-index: 1;
                }
            }
        }

        &.e-carousel-animation-none {
            .e-carousel-item {
                display: none;
                height: 100%;
                width: 100%;

                &.e-active {
                    display: block;
                }
            }
        }

        &.e-carousel-custom-animation {
            .e-carousel-item {
                display: block;
                height: 100%;
                left: 0;
                opacity: 0;
                pointer-events: none;
                position: absolute;
                top: 0;
                width: 100%;

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


@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-indicator-bar {
            .e-indicator {
                background-color: transparent;
                border-color: transparent;
                box-shadow: none;

                div {
                    background-color: $carousel-indicator-bar-bg;
                    border-color: $carousel-indicator-bar-bg;
                }

                &:active,
                &:focus,
                &:hover {
                    background-color: 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;
            }
        }
    }
}


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

// sass-lint:disable-all
$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 {
            .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' {
                    min-height: $ddt-close-icon-min-height;
                }
            }

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

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

            &.e-show-chip,
            &.e-show-text {
                .e-clear-icon {
                    bottom: $ddt-close-icon-bottom;
                    position: absolute;
                    right: 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' {
                    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' {
                        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' {
                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' {
                border-radius: $ddt-chip-radius;
            }

            @if $skin-name == 'FluentUI' {
                border-radius: 2px;
            }

            box-shadow: $ddt-box-shadow;
            position: absolute;

            .e-checkbox-wrapper {
                .e-frame {
                    @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;
                }

                &.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' {
                        height: $ddt-treeview-fullrow-height;
                    }
                }

                & > .e-ul {
                    overflow: hidden;

                    @if $ddt-skin-name != 'FluentUI' {
                        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' {
                        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 {
                        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' {
                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' {
                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' {
                    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 {
                    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 {
                    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' {
                        left: $ddt-dd-icon-bigger-width;
                    }

                    right: auto;
                }
            }
        }
    }
}


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

    .e-ddt {

        .e-chips {
            background-color: $ddt-chip-bg-color;

            .e-chips-close::before {
                color: $ddt-chip-close;
            }

            > .e-chipcontent {
                color: $ddt-chip-font-color;
            }

            &:hover {
                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' {
                    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 0 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-square: 14px !default;
$ddl-chip-hooker-square: 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-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: 14px !default;
$ddl-bigger-selectall-font-size: $text-base !default;
$ddl-close-icon-left: 40px !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: 12px !default;
$ddl-small-chip-close-square: 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: 12px !default;
$ddl-small-closer-margin-top: -2em !default;
$ddl-chip-close-hooker-small-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;

// Touch Small size
$ddl-select-all-height-bigger-small: 40px !default;
$ddl-bigger-small-chip-height: 26px !default;
$ddl-chip-bigger-small-font-size: 13px !default;
$ddl-bigger-small-chip-close-square: 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: 13px !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 {
        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;
        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;
    }

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

.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;
    top: $ddl-closer-hooker-top;
    width: $ddl-chip-hooker-square;
}

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

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

.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;
        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: 400;
    height: $ddl-input-height;
    min-height: $ddl-input-height;
    outline: none;
    padding: 0;
    text-indent: $ddl-input-text-indent;
}

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

// sass-lint:disable no-vendor-prefixes
.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' {
        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' {
        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' {
        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' {
        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.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;
}

.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' {
        transform: rotate(0deg);
        transition: transform 300ms ease;
    }
}

.e-multiselect.e-icon-anim .e-ddl-icon::before {
    @if $ddl-multiselect-skin-name == 'material' {
        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 $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 $skin-name != 'bootstrap5' and $ddl-multiselect-skin-name != 'tailwind' {
        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 {
    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-square;
    }
}

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

.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' {
        font-size: $ddl-closer-hooker-font-small;
        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-multi-select-wrapper .e-chips-close {
    height: $ddl-bigger-small-chip-close-square;
    width: $ddl-bigger-small-chip-close-square;
}

.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-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 == '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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
            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' {
                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' {
                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' {
            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' {
                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' {
                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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        height: $ddl-outline-multiselect-height;
    }
}

.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
    @if $ddl-multiselect-skin-name == 'material' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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' {
        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-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 {
    background-color: $ddl-sel-chip-bg-color;
}

.e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips.e-chip-selected:hover {
    background-color: $ddl-sel-hover-chip-bg-color;
}

#{&}.e-multiselect {
    box-sizing: border-box;
}

// sass-lint:disable no-vendor-prefixes
.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 {
    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 {
    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 {
    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 {
    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 {
    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 {
    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 {
    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 {
    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 {
    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 {
    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;
}

// sass-lint:disable no-vendor-prefixes
.e-multi-select-wrapper input.e-dropdownbase:-moz-placeholder {
    color: $ddl-input-placeholder;
}

// sass-lint:disable no-vendor-prefixes
.e-multi-select-wrapper input.e-dropdownbase::-moz-placeholder {
    color: $ddl-input-placeholder;
}

// sass-lint:disable no-vendor-prefixes
.e-multi-select-wrapper input.e-dropdownbase:-ms-input-placeholder {
    color: $ddl-input-placeholder;
}

// sass-lint:disable no-vendor-prefixes
.e-multi-select-wrapper input.e-dropdownbase::-webkit-input-placeholder {
    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-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;
    }
}

.e-multiselect.e-filled .e-multi-select-wrapper .e-chips {
    @if $ddl-multiselect-skin-name == 'material' {
        background-color: $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;
    }
}

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

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

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

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

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

.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' {
        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' {
        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
$skin-name: 'bootstrap5' !default;
$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-back-icon-height: 20px !default;
$listbox-back-icon-font-size: auto !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-small-height: calc(100% - 45px) !default;
$listbox-filter-bigger-small-height: calc(100% - 45px) !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') {
    // sass-lint:disable no-vendor-prefixes
    .e-listbox-wrapper,
    .e-listbox-container {
        -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; // sass-lint:disable-line no-important
            }
            @else if $skin-name == 'material' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap' {
                width: calc(100% - 14%) !important; // sass-lint:disable-line no-important
            }
            @else if $skin-name == 'fabric' {
                width: calc(100% - 14%) !important; // sass-lint:disable-line no-important
            }
            @else if $skin-name == 'highcontrast' {
                width: calc(100% - 13%) !important; // sass-lint:disable-line 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-filter-list {
            overflow: inherit;
        }

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

        &.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 {
            overflow: inherit;

            & .e-list-parent {
                overflow: auto;
            }
        }
    }

    .e-listbox-wrapper.e-sortableclone,
    .e-listbox-container.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-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; // sass-lint:disable-line no-important
            }
            @else if $skin-name == 'material' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap' {
                width: calc(100% - 15%) !important; // sass-lint:disable-line no-important
            }
            @else if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
                width: calc(100% - 17%) !important; // sass-lint:disable-line 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-listbox-wrapper.e-filter-list .e-list-parent {
        height: $listbox-filter-height;
    }

    .e-listbox-container.e-filter-list .e-list-wrap {
        height: $listbox-filter-height !important; // sass-lint:disable-line no-important
    }

    .e-small .e-listbox-wrapper.e-filter-list .e-list-parent {
        height: $listbox-filter-small-height;
    }

    .e-small .e-listbox-container.e-filter-list .e-list-wrap {
        height: $listbox-filter-small-height !important; // sass-lint:disable-line no-important
    }

    .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent {
        height: $listbox-filter-bigger-height;
    }

    .e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
        height: $listbox-filter-bigger-height !important; // sass-lint:disable-line no-important
    }

    .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 {
        height: $listbox-filter-bigger-small-height;
    }

    .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
        height: $listbox-filter-bigger-small-height !important; // sass-lint:disable-line no-important
    }

    .e-listbox-wrapper,
    .e-listbox-container:not(.e-listboxtool-container):not(.e-sortableclone),
    .e-listboxtool-container.e-listbox-container .e-ul {
        border: 1px solid $listbox-border-color;
    }

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

$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: 46px !default;
$de-table-alignment-top: 126px !default;
$de-tablecell-alignment-font-size: 51px !default;
$de-border-none-setting-font-size: 38px !default;
$de-border-setting-font-size: 34px !default;
$de-td-table-border-top: 2px !default;
$de-hyperlink-bookmark-check-margin-top: 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: 12px !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;

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

@include export-module('documenteditor-layout') {
    .e-de-dlg-container {
        padding-bottom: $de-padding-full;
    }

    .e-de-dlg-row {
        display: flex;
    }

    .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') {
    // sass-lint:disable-all
    .e-de-background {
        background-color: $de-background;
    }

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

    .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-color: $de-style-dlg-btn-bg-color;
                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' {
            // sass-lint:disable-all
            .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;
            }
            // sass-lint:disable-all
            .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-styles-common {
                padding-top: $de-style-list-top;
            }

            .e-styles-list {
                margin-right: $de-style-list-top;
            }

            .e-bigger {
                .e-de-style-left-div .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-color: $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;
    }

    .e-de-hyperlink {
        width: $de-hyper-link-width;
    }

    .e-bigger {
        .e-de-hyperlink {
            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;
        }
    }
    // sass-lint:disable-all
    .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;
    }
    // sass-lint:disable-all
    .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;
        width: $de-table-ppty-dlg-width;
    }

    .e-de-table-border-shading-dlg {
        width: $de-table-border-shading-dlg-width;
    }

    .e-de-table-cell-margin-dlg {
        height: $de-table-cell-margin-dlg-height;
        width: $de-table-cell-margin-dlg-width;
    }

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

    .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 {
        border-right: 2px solid $de-style-toggle-btn-color;
    }

    .e-de-style-font-group-button {
        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 {
    //     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 {
    //     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;
        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;
        }

        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;
            padding-top: 5px;
            font-size: 13px;
            font-weight: $de-header-font-weight;
        }
    }

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

    .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;
        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: $de-table-alignment-label-margin-left;
        }
    }

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

    .e-de-tablecell-center-alignment::before {
        color: $icon-color;
        content: '\e7e5';
        font-family: 'e-icons';
        font-size: $de-tablecell-alignment-font-size;
    }

    .e-de-tablecell-bottom-alignment::before {
        color: $icon-color;
        content: '\e7d9';
        font-family: 'e-icons';
        font-size: $de-tablecell-alignment-font-size;
    }

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


@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;
            }
        }
        // sass-lint:disable-all
        .e-de-para-dlg-container .e-input-group {
            width: 192px !important;
        }
        // sass-lint:enable-all

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

// 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: 86px;
$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: 14px;
$de-toolbar-padding-bottom-bg: 14px;
$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;
$e-de-btn-font-size: $text-sm;
$e-de-btn-font-icon-size: 16px;
$e-de-btn-font-size-big: 16px;
$e-de-btn-font-icon-size-big: 18px;
$e-de-bzr-btn-font-size: 16px;
$e-de-bzr-btn-font-size-big: 18px;
$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-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: 400;
        left: 40px;
        padding-top: 11px;
        position: absolute;
        top: 100px;
    }
    // sass-lint:disable-all
    .e-de-scrollbar-hide::-webkit-scrollbar {
        width: 0;
    }

    .e-de-scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    // sass-lint:enable-all
    @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') {
    // sass-lint:disable-all
    .e-de-toolbar {
        height: 100%;
    }

    .e-de-statusbar-pageweb {
        background-color: $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-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-de-linespacing {
        margin-top: $e-de-ctnr-linespacing-tick-icon;
    }

    .e-de-statusbar-zoom {
        background-color: $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;
    }

    .e-de-pagenumber-input {
        background: $e-de-pagenumber-bg;
        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' {
            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' {
        .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-status-br-left;
        margin-top: $de-status-br-top;
    }

    .e-de-statusbar-spellcheck {
        border-radius: 2px;
        font-weight: 400;
        margin-left: $de-spellcheck-tlbr-margin-left;
    }

    .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;
        margin-left: $de-spellcheck-tlbr-margin-left;
    }

    .e-de-ctnr-toolbar {
        display: flex;
        height: $de-ctnr-tlbr-height;
        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-tool-ctnr-properties-pane,
    .e-de-ctnr-properties-pane {
        background-color: $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 > 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.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;
        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;
            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 {
            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 {
            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 {
            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-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-color: $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 {
        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-color: $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 .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;
    }

    .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 {
        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' {
            // sass-lint:disable-all
            .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-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 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-property-div-padding {
        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;
        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;
        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 {
            background: $de-ctnr-bg-clr;
            border: 1px solid #ccc;
            border-radius: 2px;
            box-shadow: 0 0 14px rgba(0, 0, 0, 0.2);
            box-sizing: border-box;
            display: inline-block;
            line-height: normal;
            margin: 0;
            outline: 0;
            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;
        height: 129px;
        margin-left: 78px;
        width: 94px;
    }

    .e-de-toc-template1.e-de-rtl {
        margin-left: 0;
        margin-right: 78px;
    }

    .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-prop-sub-label {
        color: $de-panel-sub-label-color;

        @if $skin-name=='tailwind' {
            font-size: 12px;
            line-height: 18px;
        }
        @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-color: $de-ctnr-bg-clr;
        //border-bottom: 1px solid $de-panel-border;
        display: flex;
        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 {
        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 {
        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 {
            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;
        margin-right: 8px;
    }

    .e-de-prop-fill-label.e-de-rtl {
        margin-left: 8px;
        margin-right: 0;
    }

    .e-de-grp-btn-ctnr .e-de-ctnr-group-btn {
        height: 38px !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 {
        height: 38px;

        @if $skin-name =='bootstrap5' {
            width: 39px;
        }
        @else {
            width: 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 {
        width: 70px;
    }

    @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-bigger {
        @if $skin-name =='tailwind' or $skin-name =='bootstrap5' or $skin-name =='FluentUI' {
            .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 {
            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 > 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.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 {
                height: 25px;
                margin: $de-ctrnr-tblr-separator-margin-big;
            }

            .e-toolbar-item.e-de-toolbar-btn-start {
                margin-left: $de-tlbr-margin-first-big;
                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 {
            width: 75px;
        }

        .e-de-ctnr-properties-pane-btn {
            .e-btn {
                background-color: $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;
            }
            @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;
            }

            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-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;
        }
        // sass-lint:disable-all
        .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;
        }
        // sass-lint:disable-all
        .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-color: $de-ctnr-bg-clr;
            //border-bottom: 1px solid $de-panel-border;
            display: flex;
            padding-top: $e-de-status-bar-big-padding-top;
            width: 100%;
        }

        .e-de-statusbar-zoom {
            background-color: $de-ctnr-bg-clr;
            border: 0;
            color: $de-font-color;
            float: right;
            height: 34px;
        }

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

.e-de-ctn .e-de-bzr-button {
    @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' {
    .e-de-ctn .e-de-bzr-button {
        @if $skin-name!='bootstrap5' and $skin-name!='FluentUI' {
            font-size: 12px;
        }

        @if $skin-name !='bootstrap4' {
            font-weight: 400;
        }

        @if $skin-name=='FluentUI' {
            font-size: 14px;
            border: none;
        }

        @if $skin-name !='material' {
            background: $e-de-bzr-button-bg-color;
            height: 100%;

            @if $skin-name !='fabric' {
                color: $e-de-bzr-button-font-color;
            }
        }

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

$skin-name: 'bootstrap' !default;
//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; // sass-lint:disable-line no-important
                        overflow: hidden !important; // sass-lint:disable-line 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; // sass-lint:disable-line no-important
                    overflow: hidden !important; // sass-lint:disable-line 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;
    }
}




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

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

                &.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: 00.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-xlfl-li-left-padding: 25px !default;
$grid-xlfl-li-icon-margin-right: 10px !default;
$grid-xlfl-dlg-padding-bottom: 5px !default;
$grid-xlfltd-radio-mtcase-padding: 12px !default;
$grid-xlfl-fieldset-font-size: 13px !default;
$grid-xlfl-dlgfields-font-size: 15px !default;
$grid-xlfl-li-height: 36px !default;
$grid-xl-radio-padding-left: 25px !default;
$grid-xlfl-radiodiv-width: 120px !default;
$grid-bigger-xlfl-li-height: 40px !default;
$grid-bigger-xlfl-fieldset-font-size: 16px !default;
$grid-bigger-xlfl-dlgfields-font-size: 18px !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;

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

        .e-xlfl-fieldset {
            font-size: $grid-xlfl-fieldset-font-size;
            padding-top: $grid-xlfl-fieldset-padding;
        }

        .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-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-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-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;
            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-chk-hidden {
            -moz-appearance: none; // sass-lint:disable-line no-vendor-prefixes
            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 {
            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 {
            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;
        }

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


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

    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: 14px !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-header-font-size: 14px !default;
$grid-bigger-header-font-size: 16px !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: 18px !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;
$group-ungroupicon-font-size: 11px !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: 3px 2px 0 10px !default;
$grid-textwrap-srotnumber-margin: 3px 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: 15px !default;
$grid-columnchooser-btn-font-size: 14px !default;
$grid-columnchooser-btn-line-height: 3 !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: 1px 0 0 -20px !default;
$grid-rtl-bigger-rightalign-sortnumber-margin: 1px 0 0 20px !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: 16px !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: 22px !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-rtl-ungroup-icon-margin-top: 1px !default;
$grid-bigger-rtl-ungroup-icon-margin-right: -12px !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-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-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: -30px 10px !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 !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-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-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: 14px !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: 16px !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: 16px !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: 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: 14px !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: 1px 10px 1px 8px !default;
$grid-fltr-sortnumber-margin: 1px 8px 1px 8px !default;
$grid-fltr-sortnumber-rightalign-margin: 1px 8px 0 10px !default;
$grid-sortnumber-rightalign-margin: 1px 8px 0 22px !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: 14px !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: 14px !default;
$group-expand-icon-text-indent: 11px !default;
$group-droparea-color: $content-text-color-alt3 !default;
$group-sorticon-font-size: 14px !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: 14px !default;
$grid-group-unpgroupicon-margin-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: 0 !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 22px !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 -2px !default;
$grid-rtl-grouped-headercell-padding: 5px 0 !default;
$grid-rtl-group-text-margin-left: 0 !default;
$grid-rtl-group-sorticon-margin-right: -10px !default;
$grid-rtl-headercell-border-width: 0 !default;
$grid-rtl-headercelldiv-padding: 0 .4em 0 2.8em !default;
$grid-ungroup-rtl-padding-right: -12px !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: 14px !default;
$grid-group-caption-header-padding: .5em !default;
$group-sorticon-margin-left: -8px !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-font-size: 16px !default;
$group-unpgrouicon-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: 16px !default;
$grid-bigger-content-font-size: 16px !default;
$grid-filterbar-border-radius: 4px !default;
$grid-bigger-sorticon-margin-top: 1px !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-bigger-grouptext-marign: 0 !default;
$grid-bigger-headercell-padding: 12px !default;
$grid-bigger-icons-font-size: 16px !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: -8px !default;
$grid-bigger-ungroupbutton-icons-font-size: 16px !default;
$grid-bigger-groupcell-span-padding: 0 8px !default;
$grid-bigger-ungroupbutton-icon-margin-left: -12px !default;
$grid-bigger-ungroupbutton-icon-margin-top: 1px !default;
$grid-bigger-groupcell-span-line-height: 24px !default;
$grid-bigger-gdownarrow-icon-font-size: 16px !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: 16px !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: 22px !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: 37px !default;
$grid-device-groupheadercell-span-line-height: 33px !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-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: -13px 24px -12px 8px !default;
$grid-sortdiv-filtericon-rightalign-margin: -13px 8px -12px -2px !default;
$grid-rtl-sortdiv-filtericon-rightalign-margin: -13px 8px -12px 24px !default;
$grid-rtl-sortdiv-filtericon-margin: -13px 8px -13px 24px !default;
$grid-bigger-fltricon-sortdiv-rightalign-margin: -15px 4px -14px -2px !default;
$grid-bigger-fltricon-sortdiv-margin: -15px 22px -14px 4px !default;
$grid-rtl-bigger-fltricon-sortdiv-margin: -15px 4px -14px 24px !default;
$grid-rtl-bigger-fltricon-sortdiv-rightalign-margin: -15px 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: -12px -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: 0 -3px !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: -30px -5px !default;
$grid-header-wrap-filtericon-sortfilter-div-margin: -27px 20px -29px 0 !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: -28px 0 !default;
$grid-drag-font-size: 14px !default;
$grid-drag-icon-font-weight: bold !default;
$grid-drag-move-icon: 10px !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-wrap-max-height: 36px !default;
$grid-bigger-fltr-sortnumber-rightalign-margin: 1px 4px 0 4px !default;
$grid-bigger-sortnumber-rightalign-margin: 1px 4px 0 20px !default;
$grid-bigger-columnmenu-bottom: 13px !default;
$grid-bigger-sortnumber-margin: 1px 4px 0 4px !default;
$grid-bigger-fltr-sortnumber-margin: 1px 4px 0 4px !default;
$grid-rtl-searchclear: 0 !default;
$grid-column-chosser-searchdiv-top: -41px !default;
$grid-reorderarrow-font-size: 10px !default;
$grid-bigger-wrap-line-height: 24px !default;
$grid-bigger-clone-padding: 3px 0 0 8px !default;
$grid-bigger-draganddrop-clone-padding: 0 !default;
$grouped-bigger-text-font-size: 16px !default;
$grid-bigger-ungroupbutton-icon-margin-right: 0 !default;
$grid-bigger-font-size: 16px !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: 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 -22px !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: 12px !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-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: 16px !default;
$grid-responsive-res-apply-btn-margin-top: 0 !default;
$grid-responsive-sort-clear-btn-font-size: 16px !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: 1px 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: 14px !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: 0 !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: 16px !default;
$grid-filter-border-radius: 6px !default;
$grid-adaptive-toolbar-icon-hover-bottom: 4px !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: 14px !default;
$grid-bigger-reorderarrow-margin-top: -3.7px !default;
$grid-bigger-drag-count-padding: 3px 8px 4px !default;
$grid-bigger-drag-count-top: -14px !default;
$grid-bigger-check-select-all-font-size: 10px !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-rtl-group-span-padding: 0 8px !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: 16px !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 {
            & .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-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-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: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;
            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;
        }

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

        .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 {
            @if $grid-skin == 'fluent' {
                padding-right: 4px;
            }
        }

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

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

            @if $grid-skin == 'bootstrap5' {
                margin-left: 4px;
            }

            @if $grid-skin == 'tailwind' {
                margin-left: 32px;
            }

            @if $grid-skin == 'fluent' {
                margin: 2px 0 0 12px;
            }
        }

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

        .e-groupdroparea {
            font-size: $grid-bigger-grouparea-font-size;
            min-height: $grid-bigger-group-line-height;
            padding: $grid-bigger-groupdroparea-padding;
        }

        .e-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 {
            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;
        }
        // sass-lint:disable-all
        .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-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;
            padding: $grid-bigger-group-headercell-padding;
            font-size: $grouped-bigger-text-font-size;
        }

        .e-groupheadercell:hover {
            padding: $grid-bigger-group-headercell-hover-padding;
        }

        .e-gdclone {
            border-radius: $grid-bigger-group-clone-broder-radius;
            padding: $grid-bigger-group-clone-padding;
        }

        .e-groupheadercell span {
            height: $grid-bigger-groupcell-span-line-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;
        }

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

        &.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;
            margin-top: $grid-bigger-ungroupbutton-icon-margin-top;
            margin-right: $grid-bigger-ungroupbutton-icon-margin-right;

            @if $grid-skin == 'fluent' {
                padding: 0 4px;
            }
            @else if $grid-skin == 'bootstrap4' {
                padding-top: 8px;
            }
        }

        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;
            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-rtl span.e-groupsort.e-icons {
            @if $grid-skin == 'fluent' {
                margin-top: 0;
                padding: 0 4px;
            }
            @else if $grid-skin == 'bootstrap4' {
                margin-left: 7px;
            }
        }

        &.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 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-rtl-ungroup-icon-margin-top;
            padding-top: $grid-ungroup-rtl-padding-top;
            padding-left: $grid-ungroup-rtl-padding-left;
        }

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

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

        .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 {
                box-shadow: $grid-dragborder-box-shadow;
                position: $grid-dragborder-position;
                z-index: $grid-dragborder-z-index;
            }
        }

        .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 {
            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-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 {
                    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: 18px;

                            @if $grid-skin == 'tailwind' or $grid-skin == 'bootstrap5' {
                                font-size: 16px;
                            }

                            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-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-group-animator .e-icon-drag.e-icons {
            margin-left: $grid-animator-drag-margin-left;
        }

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

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

        .e-gridcontent {
            & tr:first-child td {
                border-top: 0 none;
            }
        }


        .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 {
            border-bottom-width: 0;
        }

        .e-frozenhdrcont table tr:not(.e-editedrow):first-child td {
            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-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;
        }

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

        tr th.e-firstcell {
            border-left-style: $grid-border-type;
            border-left-width: $grid-border-size;
        }

        &.e-default tr {
            & td:first-child,
            & th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border),
            & th.e-detailheadercell:first-child,
            & 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;
        }

        .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 {
            @if $grid-skin == 'fluent' {
                padding-right: 4px;
            }
        }

        .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 {
            margin: $grid-textwrap-column-menu-margin;
        }

        &.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 {
                margin: $grid-rtl-textwrap-column-menu-margin;
            }
        }

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

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

        &.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 {
                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;
        }
        // sass-lint:disable-all
        .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;
        }
        // sass-lint:enable-all
        .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; // sass-lint:disable-line no-vendor-prefixes
            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; // sass-lint:disable-line no-vendor-prefixes
            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;
            }

            & .e-ftrchk,
            & .e-searchbox {
                padding-left: $grid-checkbox-padding-topbottom;
            }
        }

        .e-ftrchk {
            padding-bottom: $grid-checkbox-padding-topbottom;
            padding-top: $grid-checkbox-padding-topbottom;
        }

        .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-lastsummarycell {
            border-right: 1px solid;
        }

        .e-footerpadding {
            padding-right: 14px; //need to consider from javascript
        }

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

            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 {
            font-size: $grid-reorderarrow-font-size;
            margin-left: $grid-reorderarrow-margin-left;
            margin-top: $grid-reorderarrow-margin-top;
            position: absolute;
            z-index: 10;
        }

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

        td.e-cellselectionbackground {
            font-weight: $grid-selection-font-weight;
        }

        .e-groupdroparea {
            height: auto;
            line-height: normal;
            min-height: $grid-group-height;
        }

        .e-griddragarea {
            border: 1px solid;
            opacity: .6;
            position: absolute;
        }

        .e-gdclone {
            border-radius: $grid-gd-clone-border-radius;
            padding: 2px;
        }

        .e-content {
            -webkit-overflow-scrolling: touch; // sass-lint:disable-line no-vendor-prefixes
            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;
        }

        .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;
            padding: $grid-grouped-headercell-padding;
            vertical-align: middle;
        }

        .e-groupheadercell:hover {
            border: $group-hover-border;
            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: 26px;
        }

        &.e-device .e-groupheadercell .e-ungroupbutton {
            line-height: 28px;
        }

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

        span.e-ungroupbutton.e-icons {
            margin-left: $group-unpgrouicon-margin-left;
            margin-top: $grid-group-unpgroupicon-margin-top;
            padding-right: $grid-group-unpgroupicon-padding-right;

            @if $grid-skin == 'bootstrap4' {
                padding-top: 4px;
            }
            @else if $grid-skin == 'tailwind' {
                padding-top: 1px;
            }
        }

        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;
            text-indent: $group-collapse-icon-text-indent;
        }

        .e-icon-grightarrow {
            font-size: $grid-group-right-arrow-icon-font-size;
            text-indent: $group-expand-icon-text-indent;
        }

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

        .e-groupcaption {
            border-style: $grid-border-type;
            border-width: $grid-border-size 0 0;
            display: table-cell;
            font-size: $grid-group-caption-font-size;
            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-btn-icon.e-icons.e-columnchooser-btn {
            font-size: $grid-columnchooser-btn-font-size;
            line-height: $grid-columnchooser-btn-line-height;
        }

        .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;
        }
        // sass-lint:disable-all
        .e-griderror label {
            display: inline !important;
        }
        // sass-lint:enable-all

        .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 .e-normaledit .e-rowcell {
            border-top: $grid-border-size $grid-border-type;
        }

        &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child .e-rowcell {
            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;
        }

        .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-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;
            // sass-lint:disable-all
            @if $grid-skin == 'fluent' {
                margin-left: 12px !important;
            }
            // sass-lint:enable-all
        }

        .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-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; // sass-lint:disable-line no-vendor-prefixes
        }

        .e-frozencontent {
            -ms-touch-action: none; // sass-lint:disable-line no-vendor-prefixes
            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; // sass-lint:disable-line no-vendor-prefixes
            flex: 1;
            overflow-x: auto;
            overflow-y: hidden;
        }
        // Safari and Chrome
        &:not(.sf-grid) .e-movablecontent::-webkit-scrollbar { // sass-lint:disable-line no-vendor-prefixes
            display: none;
        }
        // Safari with Mac OS
        .e-content.e-mac-safari::-webkit-scrollbar { // sass-lint:disable-line no-vendor-prefixes
            width: 7px;
        }
        // Safari with Mac OS
        .e-content.e-mac-safari::-webkit-scrollbar-thumb { // sass-lint:disable-line no-vendor-prefixes
            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-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;
                        }
                    }

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

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

            & 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 {
                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-columnheader.e-wrap .e-headercelldiv {
            margin-bottom: $grid-wrap-margin-bottom;
            margin-top: $grid-wrap-margin-top;
        }

        &.e-wrap .e-columnheader .e-filtermenudiv {
            line-height: $grid-wrap-line-height;
        }

        & .e-columnheader.e-wrap .e-filtermenudiv {
            line-height: $grid-wrap-line-height;
        }

        & .e-columnheader.e-wrap .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-wrap-line-height;
            overflow-wrap: break-word;
            text-overflow: clip;
            white-space: normal;
            word-wrap: break-word;
        }

        & .e-stackedheadercelldiv {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        & .e-stackedheader .e-columnheader.e-wrap .e-headercelldiv,
        & .e-stackedheader .e-columnheader.e-wrap .e-stackedheadercelldiv {
            max-height: $grid-rowcell-wrap-max-height;
        }

        & .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,
            & th.e-headercell.e-firstcell {
                border-left: 0;
                border-right: 0;
                border-top: 0;
            }

            & tr.e-columnheader th:last-child.e-stackedheadercell .e-rhandler.e-rcursor {
                border-right: 0;
            }

            &.e-default table th[rowspan] {
                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;
            }
        }

        &.sf-grid {

            .e-table {
                border-spacing: .25px;
            }

            .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-reorderdownarrow {
                margin-top: $grid-reorder-downarrow-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: hidden;
            }

            .e-frozencontent {
                border-bottom-style: $grid-border-type;
                height: inherit;
                overflow: hidden;
            }

            .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-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;
        margin-top: $grid-bigger-reorderarrow-margin-top;
    }

    .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-rtl .e-columnmenu {
        margin: $grid-bigger-rtl-cm-margin;
    }

    &.e-rtl .e-groupheadercell span {
        padding: $grid-bigger-rtl-group-span-padding;
    }
}

#{&}.e-grid-min-height {
    .e-rowcell {
        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-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;
            }
        }

        .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: 6px;
            white-space: nowrap;
            width: 45%;
        }

        & td[data-cell] {
            padding-bottom: 5px;
            padding-left: 55%;
            padding-top: 5px;
            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-dlg-header-content {
        background: $grid-responsive-header-background;
        border-bottom: 1px solid;
        border-bottom-color: $grid-header-border-color;
        padding: 16px;
        width: 100%;

        & .e-btn {
            background: none;
            box-shadow: none;
            outline: none;
            position: initial;

            &.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;
            padding-left: 0;
            padding-right: 40px;
        }

        & .e-dlg-header {
            width: auto;

            & .e-res-custom-element {
                display: flex;

                & .e-dlg-custom-header {
                    font-weight: 500;
                    padding-top: $grid-responsive-header-padding-top;
                    width: 100%;
                }

                & .e-res-filter-clear-btn {
                    color: $grid-responsive-filter-reset-color;
                    margin-top: $grid-responsive-filter-clear-margin;
                    padding: 0;

                    & .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;
                    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: 5px;
            }
            @else if $grid-skin == 'tailwind' {
                padding-top: 1.5px;
            }
        }
    }

    &.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%;
            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;
                                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; // sass-lint:disable-line no-vendor-prefixes
                            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;
        padding-left: 40px;
        padding-right: 0;
    }

    & .e-res-apply-btn {
        padding-left: 0;
        padding-right: 20px;
    }

    & .e-ressortbutton-parent {
        float: left;
    }
}

@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) {
            box-shadow: $grid-cell-focus-shadow;
        }

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

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

        .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder,
        .e-gridcontent .e-rowcell.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;
            position: $grid-dragborder-position;
            z-index: $grid-dragborder-z-index;
        }

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

        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 {
            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 {
            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 {
            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-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 tr[role='row']:not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
        &.e-gridhover tr[role='row']:not(.e-detailrow):hover .e-detailrowcollapse,
        &.e-gridhover tr[role='row']:hover .e-rowdragdrop,
        &.e-rtl .e-gridhover tr[role='row']:hover .e-rowdragdrop,
        &.e-gridhover tr[role='row']: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;
            }
        }

        & tr[role='row']:hover .e-rowdragdrop {
            cursor: move;
        }

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

        .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 {
            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 {
            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;
            opacity: .95;
            overflow: visible;
        }

        & .e-row .e-dragstartrow::before,
        & .e-row .e-selectionbackground .e-dragstartrow::before {
            color: $grid-clone-dropitemscount-bg-color;
        }

        .e-griddragarea {
            background-color: $grid-drag-clone-bg-color;
            border-color: $grid-drag-clone-bg-color;
            color: $grid-row-selection-color;
        }

        .e-groupdroparea {
            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 {
            background-color: $grouped-droparea-bg-color;
        }

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

        .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 {
            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 .e-normaledit .e-rowcell {
            border-top-color: $grid-header-border-color;
        }

        .e-gridcontent .e-normaledit .e-dragindentcell,
        .e-gridcontent .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;
        }

        .e-cloneproperties.e-draganddrop table,
        .e-cloneproperties.e-draganddrop table .e-selectionbackground {
            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 {
            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: 10px !default;
$fe-big-lg-text-font-size: $text-sm !default;
$fe-big-dg-header-font-size: 21px !default;
$fe-big-dg-td-font-size: 15px !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-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: 10px !default;
$fe-grid-header-cb-padding-left: 12px !default;
$fe-grid-content-font-size: 12px !default;
$fe-grid-content-name-font-size: 14px !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-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: 14px !default;
$fe-big-grid-content-font-size: 14px !default;
$fe-big-grid-content-name-font-size: 16px !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: 20px !default;
$fe-mobile-newfolder-padding-top: 0 !default;
$fe-mobile-upload-padding-left: 0 !default;
$fe-mobile-sort-padding-top: 3px !default;
$fe-mobile-refresh-padding-top: 3px !default;
$fe-mobile-select-padding-top: 2px !default;
$fe-mobile-large-padding: 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: 14px !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: 14px !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;

// sass-lint:disable no-vendor-prefixes
@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;
            }

            .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-tbar-btn {
                border: 0;
                box-shadow: none;
                font-weight: 400;
                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;
                        }
                    }

                    .e-clear-icon {
                        margin: $fe-search-clear-icon-padding;

                        @if $skin-name == 'FluentUI' {
                            padding: $fe-search-clear-icon-margin;
                        }
                    }
                }
            }

            .e-fe-search {
                font-size: 14px;
                margin: $fe-search-icon-margin;

                @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
                    margin-right: 4px;
                    padding: 3px;
                }
                @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' {
                    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' {
                        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; // sass-lint:disable-line 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;
                    }

                    .e-fe-text {
                        font-size: $fe-grid-content-name-font-size;
                    }
                }

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

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

            .e-empty-icon {
                height: $fe-grid-empty-icon-height;
                margin: $fe-grid-empty-icon-margin;
                width: $fe-grid-empty-icon-width;
            }

            .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' {
                    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; // sass-lint:disable-line 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;
                }

                .e-fe-grid-icon {
                    @if $fm-skin-name != 'tailwind' {
                        padding: 0 0 0 12px;
                    }

                    .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' {
                        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; // sass-lint:disable-line no-important
                }
            }
        }

        &.e-rtl .e-view-container {
            .e-grid {
                .e-gridheader {
                    padding-left: 0 !important; // sass-lint:disable-line 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;
            }

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

            .e-empty-icon {
                height: $fe-lg-icon-empty-icon-height;
                margin: $fe-lg-icon-empty-icon-margin;
                width: $fe-lg-icon-empty-icon-width;
            }

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

            .e-list-item {
                border: 1px 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' {
                    &.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' {
                    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;
            }

            .e-list-img {
                border: 2px solid;

                @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
                    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;
            }
        }

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

                    .e-input-group {

                        .e-input {
                            @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
                                margin: 0 29px 0 0;
                            }
                            @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' {
                        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-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 {

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

                    .e-list-text {
                        margin: 0 auto;
                        width: $fe-mobile-lg-item-inner-width;
                    }

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

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

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

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

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

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

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

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

                &: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 == '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;
                    }
                }
            }
        }

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

            .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 tr[role='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 tr[role='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' {
                    color: $content-text-color-alt2;
                }
            }

            .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: 18px !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: 22px !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: 26px;
            }
            @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;
                }
            }
        }
    }
}




@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: 16px !default;
$btn-grp-icon-font-size-bigger: 20px !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') {
    // sass-lint:disable-all
    #{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;

        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 {
                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') {
    // sass-lint:disable-all
    .e-btn-group,
    .e-css.e-btn-group {
        &:not(.e-outline) {
            box-shadow: $btn-box-shadow;
        }

        @if $skin-name == 'material' or $skin-name == 'bootstrap4' {
            .e-btn {
                box-shadow: none;
            }
        }

        .e-btn:hover {
            box-shadow: none;
        }
        //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;

            &.e-primary {
                @include primary-active;
            }

            &.e-success {
                @include success-active;
            }

            &.e-info {
                @include info-active;
            }

            &.e-warning {
                @include warning-active;
            }

            &.e-danger {
                @include danger-active;
            }

            &.e-outline {
                @include outline-active;

                &.e-primary {
                    @include outline-primary-active;
                }

                &.e-success {
                    @include outline-success-active;
                }

                &.e-info {
                    @include outline-info-active;
                }

                &.e-warning {
                    @include outline-warning-active;
                }

                &.e-danger {
                    @include outline-danger-active;
                }
            }
        }
        //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 {
                stroke: fade-out($btn-color, $progress-btn-circle-opacity);

                @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 {
                    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 {
                            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' {
                            stroke: $btn-flat-primary-path-arc;
                        }
                        @else {
                            stroke: $btn-flat-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 {
                    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 {
                            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;
                        }
                    }
                }
            }
        }

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

        &.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 {
                    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: fade-out($btn-flat-warning-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-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 {
                    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 {
                            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;
                        }
                    }
                }
            }
        }

        &.e-outline,
        &.e-flat {
            &.e-primary {
                .e-spinner-pane .e-spinner-inner svg {
                    fill: $btn-primary-bgcolor;
                    stroke: $btn-primary-bgcolor;

                    .e-path-circle {
                        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 {
                        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 {
                        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 {
                        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 {
                        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 {
                    stroke: fade-out($btn-link-color, $progress-btn-circle-opacity);
                }

                .e-path-arc {
                    stroke: $btn-link-color;
                }
            }
        }
    }

    .e-progress {
        background-color: $progress-btn-bgcolor-normal;
    }

    #{if(&, '&', '*')}.e-primary,
    #{if(&, '&', '*')}.e-success,
    #{if(&, '&', '*')}.e-danger,
    #{if(&, '&', '*')}.e-info {
        .e-progress {
            background-color: $progress-btn-bgcolor;
        }
    }

    #{if(&, '&', '*')}.e-warning {
        .e-progress {
            background-color: $progress-btn-warning-progress-color;
        }
    }

    #{if(&, '&', '*')}.e-flat {
        &.e-primary {
            .e-progress {
                background-color: fade-out($progress-btn-flat-primary-progress-color, .8);
            }
        }

        &.e-success {
            .e-progress {
                background-color: fade-out($progress-btn-flat-success-progress-color, .8);
            }
        }

        &.e-info {
            .e-progress {
                background-color: fade-out($progress-btn-flat-info-progress-color, .8);
            }
        }

        &.e-warning {
            .e-progress {
                background-color: fade-out($progress-btn-flat-warning-progress-color, .8);
            }
        }

        &.e-danger {
            .e-progress {
                background-color: fade-out($progress-btn-flat-danger-progress-color, .8);
            }
        }
    }

    #{if(&, '&', '*')}.e-outline:not(:focus) {
        &.e-primary {
            .e-progress {
                background-color: fade-out($btn-primary-bgcolor, .8);
            }
        }

        &.e-success {
            .e-progress {
                background-color: fade-out($btn-success-bgcolor, .8);
            }
        }

        &.e-info {
            .e-progress {
                background-color: fade-out($btn-info-bgcolor, .8);
            }
        }

        &.e-warning {
            .e-progress {
                background-color: fade-out($btn-warning-bgcolor, .8);
            }
        }

        &.e-danger {
            .e-progress {
                background-color: fade-out($btn-danger-bgcolor, .8);
            }
        }
    }

    #{if(&, '&', '*')}.e-flat:not(:focus) {
        @if $skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
            &.e-primary {
                .e-progress {
                    background-color: fade-out($btn-primary-bgcolor, .8);
                }
            }

            &.e-success {
                .e-progress {
                    background-color: fade-out($btn-success-bgcolor, .8);
                }
            }

            &.e-info {
                .e-progress {
                    background-color: fade-out($btn-info-bgcolor, .8);
                }
            }

            &.e-warning {
                .e-progress {
                    background-color: fade-out($btn-warning-bgcolor, .8);
                }
            }

            &.e-danger {
                .e-progress {
                    background-color: fade-out($btn-danger-bgcolor, .8);
                }
            }
        }
    }
}

$skin-name: 'bootstrap5' !default;
//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: 1 !default;
$rte-split-btn-line-height: 20px !default;
$rte-big-split-btn-line-height: 30px !default;
$rte-big-quick-item-btn-width: 39px !default;
$rte-quick-item-btn-width: 27px !default;
$rte-big-quick-item-btn-height: 34px !default;
$rte-quick-item-btn-height: 26px !default;
$rte-big-quick-item-padding: 0 !default;
$rte-quick-item-padding: 0 !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: 12px !default;
$rte-quick-drop-btn-caret-font-size: 10px !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-font-icon-width: 30px !default;
$rte-font-arrow-width: 18px !default;
$rte-font-arrow-touch-width: 20px !default;
$rte-font-icon-line-height: $leading-tight !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-insert-dialog-label-padding-top: 12px !default;
$rte-insert-dialog-label-padding-bottom: 12px !default;
$rte-big-quick-tbar-item-min-height: 34px !default;
$rte-big-quick-tbar-item-min-width: 39px !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-normal !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;
//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-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: $secondary-bg-color-hover !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: dashed 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-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;
//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;

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

            @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; // sass-lint:disable-line no-important
            }

            .e-rte-edit-table-prop-dialog {
                max-height: $rte-big-edit-table-dlg-max-height !important; // sass-lint:disable-line no-important
            }

            .e-rte-link-dialog {
                max-height: $rte-big-link-dlg-max-height !important; // sass-lint:disable-line no-important
            }

            .e-rte-img-dialog {
                min-height: $rte-big-img-dlg-max-height !important; // sass-lint:disable-line no-important
            }

            .e-rte-img-link-dialog {
                max-height: $rte-big-img-link-dlg-max-height !important; // sass-lint:disable-line no-important
            }

            .e-rte-img-size-dialog {
                max-height: $rte-big-img-size-dlg-max-height !important; // sass-lint:disable-line no-important
            }

            .e-rte-img-alt-dialog {
                min-height: $rte-big-img-alt-dlg-max-height !important; // sass-lint:disable-line no-important
            }
        }
    }

    .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; // sass-lint:disable-line no-important
            left: 0;
            overflow: auto;
            position: fixed;
            right: 0;
            top: 0;
            width: 100% !important; // sass-lint:disable-line 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; // sass-lint:disable-line no-important
            }

            .e-rte-edit-table-prop-dialog {
                max-height: $rte-edit-table-dlg-max-height !important; // sass-lint:disable-line no-important
            }

            .e-rte-link-dialog {
                max-height: $rte-link-dlg-max-height !important; // sass-lint:disable-line no-important
            }

            .e-rte-img-dialog {
                max-height: $rte-img-dlg-max-height !important; // sass-lint:disable-line no-important
            }

            .e-rte-img-link-dialog {
                max-height: $rte-img-link-dlg-max-height !important; // sass-lint:disable-line no-important
            }

            .e-rte-img-size-dialog {
                max-height: $rte-img-size-dlg-max-height !important; // sass-lint:disable-line no-important
            }

            .e-rte-img-alt-dialog {
                max-height: $rte-img-alt-dlg-max-height !important; // sass-lint:disable-line 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;
            }

            .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 {
            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 {
                            @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
                                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-font-color .e-selected-color.e-icons::before {
                        font-size: 12px;
                        position: relative;
                        top: -18px;
                    }

                    .e-font-color.e-icons::before {
                        font-size: 13px;
                    }

                    .e-rte-numberformatlist-dropdown .e-rte-list-primary-content,
                    .e-rte-bulletformatlist-dropdown .e-rte-list-primary-content {
                        line-height: 1;
                    }

                    .e-background-color.e-icons::before {
                        display: inline;
                        font-size: 14px;
                    }

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

            @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: 00.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 {
            // sass-lint:disable no-vendor-prefixes
            -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: 400;
                line-height: 1;
                margin: 10px 0;
            }

            .e-content h2 {
                font-size: 1.74em;
                font-weight: 400;
                margin: 10px 0;
            }

            .e-content h3 {
                font-size: 1.31em;
                font-weight: 400;
                margin: 10px 0;
            }

            .e-content h4 {
                font-size: 16px;
                font-weight: 400;
                line-height: 1.5;
                margin: 0;
            }

            .e-content h5 {
                font-size: 00.8em;
                font-weight: 400;
                margin: 0;
            }

            .e-content h6 {
                font-size: 00.65em;
                font-weight: 400;
                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: 700;
            }

            .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: 00.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-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 {
        border: 0;
        cursor: pointer;
        display: block;
        float: none;
        max-width: 100%;
        padding: 1px;
        position: relative;
    }

    .e-rte-image {
        border: 0;
        cursor: pointer;
        display: block;
        float: none;
        margin: auto;
        max-width: 100%;
        position: relative;
    }

    .e-rte-image.e-imginline {
        display: inline-block;
        float: none;
        max-width: calc(100% - (2 * 5px));
        padding: 1px;
        vertical-align: bottom;
    }

    .e-rte-image.e-imgcenter {
        cursor: pointer;
        display: block;
        float: none;
        margin: 5px auto;
        max-width: 100%;
        position: relative;
    }

    .e-rte-image.e-imgleft {
        float: left;
        margin: 0 auto;
        margin-right: 5px;
        text-align: left;
    }

    .e-rte-image.e-imgright {
        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 {
            font-family: $rte-font-family;
            font-size: 15px;
            opacity: .87;
            padding-bottom: $rte-insert-dialog-label-padding-bottom;
            padding-top: $rte-insert-dialog-label-padding-top;
        }

        .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-delete-btn.e-icons,
        .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
            margin-top: 0;
        }

        .e-img-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 {
            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 {
            margin-left: 0;
            margin-right: 0;
        }

        .e-img-uploadwrap.e-droparea .e-upload .e-upload-files {
            border-top: 0 solid transparent;
        }

        .e-img-uploadwrap.e-droparea .e-file-select-wrap {
            display: none;
        }

        .e-img-uploadwrap.e-droparea .e-upload {
            border: 0 solid transparent;
            float: none;
        }

        .e-dialog .e-img-uploadwrap.e-droparea .e-browsebtn {
            display: block;
            height: 36px;
            margin: 0 auto;
            padding: 0 18px;
            position: relative;
            top: -50px;

            @if $skin-name == 'FluentUI' {
                outline: none;
            }
        }

        .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap.e-droparea .e-browsebtn {
            display: none;
        }

        .e-dialog .e-img-uploadwrap.e-droparea {
            line-height: 10;
            min-height: 50px;
            position: relative;
        }

        .e-dialog .e-img-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 {
            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-rte-inline-dropdown.e-rte-backgroundcolor-dropdown,
        .e-rte-inline-dropdown.e-rte-fontcolor-dropdown,
        .e-rte-inline-dropdown.e-rte-numberformatlist-dropdown,
        .e-rte-inline-dropdown.e-rte-bulletformatlist-dropdown {
            line-height: 0;
        }

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

        .e-rte-table-popup.e-popup-open .e-rte-tablecell {
            border: $rte-table-span-border;
            display: inline-block;
            height: 14px;
            margin: 1px;
            overflow: hidden;
            vertical-align: top;
            width: 14px;
        }

        .e-rte-table-popup.e-popup-open .e-rte-table-row {
            height: 16px;
        }

        .e-rte-table-popup.e-popup-open .e-insert-table-btn {
            @if $skin-name == 'FluentUI' {
                margin-top: $rte-table-popup-btn-margin-top;
            }

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

            &.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: 0 6px;
                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: 0 6px;
                    min-height: 42px;

                    &:first-child,
                    &:last-child {
                        margin: 0 6px;
                    }

                    .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;
                margin-left: -3px;
            }

            .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: 0 6px;
                min-height: 48px;

                .e-toolbar-item:not(.e-separator) {
                    margin: 0 6px;
                    min-height: 48px;
                    min-width: 36px;
                    padding: 0;
                }

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

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

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

                .e-icons.e-btn-icon.e-caret:not(.e-toolbar-pop) {
                    padding-left: 0;
                    padding-right: 0;
                }
            }

            @if $skin-name == 'FluentUI' {
                .e-icons.e-btn-icon.e-caret {
                    padding-bottom: 4px;
                }
            }
        }

        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 {
            .e-icons.e-btn-icon,
            .e-rte-color-content,
            .e-rte-list-primary-content {
                line-height: $rte-split-btn-line-height;
            }
        }

        .e-dropdown-btn .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: 4px;
                    }
                }
            }
        }

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

            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 {
                .e-icons.e-btn-icon,
                .e-rte-color-content,
                .e-rte-list-primary-content {
                    line-height: $rte-big-split-btn-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-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: 16px;
        width: 16px;
    }

    .e-bigger .e-rte-table-popup.e-popup-open .e-rte-table-row {
        height: 18px;
    }

    .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-rte-dialog-minheight {
        min-height: 296px;
    }

    .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-img-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: 15px;
            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;
            }
        }
    }
    // 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 == '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;
        }

        .e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn {
            line-height: 20px;
        }

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

    @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-toolbar-item .e-tbar-btn.e-btn {
            line-height: 20px;
        }

        .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;
    }
    // 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-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-toolbar-wrapper + .e-rte-toolbar:not(.e-rte-tb-float) {
            border: 0;
        }

        img.e-img-focus::selection {
            background: transparent;
            color: transparent;
        }

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

                &.e-expand-open + .e-rte-content {
                    border-top: 0;
                }

                &.e-rte-tb-float {
                    border-bottom: 1px solid $rte-border-color;
                    border-right: 1px 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: 1px 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-extended.e-popup-open {
                border-bottom: 1px solid $rte-border-color;
            }

            &.e-rte-resize {
                .e-rte-content,
                .e-source-content {
                    border-bottom: 0;
                }
            }
        }
    }

    .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 {
        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: 185px;
        margin: 0 auto;
        text-align: center;
        width: 300px;
    }

    .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap .e-droptext {
        margin: 0 auto;
        width: 250px;
    }

    .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 {
        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 {
        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 {
        background: $rte-img-resize-back-color;
        border: 1px solid $rte-img-resize-color;
    }

    .e-rte-content .e-content img.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;
    }

    @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 {
        border: 1px solid $rte-border-color;
        display: block;
        margin-bottom: 8px;
        margin-top: 12px;
    }

    @if $skin-name == 'FluentUI' {
        .e-rte-table-popup .e-span-border {
            display: none;
        }
    }

    .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-color: $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-popup-bg;
        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;
        }
    }

    @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;
        }
    }
    // 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-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-replace::before {
            content: '\e710';
        }

        .e-align::before {
            content: '\e7b8';
        }

        .e-caption::before {
            content: '\e82e';
        }

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

        .e-insert-link::before {
            content: '\e757';
        }

        .e-display::before {
            content: '\e7b7';
        }

        .e-alt-text::before {
            content: '\e769';
        }

        .e-img-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-richtexteditor {
        .e-south-east::before,
        .e-south-west::before {
            content: '\e761';
        }
    }

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

$inplace-skin: 'bootstrap5' !default;
//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 $inplace-skin == '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 $inplace-skin == '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 $inplace-skin == 'material' {
                .e-spinner-inner {
                    top: 45%;
                }
            }
        }

        .e-editable-action-buttons {

            .e-btn-save,
            .e-btn-cancel {

                .e-btn-icon.e-icons {

                    @if $inplace-skin == 'bootstrap4' {
                        font-size: 16px;
                    }
                }
            }
        }
    }

    .e-inplaceeditor,
    .e-inplaceeditor-tip {

        .e-input-group + .e-editable-loading {

            @if $inplace-skin == '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 $inplace-skin == '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 $inplace-skin == 'tailwind' or $inplace-skin == 'bootstrap5' $inplace-skin == '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 $inplace-skin == 'tailwind' or $inplace-skin == '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 $inplace-skin == 'tailwind' or $inplace-skin == '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 $inplace-skin == 'fabric-dark' or $inplace-skin == 'bootstrap-dark' or $inplace-skin == 'highcontrast' or $inplace-skin == 'highcontrast-light' {
                    box-shadow: none;
                }
                @else if $inplace-skin == 'fabric' {
                    box-shadow: 0 1px 4px 0 $black-color;
                }
                @else if $inplace-skin == 'bootstrap' {
                    box-shadow: 0 1px 4px 0 $black-color;
                }
                @else if $inplace-skin == 'bootstrap4' {
                    background-color: $content-bg;
                    border: 1px solid $gray-400;
                    box-shadow: 0 1px 4px 0 $black-color;
                }

                @else if $inplace-skin == '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 $inplace-skin == 'bootstrap4' {

                    &:hover {
                        background-color: darken($gray-600, 7.5%);
                        border: 1px solid darken($gray-600, 10%);
                    }
                }
                @else if $inplace-skin == 'bootstrap5' {

                    &:hover {
                        background-color: darken($gray-600, 7.5%);
                        border: 1px solid darken($gray-600, 10%);
                    }
                }


                @if $inplace-skin == 'bootstrap4' {

                    &:focus {
                        background-color: $gray-600;
                        border: 1px solid $gray-600;
                    }
                }

                @if $inplace-skin == 'bootstrap4' {

                    &:active {
                        background-color: darken($gray-600, 10%);
                        border: 1px solid darken($gray-600, 12.5%);
                    }
                }

                &:hover,
                &:focus,
                &:active {

                    .e-btn-icon.e-icons {

                        @if $inplace-skin == 'bootstrap4' {
                            color: $white;
                        }
                    }
                }
            }
        }
    }

    @if $inplace-skin == 'tailwind' or $inplace-skin == '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 $inplace-skin == 'FluentUI' {
                border-radius: $editor-popup-tip-wrapper-bdr-radius;
            }

            .e-tip-content {
                border-radius: $editor-popup-tip-content-bdr-radius;
                color: $editor-value-text-color;
            }

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

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

$kanban-skin: 'bootstrap5' !default;
//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: 14px !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: 400;
                        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 {
                border-radius: 4px;
                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-color: $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: 400;
                                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-color: $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 ($kanban-skin == 'highcontrast') {
                                    color: $kanban-default-font-color;
                                }

                                @if ($kanban-skin == 'tailwind' or $kanban-skin == '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: 400;
                            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-color: $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 $kanban-skin == '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 $kanban-skin == 'bootstrap5' {
                        padding-top: 4px;
                    }

                    &:hover,
                    &:focus {
                        @if $kanban-skin == '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-color: $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 $kanban-skin == 'bootstrap4' {
                padding-top: 3px;
            }

            .e-close {
                @if $kanban-skin != 'bootstrap4' {
                    background-color: transparent;
                }

                @if ($kanban-skin == 'fabric' or $kanban-skin == '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 {
        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;
            }

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


@include export-module('kanban-theme') {
    /*! kanban component theme */
    .e-kanban {
        background: $kanban-bg-color;

        .e-kanban-table {
            .e-header-cells {
                background-color: $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-color: $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-color: $kanban-dropped-clone-bg-color;
                        }

                        .e-show-add-icon {
                            color: $kanban-dropped-clone-border-color;
                        }
                    }
                }

                .e-card {
                    @if ($kanban-skin == 'tailwind' or $kanban-skin == 'bootstrap5' or $kanban-skin == 'FluentUI') {
                        background: $kanban-card-bg-color;
                    }

                    &.e-selection {
                        background-color: $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-color: $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-kanban-form-wrapper table {
            textarea {
                background-color: $kanban-text-area-bg-color;
                color: $kanban-text-area-color;
                min-width: 70%;

                @if $kanban-skin == 'fabric' or $kanban-skin == 'fabric-dark' or $kanban-skin == 'bootstrap5' or $kanban-skin == 'highcontrast' or $kanban-skin == 'tailwind' {
                    font-weight: 400;
                }

                @if ($kanban-skin == 'tailwind' or $kanban-skin == '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;
                }
            }
        }
    }
}


@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 */
    // sass-lint:disable no-vendor-prefixes
    .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 {
                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 */
    // sass-lint:disable no-vendor-prefixes
    .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') {
    // sass-lint:disable no-vendor-prefixes
    .e-pv-viewer-container {
        background-color: $pv-background;
        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;
    }

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

    .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-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 {
        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 {
        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) {
        height: auto;
        margin-left: $pv-toolbar-items-margin-left;
        margin-right: $pv-toolbar-items-margin-right;
        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 {
            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) {
        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 {
        height: $pv-password-dialog-height;
        margin: 0 10px;
        max-width: $pv-password-dialog-width;
    }

    .e-pv-corrupted-popup.e-dialog {
        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 {
        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 {
        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 {
        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') {
            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;
    }

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

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

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

    .e-pv-bookmark-title {
        padding-left: $pv-bookmark-title-padding-left;
    }

    .e-bigger div > .e-pv-bookmark-icon.e-pv-icon {
        @if $skin-name == 'bootstrap4' {
            font-size: $pv-icon-font-size-big;
        }
    }

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

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

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

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

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

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

    .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 {
        font-size: 14px;
        margin-bottom: 8px;

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

    .e-pv-properties-line-end-container,
    .e-pv-properties-line-thickness-container {
        @if ($skin-name == 'bootstrap5') {
            margin-left: 37px;
        }
        @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-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;
        }
    }

    .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;
        }
        @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;
        }
        @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;
        }
        @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 {
        height: $pv-annot-toolbar-dropdown-btn-height;
        width: $pv-annot-toolbar-dropdown-btn-width;
    }

    .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;
        }
        @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 {
        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;
        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 {
        height: $pv-password-dialog-height-mobile;
    }

    .e-bigger .e-pv-notification-popup.e-dialog,
    .e-pv-mobile-view .e-pv-notification-popup.e-dialog {
        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 {
        height: $pv-notification-dialog-height-large-mobile;
    }

    .e-bigger .e-pv-corrupted-popup.e-dialog,
    .e-pv-mobile-view .e-pv-corrupted-popup.e-dialog {
        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;
    }

    .e-bigger div > .e-pv-bookmark-icon.e-pv-icon.e-right {
        @if $skin-name == 'bootstrap4' {
            font-size: $pv-icon-font-size-big;
        }
    }

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

        @if $skin-name == 'bootstrap5' {
            color: $content-text-color-alt2;
        }

        font-size: 14px;

        @if $skin-name == 'bootstrap5' {
            font-size: 12px;
        }

        line-height: normal;
        min-height: 22px;
        padding: 2px 8px 3px;
    }

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

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

    .e-pdfviewer .e-btn-save {
        font-size: 14px;
        margin-right: 12px;
        padding-left: 7px;
        padding-right: 7px;
    }

    .e-pdfviewer .e-btn-save.e-outline.e-primary:disabled {
        @if $skin-name != 'bootstrap5' {
            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;
    }

    .e-contextmenu-wrapper .e-pv-context-menu .e-menu-item {
        height: 38px;
    }

    .e-pv-comment-panel {
        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 {
        background-color: $pv-comment-panel-bg;
        border-color: $pv-comment-panel-border-color;
        border-style: double;
        border-width: 0 1px 1px 0;
        height: 45px;
        position: relative;
    }

    .e-pv-comment-panel-title {
        color: $pv-comment-font-color;
        font-size: 14px;

        @if $skin-name == 'bootstrap5' {
            font-size: 16px;
            font-weight: 500;
        }

        @if $skin-name == 'FluentUI' {
            font-weight: $pv-comment-tile-font-weight;
        }

        left: 15px;
        position: absolute;
        text-align: left;
        top: 14px;
    }

    .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;
        right: 11px;
        top: 5px;
        width: $pv-title-close-width;

        @if $skin-name == 'FluentUI' {
            padding: 4px;
        }
    }

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

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

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

        max-width: 237px;
        padding-left: 32px;
        padding-top: $pv-comment-title-padding-top;
        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;
        }

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

        display: block;
    }

    .e-dropdown-popup.e-lib.e-popup.e-control.e-pv-handwritten-popup.e-popup-open ul {
        @if $skin-name == 'FluentUI' {
            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-all;
    }

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

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

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

    .e-pdfviewer .e-pv-signature-window .e-footer-content .e-pv-clearbtn {
        float: left;
    }

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

    .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-curser-color;
            color: $pv-icon-color-hover;
            outline: 0 solid $pv-comment-text-curser-color;
            outline-offset: 0;
        }
    }

    .e-pv-custom-annotation-thickness-container,
    .e-pv-custom-annotation-opacity-container {
        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;
        }
        @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 {
        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;
        }
    }

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

    .e-pv-properties-fill-color-style-prop,
    .e-pv-properties-stroke-color-style-prop,
    .e-pv-properties-stroke-thickness-style-prop {
        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;
        }
    }

    .e-pv-properties-format-text-style-prop {
        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
            padding: 15px 15px 4px 1px;
        }
        @else {
            padding: 15px 15px 15px 1px;
        }
    }

    .e-pv-properties-font-family-container {
        margin-right: 15px;

        @if $skin-name == 'FluentUI' {
            width: 122px;
        }
        @else {
            width: 165px;
        }
    }

    .e-pv-properties-font-size-container {
        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 == 'FluentUI') {
            height: auto;
        }
    }

    .e-pv-properties-formfield-maxlength-text-label,
    .e-pv-formfield-maxlength {
        padding-left: 1px;
        width: $pv-formfield-maxlength-width;
    }

    .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-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 {
        background-color: $pv-form-field-li-background-color;

        @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
            color: $white;
        }
    }

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

    .e-pv-form-field-property-header-general {
        @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-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;
        }
    }

    .e-pv-properties-form-field-font-align {
        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;
        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;
        }
    }

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

    .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-pv-properties-header-spliter {
        border-bottom-color: $pv-properties-header-spliter-border-bottom-color;
        border-bottom-style: $pv-properties-header-spliter-border-bottom-style;
        border-bottom-width: $pv-properties-header-spliter-border-bottom-width;
        left: $pv-properties-header-spliter-left;
        padding-top: $pv-properties-header-spliter-padding-top;
        position: $pv-properties-header-spliter-position;
        width: $pv-properties-header-spliter-width;
    }

    .e-pv-properties-bottom-spliter {
        border-bottom-color: $pv-properties-header-spliter-border-bottom-color;
        border-bottom-style: $pv-properties-header-spliter-border-bottom-style;
        border-bottom-width: $pv-properties-header-spliter-border-bottom-width;
        left: $pv-properties-header-spliter-left;
        margin-bottom: $pv-properties-header-spliter-margin-bottom;
        padding-top: $pv-properties-header-spliter-margin-bottom;
        width: $pv-properties-header-spliter-width;
    }

    .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-pv-signature-dialog-height {
        height: $pv-signature-dialog-height;

        @if ($skin-name == 'FluentUI') {
            min-height: $pv-signature-dialog-height;
        }
    }

    .e-bigger .e-pv-signature-dialog-height {
        @if ($skin-name == 'FluentUI') {
            min-height: 592px;
        }
    }

    .e-pv-signature-dialog-blazor-height {
        height: $pv-signature-dialog-blazor-height;

        @if ($skin-name == 'FluentUI') {
            min-height: $pv-signature-dialog-height;
        }
    }

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

    .e-pv-canvas-signature-blazor {
        width: $pv-canvas-sign-width-blazor;
    }

    .e-pv-font-appearance-style {
        padding: $pv-font-div-padding;
    }

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


@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-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: normal !default;
$timepicker-list-normal-padding: 0 !default;
$timepicker-list-bigger-padding: 0 !default;
$timepicker-font-icon: '\e20c' !default;
$timepicker-icon-normal-font-size: 16px !default;
$timepicker-icon-bigger-font-size: 18px !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: 14px !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: 16px !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;

@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 {
        // sass-lint:disable no-vendor-prefixes
        -webkit-tap-highlight-color: transparent;

        #{if(&, '&', '*')} .e-time-icon.e-icons {
            font-size: $timepicker-icon-normal-font-size;

            @if $skin-name == 'material' or $skin-name == 'material-dark' {
                min-height: $timepicker-normal-input-min-height;
                min-width: $timepicker-normal-input-min-width;
            }
        }

        #{if(&, '&', '*')} .e-time-icon.e-icons.e-disabled {
            pointer-events: none;
        }

        #{if(&, '&', '*')} span {
            cursor: pointer;
        }
    }

    #{&}.e-timepicker.e-time-modal {
        background-color: $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 $skin-name == 'material' or $skin-name == 'material-dark' {
                min-height: $timepicker-bigger-input-min-height;
                min-width: $timepicker-bigger-input-min-width;
            }
        }
    }

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

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

// sass-lint:disable-all

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

// sass-lint:enable-all


@include export-module('timepicker-theme') {
    /*! timepicker theme */
    .e-time-wrapper {
        #{if(&, '&', '*')} .e-input-group-icon.e-icons.e-active {
            @if $skin-name == 'bootstrap4' or $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;
        }
    }

    #{&}.e-timepicker.e-popup {
        background-color: $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 {
            background-color: $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 {
                background-color: $timepicker-list-hover-bg-color;
                border: $timepicker-list-hover-border-color;
                color: $timepicker-list-hover-font-color;
            }

            #{if(&, '&', '*')} .e-list-item.e-active {
                background-color: $timepicker-list-active-bg-color;
                color: $timepicker-list-active-font-color;
            }

            #{if(&, '&', '*')} .e-list-item.e-active.e-hover {
                background-color: $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;
            }
        }
    }
}


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


/*! 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: 400 !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: 162px !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;
$recurrence-week-position-right: 27px !default;
$recurrence-week-position-right-rtl: -27px !default;

@include export-module('recurrence-editor-layout') {
    /*! Recurrence-Editor component layout */
    .e-recurrenceeditor {
        .e-editor {
            display: flex;
            flex-flow: row wrap;
            margin-left: auto;
            margin-right: 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: $recurrence-week-position-right;
            }

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

        .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 {
                position: relative;
                right: $recurrence-week-position-right-rtl;
            }

            .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-left: 8px;
                padding-right: 0;
            }

            .e-input-wrapper.e-end-on-date,
            .e-input-wrapper.e-end-on-count {
                padding-left: 0;
                padding-right: 8px;
            }

            .e-recurrenceeditor {
                .e-recurrence-table {
                    &.e-month-expand-wrapper td:first-child {
                        width: 0;
                    }
                }
            }
        }


        .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 {
            margin-bottom: 11px;
        }

        .e-month-expander-checkbox-wrapper.e-input-wrapper {
            margin-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 12px;
            }

            .e-recurrence-table .e-week-position {
                right: 24px;
            }

            .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;
                padding-left: 55px;
                padding-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: 0;
                }
            }

            .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 {
                    padding-left: 0;
                    padding-right: 64px;
                }

                .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-left: 12px;
                    padding-right: 0;
                }

                .e-input-wrapper.e-end-on-date,
                .e-input-wrapper.e-end-on-count {
                    padding-left: 0;
                    padding-right: 12px;
                }

                .e-recurrence-table .e-week-position {
                    right: 33px;
                }

                .e-week-position {
                    padding-left: 46px;
                }
            }
        }
    }

    .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-left: 10px;
                padding-right: 0;
            }

            .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-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-left: 0;
                    padding-right: 10px;
                }

                .e-recurrence-table .e-monthday-element {
                    padding-left: 0;
                }

                .e-week-position {
                    padding-left: 16px;
                    padding-right: 0;
                }
            }

            .e-recurrence-table .e-monthday-element {
                padding-left: 20px;
            }

            .e-week-position {
                padding-left: 0;
                padding-right: 0;
            }

            .e-week-position {
                padding-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: 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-left: 10px;
                    padding-right: 0;
                }

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

            &.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-left: 0;
                    padding-right: 10px;
                }
            }
        }
    }
}


/*! Recurrence-Editor component theme */

/*! Schedule's bootstrap5 theme wise override definitions and variables */
// sass-lint:disable-all
$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: 14px !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-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: 11px !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: 11px !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: 14px !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 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-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-padding: 12px 18px !default;
$schedule-popup-overlay-bg-color: $overlay-bg-color !default;

// schedule toolbar definitions
$border-size: 1px;
$schedule-tbar-down-arrow-padding-top: 0 !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-minheight: 24px !default;
$schedule-tbar-btn-bgr-minwidth: 24px !default;
$schedule-tbar-btn-bgr-padding: 8px !default;
$schedule-tbar-btn-icn-bgr-padding: 0 !default;
$schedule-tbar-btn-icn-right-bgr-padding: 4px 0 0 12px !default;

// view definitions
$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-continer-padding-bottom: 12px !default;
$schedule-dialog-all-day-row-padding-top: 4px !default;
$schedule-dialog-all-day-row-padding-bottom: 12px !default;
$schedule-bigger-dialog-row-continer-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-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: 14px !default;
$schedule-resource-color-size: 14px !default;
$schedule-bigger-resource-color-size: 16px !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-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-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-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-popup-header-icon-focus-bg-color: $schedule-active-color !default;
$schedule-popup-header-icon-focus-color: $schedule-popup-header-icon-hover-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 {
            background: $schedule-tbar-default-bg;
            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;

            @if ($schedule-skin == 'bootstrap') {
                border-radius: 0;
            }

            .e-active-view {
                .e-tbar-btn-text,
                .e-icons {
                    color: $schedule-active-font-color;
                }

                @if $schedule-skin == 'bootstrap5' {
                    .e-tbar-btn {
                        &:active,
                        &:focus,
                        &:hover {
                            .e-tbar-btn-text,
                            .e-icons {
                                color: $schedule-appointment-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;
                }

                &:active {
                    @if $schedule-skin == 'material' {
                        background: $schedule-select-bg-color;
                    }
                }
            }

            .e-toolbar-items {
                background: $schedule-tbar-default-bg;

                &.e-tbar-pos {
                    height: $schedule-tbar-min-height;
                    min-height: $schedule-tbar-min-height;
                }

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

                            @if ($schedule-skin != 'bootstrap5' and $schedule-skin != 'FluentUI') {
                                padding-top: $schedule-tbar-down-arrow-padding-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-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
                        @if ($schedule-skin == 'tailwind' or $schedule-skin == 'fabric' or $schedule-skin == 'bootstrap-dark' or $schedule-skin == 'fabric-dark' or $schedule-skin == 'highcontrast') {
                            padding: 0 12px;
                        }
                    }
                }
            }

            &.e-rtl .e-hor-nav {
                background: $schedule-tbar-default-bg;
                border-left: 0;
                border-right: $border-size $schedule-tbar-border-nav-type $schedule-tbar-border-nav;

                &:not(.e-nav-active):hover {
                    background-color: $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-tbar-pos > div {
                        height: inherit;
                    }
                }

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

                    @if ($schedule-skin != 'bootstrap4') {
                        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 .3s 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;

            @if ($schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
                color: $schedule-primary-content-font-color;
            }

            .e-resource-tree {
                height: 100%;
                overflow-y: auto;
            }

            .e-resource-tree.e-treeview .e-text-content {
                @if ($schedule-skin != 'FluentUI') {
                    padding: 0 0 0 12px;
                }
            }
        }

        .e-resource-tree-popup-overlay {
            &.e-enable {
                background-color: $schedule-popup-overlay-bg-color;
                height: 100%;
                left: 0;
                opacity: .5;
                position: absolute;
                top: 0;
                width: 100%;
            }
        }

        .e-new-event {
            background-color: $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; // sass-lint:disable-line no-vendor-prefixes
            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;

            @if ($schedule-skin != 'bootstrap4') {
                border-radius: $schedule-appointment-border-radius;
            }

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

            &.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%;
                width: 10px;
            }

            &.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 {
                height: 10px;
                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; // sass-lint:disable-line 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;

                    @if ($schedule-skin == 'bootstrap4') {
                        line-height: 17px;
                        padding-bottom: 4px;
                    }

                    @if ($schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
                        line-height: 18px;
                        padding-bottom: 4px;
                    }
                }

                .e-header-date {
                    cursor: pointer;
                    display: table;
                    font-size: $schedule-header-date-nrml-font-size;

                    @if ($schedule-skin == 'bootstrap4') {
                        line-height: 21px;
                    }

                    @if ($schedule-skin == 'FluentUI') {
                        padding-top: $schedule-header-cells-padding;
                    }

                    @if ($schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
                        line-height: 24px;
                    }

                    &: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%;

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

            .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-color: $schedule-disable-dates-color;

                    &:hover {
                        background-color: $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;

                    @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
                        line-height: $schedule-appointment-text-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: 70px;
            }

            .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: 400;
                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-color: $schedule-disable-dates-color;

                    .e-date-header {
                        cursor: default;
                        opacity: .35;

                        &:hover {
                            text-decoration: none;
                        }
                    }

                    &:hover {
                        background-color: $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 {
                @if ($schedule-skin == 'bootstrap4') {
                    .e-date-header {
                        margin: 8px 8px 0 0;
                    }
                }

                .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-color: $schedule-appointment-bg-color;
                        border-radius: 50%;
                        height: 5px;
                        margin: -6px auto 0;
                        position: relative;
                        width: 5px;
                    }
                }

                .e-work-cells {
                    &.e-disable-dates {
                        background-color: $schedule-disable-dates-color;
                        cursor: default;

                        .e-day {
                            cursor: default;
                        }

                        &:hover {
                            background-color: $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-color: $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-color: $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-color: $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-color: $schedule-workhour-bg-color;
                    }

                    &:focus {
                        background-color: $schedule-hover-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-work-cells {
                background-color: $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-color: $schedule-workhour-bg-color;
                }

                &.e-other-month {
                    color: $schedule-secondary-content-font-color;
                }

                &.e-current-day .e-date-header {
                    background-color: $schedule-current-date-bg-color;
                    border-radius: 50%;
                    color: $schedule-current-day-active-color;
                    margin: 2px;
                    width: 20px;
                }

                &.e-selected-cell {
                    background-color: $schedule-select-bg-color;
                    color: $schedule-select-font-color;

                    .e-date-header {
                        @if ($schedule-skin == 'highcontrast') {
                            color: $schedule-select-font-color;
                        }
                    }

                    .e-more-indicator {
                        color: $schedule-select-font-color;
                    }

                    &:hover {
                        background-color: $schedule-select-bg-color;
                    }
                }

                &.e-disable-dates {
                    background-color: $schedule-disable-dates-color;

                    .e-date-header {
                        cursor: default;
                        opacity: .35;

                        &:hover {
                            text-decoration: none;
                        }
                    }

                    &:hover {
                        background-color: $schedule-disable-dates-color;
                    }
                }
            }

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

                @if ($schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
                    color: $schedule-header-font-color;
                }

                &.e-current-day {
                    color: $schedule-active-font-color;
                }
            }

            .e-left-indent,
            .e-header-cells {
                cursor: default;
                font-weight: 400;
                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-virtual-mask .e-work-cells {
                background-color: $schedule-disable-dates-color;
                box-shadow: inset 0 0 0 8px $schedule-work-cells-bg-color;

                &:hover {
                    background-color: $schedule-disable-dates-color;
                }
            }

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

                    &.e-hidden {
                        display: none;
                    }

                    &:focus {
                        text-decoration: underline;
                    }
                }
            }
        }

        #{if(&, '&', '*')}.e-device {
            .e-year-view {
                .e-month-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 {
                overflow: inherit;

                @if ($schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
                    background-color: $schedule-tbar-default-bg;
                }
            }

            .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-color: $schedule-disable-dates-color;

                    &:hover {
                        background-color: $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-color: $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-color: $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-color: $schedule-hover-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-color: $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-color: $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-content-table {
                position: absolute;
                transform: translateY(0);

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

            .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: 400;
                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-color: $schedule-disable-dates-color;

                    &:hover {
                        background-color: $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-color: $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-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-color: $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;

                @if ($schedule-skin == 'bootstrap4') {
                    margin-bottom: 6px;
                }

                @if ($schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
                    margin-bottom: 4px;
                }
            }

            .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 {
                    @if ($schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
                        font-size: 22px;
                    }
                }

                .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: 25px;
                        margin: $schedule-tbar-btn-bgr-mrgn;
                        min-height: $schedule-tbar-btn-bgr-minheight;
                        min-width: $schedule-tbar-btn-bgr-minwidth;

                        @if ($schedule-skin != 'bootstrap' and $schedule-skin != 'bootstrap4' and $schedule-skin != 'bootstrap-dark') {
                            padding: $schedule-tbar-btn-bgr-padding;
                        }

                        &.e-tbtn-txt {
                            .e-icons.e-icon-right {
                                @if ($schedule-skin != 'FluentUI') {
                                    padding: $schedule-tbar-btn-icn-right-bgr-padding;
                                }

                                @if ($schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
                                    font-size: 22px;
                                }
                            }
                        }

                        .e-btn-icon {
                            height: 25px;

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

                            @if ($schedule-skin == 'bootstrap5') {
                                padding-top: 3px;
                            }
                        }
                    }

                    @if ($schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
                        .e-tbar-btn .e-tbar-btn-text {
                            font-size: $schedule-header-bgr-font-size;
                        }
                    }
                }
            }
        }

        .e-more-popup-wrapper {
            .e-header-day {
                font-size: $schedule-header-day-bgr-font-size;
            }
        }

        .e-vertical-view {
            .e-header-cells {
                @if ($schedule-skin == 'FluentUI' or $schedule-skin == 'bootstrap5') {
                    height: $schedule-timezone-enable-bgr-height;
                    padding: $schedule-tbar-btn-bgr-padding;
                }

                .e-header-day {
                    font-size: $schedule-header-day-bgr-font-size;
                }

                .e-header-date {
                    font-size: $schedule-header-date-bgr-font-size;

                    @if ($schedule-skin == 'FluentUI') {
                        padding-top: $schedule-more-popup-close-margin-top;
                    }
                }
            }

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

        @if ($schedule-skin == 'bootstrap4') {
            &.e-rtl {
                .e-month-view,
                .e-month-agenda-view {
                    .e-date-header {
                        margin: 8px 8px 0 0;
                    }
                }
            }
        }

        .e-month-view {
            .e-date-header {
                @if ($schedule-skin == 'bootstrap4') {
                    line-height: 24px;
                    margin: 8px 0 0 8px;
                }
            }

            .e-header-cells {
                @if ($schedule-skin == 'bootstrap4') {
                    line-height: 24px;
                    padding: 10px 8px;
                }

                height: $schedule-month-header-cells-bgr-height;
            }

            .e-resource-cells,
            .e-date-header-wrap {
                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-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 {
            @if ($schedule-skin == 'highcontrast' or $schedule-skin == 'fabric') {
                padding: 2%;
            }
        }

        @media screen and (max-width: 767px) {
            width: 289px;

            .e-footer-content {
                @if ($schedule-skin == 'highcontrast' or $schedule-skin == 'fabric') {
                    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;

            @if ($schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
                background-color: $schedule-content-bg-color;
            }
        }

        .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-continer-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-continer-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-footer-content {
                @if ($schedule-skin == 'material') {
                    padding-top: 8px;
                }

                @if ($schedule-skin == 'highcontrast' or $schedule-skin == 'fabric') {
                    padding-right: 26px;
                }
            }

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

            @if ($schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
                color: $schedule-tbar-default-icon-color;
            }
        }

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

        .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-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-color: $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%;

        @if ($schedule-skin != 'material') {
            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;

                @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
                    padding: 2px 8px 0 0;
                }

                .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-bottom: 4px;

                        @if ($schedule-skin == 'material') {
                            margin-bottom: 8px;
                        }

                        @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
                            margin-top: 14px;
                        }
                    }

                    .e-subject {
                        font-size: 22px;

                        @if ($schedule-skin != 'material') {
                            height: 40px;
                        }

                        @if ($schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
                            height: 30px;
                            line-height: 22px;
                            padding: 2px 10px;
                        }
                    }
                }
            }
        }

        .e-event-popup {
            .e-popup-header {
                @if ($schedule-skin == 'material') {
                    background-color: $schedule-appointment-bg-color;
                }

                .e-header-icon-wrapper {
                    padding: $schedule-event-popup-header-icon-padding;

                    .e-edit,
                    .e-delete {
                        display: none;

                        @if ($schedule-skin == 'material') {
                            display: block;
                        }
                    }

                    .e-close {
                        @if ($schedule-skin != 'material') {
                            position: relative;
                            right: 2px;
                        }
                    }

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

                    .e-subject {
                        cursor: default;
                        font-size: 20px;
                        font-weight: 500;
                        line-height: 1.5;
                        max-height: 87px;

                        @if ($schedule-skin == 'material' or $schedule-skin == 'highcontrast') {
                            color: $schedule-appointment-font-color;
                        }

                        @if ($schedule-skin != 'material') {
                            background-color: $schedule-popup-title-color;
                            border-left: 6px solid $schedule-appointment-bg-color;
                            padding: 8px 0 8px 10px;
                        }

                        @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
                            border-radius: 4px;
                            padding: 8px;
                        }
                    }
                }
            }

            .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-color: 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: 18px;

                @if ($schedule-skin == 'FluentUI' or $schedule-skin == 'tailwind') {
                    padding-right: 12px;
                }

                @else {
                    padding-right: 13px;
                }

                @if ($schedule-skin == 'highcontrast' or $schedule-skin == 'fabric') {
                    padding-top: 4px;
                }

                @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'bootstrap5') {
                    font-size: 16px;
                    padding: 2px 10px 0 0;
                }

                @if ($schedule-skin == 'tailwind') {
                    font-size: 18px;
                    padding: 2px 12px 0 0;
                }
            }

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

            @if ($schedule-skin == 'material') {
                padding-right: 4px;
            }

            .e-event-edit {
                margin-right: 8px;
            }

            .e-event-edit,
            .e-event-delete {
                right: auto;

                @if ($schedule-skin == 'highcontrast') {
                    margin-right: 10px;
                }

                @if ($schedule-skin == 'fabric' or $schedule-skin == 'bootstrap') {
                    margin-right: 8px;
                }

                &:disabled {
                    color: $schedule-disable-font-color;
                }
            }

            .e-event-details {
                border: $schedule-popup-btn-border;
                margin-right: 8px;
                right: auto;
                text-transform: capitalize;

                @if ($schedule-skin == 'material' or $schedule-skin == 'material-dark') {
                    text-transform: uppercase;
                }
            }
        }

        .e-event-popup .e-popup-footer {
            @if ($schedule-skin == 'material') {
                display: none;
            }
        }

        &.e-rtl {
            text-align: right;

            .e-cell-popup {
                .e-header-icon-wrapper {
                    left: 6px;
                    right: auto;
                }

                .e-popup-footer {
                    padding: 8px 18px 8px 8px;
                    text-align: left;
                }
            }

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

            @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
                .e-popup-footer {
                    padding: 8px 8px 8px 18px;
                }

                .e-date-time-icon {
                    padding: 0 0 0 13px;
                }

                .e-event-popup {
                    .e-date-time-icon {
                        padding: 0 13px;
                    }
                }

                .e-event-edit {
                    margin-left: 8px;
                }
            }
        }

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

            @if ($schedule-skin == 'highcontrast') {
                background-color: $schedule-tbar-default-bg;
            }

            .e-event-popup .e-popup-header {
                .e-header-icon-wrapper {
                    @if ($schedule-skin != 'material') {
                        background-color: $schedule-content-bg-color;
                    }
                }

                .e-header-icon-wrapper .e-edit,
                .e-header-icon-wrapper .e-delete,
                .e-header-icon-wrapper .e-close {
                    &:focus,
                    &:hover {
                        background: none;
                    }

                    @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
                        opacity: 1;
                    }
                }

                .e-edit.e-btn.e-small.e-round,
                .e-delete.e-btn.e-small.e-round,
                .e-close.e-btn.e-small.e-round {
                    @if ($schedule-skin != 'material') {
                        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: 12px 24px;

                    @if ($schedule-skin == 'material') {
                        padding: 24px;
                    }
                }
            }

            .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-color: transparent;
                    border: 0;
                    height: 40px;
                    width: 40px;

                    &:focus,
                    &:hover {
                        background: none;
                    }

                    @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
                        background-color: $schedule-header-bg-color;
                        color: $schedule-popup-header-icon-color;
                    }
                }

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

        @if ($schedule-skin == 'bootstrap4') {
            .e-cell-popup .e-popup-content {
                padding: 30px 16px;
            }

            .e-popup-footer {
                padding: 0 16px 16px 0;
            }

            .e-cell-popup .e-date-time-icon,
            .e-event-popup .e-date-time-icon {

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

                @else {
                    padding-right: 10px;
                }
            }

            .e-cell-popup .e-popup-header .e-header-icon-wrapper .e-close .e-close-icon {
                font-size: 16px;

                @if ($schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
                    font-size: 22px;
                }
            }

            &.e-rtl {
                .e-cell-popup .e-date-time-icon {
                    padding-right: 0;
                }

                .e-event-popup .e-date-time-icon {
                    padding-right: 13px;
                }
            }
        }

        @if ($schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
            .e-cell-popup .e-popup-content {
                padding: 48px 24px 16px;
            }

            .e-cell-popup .e-date-time-icon,
            .e-event-popup .e-date-time-icon {
                padding-right: 16px;
            }

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

        .e-edit.e-btn.e-small.e-round,
        .e-delete.e-btn.e-small.e-round,
        .e-close.e-btn.e-small.e-round {
            @if ($schedule-skin != 'material') {
                height: 2em;
                width: 2em;
            }
        }

        @if ($schedule-skin == 'FluentUI') {
            .e-event-popup .e-popup-header .e-subject-wrap {
                padding: $schedule-big-event-popup-subject-padding;
            }
        }

        .e-event-popup .e-popup-header .e-header-icon-wrapper {
            .e-close-icon,
            .e-edit-icon,
            .e-delete-icon {
                font-size: 14px;

                @if ($schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
                    font-size: 22px;
                }
            }
        }

        &.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: 0 5px 0 8px;

                    @if ($schedule-skin == 'material') {
                        padding: 5px 5px 0 8px;
                    }
                }
            }
        }
    }

    @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
        .e-bigger .e-more-popup-wrapper {
            padding: 12px 2px 16px;
        }
    }

    .e-bigger .e-agenda-view {
        @if ($schedule-skin == 'FluentUI' or $schedule-skin == 'tailwind') {
            .e-appointment {
                padding: $schedule-agenda-big-appointment-padding;
            }
        }

        @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
            .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 {

        @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
            .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-color: $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-left: 10px;
        padding-right: 10px;

        @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
            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-color: transparent;
        border: 0;
        box-shadow: none;
        color: $schedule-popup-icon-color;
        cursor: pointer;
        height: 25px;
        position: absolute;
        right: 6px;
        width: 25px;

        @if ($schedule-skin == 'tailwind') {
            padding: 1px;
        }

        .e-close-icon {
            font-size: 9px;

            @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
                font-size: 14px;
            }
        }

        .e-btn-icon {
            margin-top: $schedule-more-popup-close-margin-top;
        }

        &:focus,
        &:hover {
            background-color: $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-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 {
        @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
            .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-color: $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 ($schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5' or $schedule-skin == 'FluentUI') {
                background-color: $schedule-calendar-background;
                box-shadow: $schedule-popup-box-shadow-1;
            }
        }

        .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-color: $schedule-header-bg-color;

                    &:hover {
                        background: $schedule-hover-bg-color;
                    }
                }
            }

            .e-left-indent-wrap table tbody td {
                background-color: $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-color: $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;

                @if ($schedule-skin != 'FluentUI') {
                    text-align: left;
                }

                &.e-header-cells {
                    border-bottom-width: 0;
                }
            }

            .e-time-cells-wrap table td {
                background-color: $schedule-header-bg-color;
                border-color: $schedule-content-border-color;
                border-style: $border-type;
                border-width: 0 1px 1px 0;
                color: $schedule-secondary-content-font-color;

                @if ($schedule-skin == 'bootstrap4') {
                    color: $schedule-primary-content-font-color;
                }

                @if ($schedule-skin == 'tailwind') {
                    background-color: $schedule-tbar-default-bg;
                }

                @if ($schedule-skin == 'bootstrap5') {
                    background-color: $schedule-vertical-time-slot-color;
                }
            }

            .e-time-cells-wrap table td {
                border-bottom-color: transparent;
            }

            .e-time-cells-wrap .e-time-cells {
                @if ($schedule-skin != 'tailwind' and $schedule-skin != 'bootstrap5') {
                    border-bottom-color: $schedule-content-border-color;
                }
            }

            .e-header-cells {
                background-color: $schedule-header-bg-color;

                &.e-current-day {
                    color: $schedule-active-font-color;

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

            .e-work-cells {
                background-color: $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-color: $schedule-workhour-bg-color;
            }

            .e-all-day-cells {
                background-color: $schedule-header-bg-color;

                &.e-current-day {
                    color: $schedule-active-font-color;
                }

                &.e-selected-cell {
                    background-color: $schedule-select-bg-color;
                    color: $schedule-hover-font-color;

                    &:hover {
                        background-color: $schedule-select-bg-color;

                        @if ($schedule-skin == 'bootstrap5') {
                            color: $schedule-active-color;
                        }
                    }
                }
            }

            .e-selected-cell {
                background-color: $schedule-select-bg-color;
                color: $schedule-hover-font-color;

                &:hover {
                    background-color: $schedule-select-bg-color;

                    @if ($schedule-skin == 'bootstrap5') {
                        color: $schedule-active-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 dotted $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-color: $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;

                @if ($schedule-skin != 'FluentUI') {
                    text-align: left;
                }

                @if ($schedule-skin == 'tailwind') {
                    font-size: 12px;
                    text-align: center;
                    text-transform: uppercase;
                }

                &.e-current-day {
                    color: $schedule-active-font-color;

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

            .e-work-cells {
                background-color: $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-hover-font-color;

                    @if ($schedule-skin == 'bootstrap5') {
                        color: $schedule-select-font-color;
                    }
                }
            }

            .e-work-days {
                background-color: $schedule-workhour-bg-color;
            }

            .e-other-month {
                color: $schedule-secondary-content-font-color;
            }

            .e-current-date .e-date-header {
                background-color: $schedule-current-date-bg-color;
                border-radius: 50%;
                color: $schedule-active-color;
                width: 20px;

                @if ($schedule-skin == 'highcontrast') {
                    color: $schedule-active-font-color;
                }
            }

            .e-selected-cell {
                background-color: $schedule-select-bg-color;
                color: $schedule-select-font-color;

                .e-date-header {
                    @if ($schedule-skin == 'highcontrast') {
                        color: $schedule-select-font-color;
                    }
                }

                .e-more-indicator {
                    color: $schedule-select-font-color;
                }

                &:hover {
                    background-color: $schedule-select-bg-color;
                }
            }
        }

        .e-month-agenda-view {
            .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 {
                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-color: $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;

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

            .e-work-cells {
                background-color: $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-color: $schedule-disable-dates-color;
            }

            .e-work-days {
                background-color: $schedule-workhour-bg-color;
            }

            .e-resource-group-cells {
                background-color: $schedule-work-cells-bg-color;
            }

            .e-selected-cell {
                background-color: $schedule-select-bg-color;
                color: $schedule-select-font-color;

                &:hover:not(.e-resource-group-cells) {
                    background-color: $schedule-select-bg-color;
                }
            }
        }

        .e-timeline-view {
            .e-work-hours {
                background-color: $schedule-workhour-bg-color;
            }

            .e-resource-group-cells {
                background-color: $schedule-work-cells-bg-color;
            }

            .e-selected-cell {
                background-color: $schedule-select-bg-color;
                color: $schedule-hover-font-color;

                &:hover {
                    background-color: $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;
            }
        }

        #{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,
                .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 {
                    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-color: $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: 3px 6px;
        }

        @if ($schedule-skin == 'bootstrap4') {
            .e-tip-content {
                padding: 4px 8px 0;
            }

            .e-arrow-tip {
                overflow: visible;
            }
        }

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