@syncfusion/ej2-fabric-dark-theme 33.2.13 → 34.1.29

package/styles/document-editor/_theme.scss

@@ -0,0 +1,2921 @@
+@use 'variables' as *;
+@include export-module('documenteditor-theme') {
+    /* stylelint-disable */
+    .e-de-background {
+        background-color: $de-background;
+    }
+    .e-de-column-label {
+        font-size: $de-border-dlg-settinglabels-fontsize;
+        font-weight: $de-border-dlg-border-label-fontweight;
+        padding-left: $de-border-dlg-border-label-padding-left;
+        padding-right: $de-border-dlg-border-label-padding-right;
+    }
+
+    .e-de-para-tab {
+        float: left;
+    }
+    .e-de-para-tab.e-rtl {
+        float: right;
+    }
+    
+    .e-de-column-label.e-de-rtl {
+        font-size: $de-border-dlg-settinglabels-fontsize;
+        font-weight: $de-border-dlg-border-label-fontweight;
+        padding-left: $de-border-dlg-border-column-label-padding-left;
+        padding-right: $de-border-dlg-border-column-label-padding-right;
+    }
+
+    .e-de-font-dlg-display {
+        display: inline-flex;
+    }
+   
+    
+    .e-de-ff-sub-header {
+        display: block;
+        font-size: $de-ff-sub-header-font-size;
+        font-weight: $de-header-font-weight;
+        margin-top: $de-ff-sub-header-margin-top;
+    }
+
+    .e-de-check-exactnumbr-width {
+        width: $de-check-exactnumbr-width !important;
+    }
+
+    .e-de-ff-dlg-heading {
+        display: block;
+        font-weight: $de-para-dlg-heading-font-weight;
+        margin-bottom: $de-ff-dlg-heading-mrgn-btm;
+        @if $skin-name=='Material3' {
+            font-size: 14px;
+        }
+        @if $skin-name=='tailwind' {
+            color: $de-dlg-heading-main-header;
+        }
+    }
+    .e-de-ff-dlg-heading-small {
+        display: block;
+        font-weight: $de-para-dlg-heading-font-weight;
+        margin-bottom: $de-ff-dlg-hdg-small-mrgn-btm;
+    }
+    .e-de-ff-dlg-drpdwn-heading {
+        display: block;
+        font-size: $de-para-dlg-heading-font-size;
+        font-weight: $de-para-dlg-heading-font-weight;
+        margin-bottom: $de-ff-dlg-drpdwn-heading-margin-bottom;
+        @if $skin-name=='tailwind' {
+            color: $de-dlg-heading-main-header;
+        }
+    }
+    .e-de-ff-dlg-check {
+        display: block;
+        font-size: $de-para-dlg-heading-font-size;
+        font-weight: $de-para-dlg-heading-font-weight;
+        margin-bottom: $de-ff-dlg-check-margin-bottom;
+    }
+    .e-de-div-seperate-dlg {
+        display: inline-flex;
+        margin-bottom: $de-ff-seperate-div-mrgn-btm;
+        width: 100%;
+    }
+    .e-de-ff-radio-div {
+        display: inline-flex;
+        margin-right: $de-ff-radio-div-margin-right;
+    }
+    .e-de-ff-radio-div.e-de-rtl {
+        margin-left: $de-ff-radio-margin-left;
+        margin-right: $de-ff-radio-margin-right;
+    }
+    .e-de-ff-radio-scnd-div {
+        display: inline-flex;
+        margin-bottom: $de-ff-radio-scnd-div-mrgn-btm;
+        margin-right: $de-ff-radio-scnd-div-margin-right;
+    }
+    .e-de-ff-radio-scnd-div.e-de-rtl {
+        margin-left: $de-ff-radio-scnd-div-margin-left;
+        margin-right: $de-ff-radio-scnd-margin-right;
+    }
+    .e-de-ff-dlg-lft-hlf {
+        margin-right: $de-ff-dlg-lft-hlf-mrgn-rgt;
+        width: $de-ff-dlg-lft-hlf-wdth;
+    }
+    .e-de-ff-dlg-lft-hlf.e-de-rtl {
+        margin-left: $de-ff-dlg-lft-hlf-mrgn-rgt;
+        margin-right: $de-ff-dlg-lft-hlf-margin-right-rtl;
+    }
+    .e-de-ff-chck-exact {
+        margin-left: $de-ff-chck-exact-margin-left;
+        margin-top: $de-ff-chck-exact-margin-top;
+    }
+    .e-de-ff-chck-exact.e-de-rtl {
+        margin-left: $de-ff-chck-margin-left-rtl;
+        margin-right: $de-ff-chck-margin-right-rtl;
+    }
+    .e-de-ff-dlg-rght-hlf {
+        width: 47.5%;
+    }
+    .e-de-ff-drpdwn-dlg-scndiv {
+        display: inline-flex;
+        height: $e-de-ff-drpdwn-dlg-scndiv-height;
+        margin-bottom: $de-ff-drpdwn-dlg-scndiv-mrgn-botton;
+        width: 100%;
+    }
+    .e-de-cmt-avatar {
+        align-items: center;
+        display: flex;
+        width: $de-avatar-width;
+    }
+    .e-de-ff-cmt-avatar {
+        align-items: center;
+        border-radius: $de-ff-cmt-avatar-border-radius;
+        color: $de-avatar-clr;
+        display: flex;
+        font-size: $de-ff-cmt-avatar-font-size;
+        height: $de-cmt-avatar-height;
+        justify-content: center;
+        letter-spacing: $de-ff-cmt-avatar-letter-spacing;
+        line-height: $de-ff-cmt-avatar-line-height;
+        opacity: 100%;
+        user-select: none;
+        width: $de-cmt-avatar-width;
+        z-index: 1;
+    }
+    .e-de-ff-drpdwn-listview {
+        margin-right: $de-ff-drpdwn-listview-margin-right;
+        width: 100%;
+    }
+    .e-de-ff-drpdwn-listview.e-de-rtl {
+        margin-left: $de-ff-drpdwn-listview-margin-left-rtl;
+        margin-right: $de-ff-drpdwn-margin-right-rtl;
+    }
+    .e-de-ff-drpdwn-mvup {
+        margin-right: $de-ff-drpdwn-mvup-margin-right;
+    }
+    .e-de-ff-drpdwn-mvup.e-de-rtl {
+        margin-left: $de-ff-drpdwn-mvup-margin-left-rtl;
+        margin-right: $de-ff-dropdown-margin-right-rtl;
+    }
+    .e-de-drp-dwn-frst-div {
+        margin-bottom: $de-drp-dwn-frst-div-mrgn-btm;
+        width: 47.5%;
+    }
+    .e-de-result-list-block .e-de-search-result-hglt {
+        background: $search-result-highlight-bg-color;
+        border-bottom: $de-result-list-block-border-bottom solid $search-result-hightlight-bdr-clr-hvr;
+        cursor: default;
+        padding: $search-result-item-padding-top $search-result-item-padding-right $search-result-item-padding-bottom $search-result-item-padding-left;
+    }
+    .e-de-result-list-block .e-de-op-search-txt .e-de-op-search-word-text {
+        color: $search-result-hightlight-bdr-clr;
+    }
+    .e-de-search-result-item {
+        cursor: default;
+        padding: $search-result-item-padding-top $search-result-item-padding-right $search-result-item-padding-bottom $search-result-item-padding-left;
+        word-break: break-word;
+    }
+    .e-de-search-result-item:hover {
+        border-bottom: $de-search-result-item-border-bottom solid $search-result-hightlight-bdr-clr-hvr;
+        cursor: default;
+    }
+    .e-de-search-result-item:focus {
+        border-bottom: $de-result-list-block-border-bottom solid $search-result-hightlight-bdr-clr-hvr;
+        cursor: default;
+        padding: $search-result-item-padding-top $search-result-item-padding-right $search-result-item-padding-bottom $search-result-item-padding-left;
+    }
+    @if $skin-name !='tailwind' {
+        .e-de-search-tab-content .e-input-group .e-de-op-search-icon:focus {
+            border: $e-de-search-tab-content-border solid $search-icon-bdr-clr;
+        }
+        .e-de-op-search-icon:hover {
+            background: $search-icon-hvr;
+            @if $skin-name=='bootstrap5' or $skin-name=='bootstrap5.3' {
+                color: var(--color-sf-secondary-text-color-pressed) !important;
+            }
+        }
+        .e-de-search-tab-content .e-input-group .e-de-op-search-close-icon:focus {
+            border: $e-de-search-tab-content-border solid $search-icon-bdr-clr;
+            border-right-width: 0;
+        }
+        .e-de-op-search-close-icon:hover {
+            background: $search-icon-hvr;
+        }
+        .e-spin-down:focus {
+            border: $e-de-search-tab-content-border solid $spin-down-bdr-clr;
+            border-right-width: 0;
+        }
+        .e-spin-down:hover {
+            background: $spin-down-hvr;
+        }
+        .e-spin-up:focus {
+            border: $e-de-search-tab-content-border solid $spin-up-bdr-clr;
+            border-right-width: 0;
+        }
+        .e-spin-up:hover {
+            background: $spin-up-hvr;
+        }
+        .e-de-search-tab-content {
+            .e-de-op-input-group {
+                .e-spin-up:hover,
+                .e-spin-down:hover {
+                    @if $skin-name=='bootstrap5.3' {
+                        background: var(--color-sf-secondary-bg-color-pressed) !important;
+                        color: var(--color-sf-secondary-text-color-pressed) !important;
+                    }
+                }
+            }
+        }
+    }
+    .e-de-toc-dlg-heading {
+        display: block;
+        color: $de-dlg-heading-main-header;
+        font-size: $de-toc-dlg-heading-font-size;
+        font-weight: $de-toc-dlg-heading-font-weight;
+        margin-bottom: $de-toc-title-bottom-margin; 
+    }
+    .e-de-toc-dlg-main-heading {
+        color: $de-dlg-heading-main-header;
+        display: block;
+        font-size: $de-toc-dlg-heading-font-size;
+        font-weight: $de-toc-dlg-main-heading-font-weight;
+        margin-bottom: $de-title-bottom-margin;
+    }
+    .e-content-placeholder.e-documenteditor.e-placeholder-documenteditor {
+        background-size: 100%;
+    }
+    .e-de-toc-reset-button {
+        margin-top: $de-toc-reset-button-margin-top;
+    }
+    .e-de-toc-reset-button.e-de-rtl {
+        margin-right: $de-toc-reset-button-margin-right;
+    }
+    .e-de-toc-modify-button {
+        margin-left: $de-toc-modify-button-margin-left;
+        margin-top: $de-toc-modify-button-margin-top;
+    }
+    .e-de-toc-modify-button.e-de-rtl {
+        margin-left: $de-toc-button-margin-left-rtl;
+        margin-right: $de-toc-modify-button-margin-rtl;
+    }
+    .e-de-toc-dlg-container {
+        height: $de-toc-dlg-height;
+        width: $de-toc-dlg-width;
+    }
+    .e-de-toc-dlg-sub-container {
+        margin-bottom: $de-toc-sub-container-bottom;
+    }
+    .e-de-toc-list-view {
+        border: $de-toc-list-border solid $de-toc-list-view-border-color;
+        border-radius: $de-toc-styles-table-div-border-radius;
+        font-size: $de-toc-list-view-font-size;
+        height: $de-toc-list-view-height;
+        overflow-y: scroll;
+    }
+    .e-de-toc-list-view.e-de-rtl {
+        margin-left: $de-toc-list-view-margin-left-rtl;
+    }
+    .e-de-toc-dlg-sub-heading {
+        color: $de-dlg-heading-main-header;
+        display: block;
+        font-size: $de-toc-dlg-heading-font-size;
+        font-weight: $de-toc-dlg-heading-font-weight;
+        margin: $de-toc-dlg-sub-margin;
+    }
+    .e-de-toc-dlg-style-label {
+        margin-left: $de-toc-dlg-style-label-left;
+        margin-top: $de-toc-dlg-style-label-top;
+    }
+    .e-de-toc-dlg-style-label .e-de-rtl {
+        margin-left: $de-toc-dlg-style-label-margin-left-rtl;
+        margin-right: $de-toc-dlg-style-label-left;
+    }
+    .e-de-pagesetup-dlg-container {
+        height: $de-page-setup-dlg-height;
+        width: $de-page-setup-dlg-width;
+    }
+    .e-de-page-setup-ppty-tab {
+        border: $de-page-setup-ppty-tab-border;
+    }
+    .e-de-page-setup-dlg-sub-container {
+        margin-bottom: $de-page-setup-sub-container-bottom;
+    }
+    .e-de-page-setup-dlg-left-sub-container {
+        float: left;
+        position: relative;
+        top: $de-page-setup-dlg-left-container-top;
+    }
+    .e-de-page-setup-dlg-left-sub-container.e-de-rtl {
+        float: right;
+    }
+    .e-de-page-setup-dlg-right-sub-container {
+        float: right;
+        position: relative;
+        top: $de-page-setup-dlg-right-container-top;
+    }
+    .e-de-page-setup-dlg-right-sub-container.e-de-rtl {
+        float: left;
+    }
+    .e-de-page-setup-dlg-sub-header {
+        display: block;
+        font-size: $de-page-setup-margin-dia-common-font;
+        font-weight: $de-header-font-weight;
+        margin-bottom: $de-page-setup-margin-dia-common-margin-bottom;
+        margin-top: $de-page-setup-margin-dia-common-margin-top;
+    }
+    .e-de-page-setup-dlg-sub-title-header {
+        display: block;
+        font-size: $de-page-setup-margin-dia-common-font;
+        font-weight: $de-header-font-weight;
+        margin-bottom: $de-page-setup-margin-dia-common-margin-bottom;
+        margin-top: $de-page-setup-common-margin-top;
+    }
+    .e-de-page-setup-dlg-sub-container-port {
+        height: $de-page-setup-sub-container-height-style;
+        margin-bottom: $de-page-setup-sub-container-port-bottom;
+    }
+    .e-de-page-setup-dlg-sub-label {
+        font-size: $de-page-setup-dlg-sub-label-font-size;
+        font-weight: $de-page-setup-dlg-sub-label-font-weight;
+        @if $skin-name=='tailwind' {
+            color: $de-dlg-heading-main-header;
+        }
+    }
+    .e-de-page-setup-dlg-orientation-prop {
+        margin-top: $de-page-setup-dlg-orientation-prop-margin-top;
+    }
+    .e-de-page-setup-dlg-sub-size-container {
+        height: $de-page-setup-sub-size-container-height;
+        margin-bottom: $de-page-setup-sub-size-container-bottom;
+    }
+    .e-de-page-setup-dlg-layout-sub-container {
+        height: $de-page-setup-layout-sub-container-height;
+        margin-bottom: $de-page-setup-layout-sub-container-bottom;
+        position: relative;
+        top: $de-page-setup-layout-sub-container-top;
+    }
+    .e-de-page-setup-dlg-first-page-prop {
+        margin-bottom: $de-page-setup-dlg-first-page-margin-bottom;
+    }
+    @if $skin-name !='tailwind' and $skin-name !='FluentUI'  {
+        .e-de-page-setup-dlg-first-page-prop .e-label,
+        .e-de-page-setup-dlg-odd-or-even-prop .e-label {
+            font-size: $de-page-setup-checkbox-label-font-size;
+        }
+        .e-de-page-setup-dlg-first-page-prop .e-frame,
+        .e-de-page-setup-dlg-odd-or-even-prop .e-frame {
+            height: $de-checkbox-height;
+            line-height: $de-checkbox-line-height;
+            width: $de-checkbox-width;
+        }
+    }
+
+    .e-de-page-setup-dlg-left-layout-container {
+        float: left;
+        position: relative;
+        top: $de-page-setup-dlg-layout-container-top;
+    }
+    .e-de-page-setup-dlg-left-layout-container.e-de-rtl {
+        float: right;
+    }
+    .e-de-page-setup-dlg-right-layout-container {
+        float: right;
+        position: relative;
+        top: $de-page-setup-dlg-layout-container-top;
+    }
+    .e-de-page-setup-dlg-right-layout-container.e-de-rtl {
+        float: left;
+    }
+    .e-de-dlg-footer .e-btn {
+        margin-left: $de-dlg-footer-margin-left;
+    }
+    .e-de-hyperlink-dlg-title {
+        font-size: 12px;
+        font-weight: $de-header-font-weight;
+        margin-bottom: $de-hyperlink-dlg-margin-bottom;
+        margin-top: $de-hyperlink-dlg-margin-top;
+    }
+    .e-de-hyperlink .e-de-hyperlink-dlg-input {
+        height: $de-hyperlink-dlg-input-height;
+        margin-bottom: $de-hyperlink-dlg-input-bottom;
+        width: $de-hyperlink-dlg-input-width;
+    }
+    .e-de-font-dlg-header {
+        display: flex;
+        font-size: $de-font-dlg-header-font-size;
+        font-weight: $de-header-font-weight;
+        margin-bottom: $de-font-dlg-header-margin-bottom;
+        @if $skin-name=='tailwind' {
+            line-height: 18px;
+        }
+    }
+    .e-de-font-dlg-header-effects,
+    .e-de-font-dlg-header-font-color {
+        display: flex;
+        font-size: $de-font-dlg-font-size;
+        font-weight: $de-header-font-weight;
+        margin-bottom: $de-fnt-dlg-header-effects-mrgn-btm;
+    }
+    .e-de-font-dlg-main-header {
+        color: $de-dlg-heading-main-header;
+        font-size: $de-dlg-main-header-font-size;
+        font-weight: $de-header-font-weight;
+        margin-right: $de-font-dlg-main-header-margin-right;
+    }
+    .e-de-font-dlg-cb-right {
+        margin-left: $e-de-font-dlg-cb-margin-right;
+    }
+    .e-de-font-dlg-cb-right.e-de-rtl {
+        margin-left: $e-de-font-dlg-cb-margin-left;
+        margin-right: $e-de-font-dlg-cb-margin-right;
+    }
+    .e-de-font-dlg-cb-right-div {
+        margin-left: $de-font-dlg-cb-margin-left;
+    }
+    .e-de-dropdown {
+        margin-right: $de-dropdown-margin-right;
+    }
+    .e-de-restrict-pane{
+        border-right: $de-op-border-right solid $de-op-border-clr;
+        padding-left: $de-op-padding-left;
+        padding-top: $de-op-padding-top;
+        padding-right: $de-op-padding-left;
+        position: relative;
+        width: 300px;
+    }
+    .e-de-op {
+        border-right: $de-op-border-right solid $de-op-border-clr;
+        padding-left: $de-op-padding-left;
+        padding-right: $de-op-padding-left;
+        position: relative;
+        width: 300px;
+    }
+    .e-de-op.e-de-rtl {
+        padding-left: $de-op-padding-lft;
+        padding-right: $de-op-padding-left;
+    }
+    .e-de-op-header {
+        @if $skin-name=='fluent2' {
+            color: $de-sub-header-color;
+            font-size: 14px;
+        }
+        @else {
+            color: $de-op-title-clr;
+            font-size: $e-de-op-header-font-size;
+        }  
+        font-family: $de-op-header-font-family;
+        font-weight: $de-op-header-font-weight;
+        margin-bottom: $de-op-header-bottm-margin;
+        padding-top: $de-op-header-padding-top;
+        @if $skin-name=='tailwind' {
+            line-height: 24px;
+        }
+    }
+    .e-de-op-header.e-de-rtl {
+        direction: rtl;
+        text-align: right;
+    }
+    .e-de-op-tab {
+        border: $de-op-tab-border;
+        height: auto;
+        @if $skin-name=='tailwind' {
+            background: transparent;
+        }
+    }
+    .e-de-op-icon {
+        color: $de-op-icon-color;
+        @if $skin-name !='tailwind' {
+            height: $e-de-op-icon-height;
+            width: 20px;
+        }
+    }
+    .e-de-op-close-icon {
+        @if $skin-name !='bootstrap' {
+            color: $dialog-btn-clr;
+        }
+    }
+    .e-de-op-nav-btn {
+        @if $skin-name !='tailwind' {
+            height: $de-op-close-icon-width;
+            width: $de-op-close-icon-width;
+        }
+    }
+    .e-de-op-search-txt {
+        border-bottom: $de-dlg-heading-main-border-bottom solid $search-result-hightlight-bdr-item;
+        color: $de-dlg-heading-main-header;
+        font-size: $de-dlg-heading-main-font-size;
+    }
+    .e-de-op-search-txt .e-de-op-search-word {
+        color: $de-op-search-txt;
+    }
+    .e-de-op-more-less {
+        display: inline-flex;
+        margin-top: $de-op-more-less-mrgn-top;
+    }
+
+    @if $skin-name == "FluentUI" {
+        .e-de-rp-more-less{
+            .e-label{
+                font-size: 14px !important;
+            }
+        }
+    }
+
+    .e-de-op-replacetabcontentdiv {
+        margin-top: $de-op-more-less-mrgn-top;
+    }
+    label[for*="_wholeWord_e-de-ltr"] {
+      @if $skin-name == "FluentUI" {
+        left: 15px;
+      }
+      @else {
+        left: 35px;
+      }
+    }
+    label[for*="_wholeWord_e-de-rtl"] {
+      @if $skin-name == "FluentUI" {
+        right: 15px;
+      }
+      @else {
+        right: 35px;
+      }
+    }
+    .e-de-cell-dia-label-common {
+        display: inline-block;
+        font-size: $de-cell-margin-dia-common-font;
+        font-weight: $de-header-font-weight;
+        margin-bottom: $de-cell-margin-dia-common-margin-bottom;
+        margin-top: $de-cell-margin-dia-common-margin-top;
+        width: $de-cell-margin-dia-common-width;
+    }
+    .e-de-cell-dia-options-label {
+        font-weight: $de-para-dlg-heading-font-weight;
+        @if $skin-name=='tailwind' {
+            color: $de-dlg-heading-main-header;
+        }
+    }
+    .e-de-table-border-heading {
+        @if $skin-name=='fluent2' {
+            font-size: $de-border-dlg-border-sub-heading-fontsize;
+        }
+        @else {
+            font-size: $de-border-dlg-border-label-fontsize;
+        }
+        font-weight: $de-border-dlg-border-label-font-weight;
+        padding-bottom: $de-border-dlg-border-label-paddingbottom;
+        @if $skin-name=='tailwind' {
+            color: $de-dlg-heading-main-header;
+        }
+    }
+    .e-de-table-setting-heading {
+        font-size: $de-border-dlg-setting-label-fontsize;
+        font-weight: $de-border-dlg-border-label-fontweight;
+        padding-bottom: $de-border-dlg-setting-label-paddingbottom;
+    }
+    .e-de-layout-setting-heading {
+        font-size: $de-border-dlg-setting-label-fontsize;
+        font-weight: $de-border-dlg-border-label-fontweight;
+        padding-bottom: $de-border-dlg-setting-label-paddingbottom;
+    }
+    .e-de-table-setting-labels-heading {
+        font-size: $de-border-dlg-settinglabels-fontsize;
+        font-weight: $de-border-dlg-border-label-fontweight;
+        margin-left: $de-table-alignment-label-margin-left;
+    }
+    .e-de-table-element-subheading {
+        font-size: $de-border-dlg-settinglabels-fontsize;
+        font-weight: $de-border-dlg-border-label-fontweight;
+        @if $skin-name=='tailwind' {
+            padding-bottom: 8px !important;
+        }
+    }
+    .e-de-border-dlg-preview-div {
+        border: $de-border-dlg-border-preview-div-width solid $de-border-dlg-border-preview-div-opacity;
+        width: 80px;
+        height: $e-de-border-dlg-preview-div-height;
+    }
+    .e-de-border-dlg-preview-inside-divs {
+        opacity: $de-border-dlg-preview-inside-divs-opacity;
+    }
+    .e-de-tablecell-dia-align-div {
+        border: $de-table-align-border-width solid $de-table-align-border-color;
+        display: inline-block;
+        height: $de-table-align-height;
+        margin-right: $de-table-align-margin-right;
+        width: $de-table-align-width;
+    }
+    .e-de-tablecell-dia-align-div.e-de-rtl {
+        margin-left: $de-table-align-margin-right;
+        margin-right: $de-table-align-margin-rgt-rtl;
+    }
+    .e-de-table-dia-align-label {
+        display: inline-block;
+        font-size: $de-table-alignment-label-font-size;
+        @if $skin-name !='Material3' {
+            font-weight: $de-header-font-weight;
+        }
+        margin-left: $de-table-alignment-label-margin-left;
+        margin-top: $de-table-alignment-label-margin-top;
+    }
+    .e-de-table-dialog-separator-line {
+        background-color: $de-table-separator-line-color;
+        bottom: $de-table-separtor-line-top;
+        display: none;
+        height: $de-table-separator-line-height;
+        left: $de-table-separator-line-left;
+        margin-top: $de-table-dlg-separator-line-top;
+        position: absolute;
+        width: $de-table-separator-line-width;
+    }
+    .e-de-table-alignment-active {
+        border: $de-table-align-active-border solid $de-table-align-active-color;
+    }
+    .e-de-table-dialog-options-label {
+        @if $skin-name =='Material3' {
+            font-size: $de-table-options-font-size;
+            font-weight: $de-table-options-font-weight;
+            padding-bottom: $de-table-options-padding-bottom;
+        }
+    }
+    .e-de-table-dialog-size-label {
+        padding-top: $de-table-options-padding-top !important;
+        @if $skin-name =='Material3' {
+            font-weight: 600;
+            font-size: 12px;
+        }
+    }
+
+    .e-de-list-ddl-header {
+        font-size: $de-list-dlg-header-font-size;
+        font-weight: $de-list-dlg-header-font-weight;
+        margin-bottom: $de-list-dlg-header-margin-bottom;
+        margin-top: $de-list-dlg-header-margin-top;
+        @if $skin-name=='tailwind' {
+            color: $de-dlg-heading-main-header;
+        }
+    }
+    .e-de-list-ddl-header-list-level {
+        font-size: $de-list-dlg-header-font-size;
+        font-weight: $de-list-dlg-header-font-weight;
+        margin-bottom: $de-list-dlg-header-margin-bottom;
+        @if $skin-name=='tailwind' {
+            color: $de-dlg-heading-main-header;
+        }
+    }
+    .e-de-tbl-dlg-footer {
+        padding-top: $de-tbl-dlg-footer;
+    }
+    .e-de-row-ht-top,
+    .e-de-cell-ht-top {
+        padding: $de-cell-ht-top-padding $de-table-row-cell-pdng;
+        @if $skin-name=='bootstrap5' or $skin-name=='tailwind' {
+            width: 144px;
+        }
+        @else {
+            width: 160px;
+        }
+    }
+    .e-de-ht-wdth-type {
+        margin-top: $de-hght-type-top;
+        width: 120px;
+    }
+    .e-de-row-ht-top.e-de-rtl,
+    .e-de-cell-ht-top.e-de-rtl {
+        margin-left: $de-table-row-cell-pdng-left-rtl;
+        margin-right: $de-table-row-cell-pdng;
+    }
+    .e-de-cell-width-top {
+        margin-left: $de-cell-width-top-margin-left;
+        margin-top: $de-cell-width-top-margin-top;
+    }
+    .e-de-cell-width-top.e-de-rtl {
+        margin-left: $de-table-row-cell-pdng-left-rtl;
+        margin-right: $de-cell-width-top-margin-left;
+    }
+    .e-de-tbl-dlg-border-btn {
+        float: right;
+        margin-top: $de-tbl-dlg-border-btn-margin-top;
+    }
+    .e-de-tbl-dlg-border-btn.e-de-rtl {
+        float: left;
+        margin-right: $de-tbl-dlg-border-btn-margin-right-rtl;
+    }
+    .e-de-table-border-setting.e-de-rtl {
+        right: 5px;
+    }
+    .e-de-tbl-dlg-op-btn {
+        left: $de-tbl-opt-btn-left;
+        position: absolute;
+        top: $de-tbl-opt-btn-top;
+    }
+    .e-de-insert-table-dlg-sub-header {
+        display: block;
+        font-size: $de-header-font-size;
+        font-weight: $de-header-font-weight;
+        margin-bottom: $de-insert-table-title-bottom-margin;
+        margin-top: $de-insert-table-title-top-margin;
+    }
+    .e-de-insert-footnote-dlg-sub-header,
+    .e-de-insert-footnote-dlg-header {
+        display: block;
+        font-size: $de-header-font-size;
+        font-weight: $de-header-font-weight;
+        margin-bottom: $de-insert-table-title-bottom-margin;
+        margin-top: $de-insert-table-title-top-margin;
+    }
+    .e-de-insert-footnote-dlg-header {
+        margin-bottom: $de-insert-footnote-dlg-header-mrg-btm;
+    }
+    .e-de-insert-table-dlg-input {
+        @if $skin-name == 'FluentUI' {
+            display: inline-block;
+        }
+        margin-bottom: $de-insert-table-dlg-input-bottom;
+    }
+    .e-de-list-ddl-subheader,
+    .e-de-list-ddl-subheaderbottom {
+        font-size: $de-list-dlg-subheader-font-size;
+        font-weight: $de-list-dlg-subheader-font-weight;
+        margin-bottom: $de-list-dlg-subheader-margin-bottom;
+        margin-top: $de-list-dlg-subheader-margin-top;
+    }
+    .e-de-list-dlg-subdiv {
+        float: right;
+        margin-top: $e-de-list-subdiv-margin-top;
+        position: relative;
+    }
+    .e-de-list-dlg-subdiv.e-de-rtl {
+        float: left;
+        margin-top: $e-de-list-subdiv-margin-top-rtl;
+    }
+    .e-de-list-dlg-div {
+        float: right;
+        margin-top: $e-de-list-div-margin-top;
+        position: relative;
+    }
+    .e-de-list-dlg-div.e-de-rtl {
+        float: left;
+        margin-top: $e-de-list-div-margin-top-rtl;
+    }
+    .e-de-ok-button {
+        margin-right: $de-ok-insert-button-margin-right;
+    }
+    .e-de-ok-button.e-de-rtl {
+        margin-left: $de-ok-insert-button-margin-right;
+    }
+    .e-de-options-setter {
+        left: $de-options-buttons-left;
+    }
+    .e-de-op-close-icon:hover {
+        color: $de-op-btn-icon-hover-clr;
+    }
+    .e-de-tooltip {
+        background-color: $de-tooltip-bg-clr;
+        box-shadow: $de-tooltip-shadow;
+        color: $de-tooltip-color;
+        cursor: text;
+        display: table;
+        max-width: 200px;
+        padding: $de-tooltip-padding;
+        word-wrap: break-word;
+    }
+    .e-de-form-popup {
+        background-color: $de-tooltip-bg-clr;
+        box-shadow: $de-tooltip-shadow;
+        color: $de-tooltip-color;
+        cursor: text;
+        max-width: 350px;
+        min-width: 300px;
+        padding: $de-form-tooltip-padding;
+        position: absolute;
+        width: fit-content;
+        word-wrap: break-word;
+    }
+    .e-de-save,
+    .e-de-cancel {
+        margin-left: $de-save-margin-left;
+    }
+    .e-btn.e-de-op-icon-btn {
+        background-color: $de-op-btn-icon-bg;
+        border-color: $de-op-btn-icon-border;
+    }
+    .e-documenteditor .e-de-op-close-button {
+        left: 250px;
+        position: absolute;
+        top: $de-op-close-button-top;
+        @if $skin-name=='bootstrap4' {
+            padding-top: 0px;
+        }
+    }
+    @if $skin-name=='bootstrap4' or $skin-name=='bootstrap5' or $skin-name=='bootstrap5.3' {
+
+        .e-de-style-paragraph-indent-group-button .e-btn.e-active,
+        .e-de-style-paragraph-group-button .e-btn.e-active,
+        .e-de-style-font-group-button .e-btn.e-active {
+            @if $skin-name !='tailwind' {
+                background-color: $de-style-btn-bg-color;
+                box-shadow: $de-toggle-btn-border;
+                box-shadow: none;
+                .e-btn-icon {
+                  @if $skin-name !='bootstrap5' and $skin-name !='bootstrap5.3' {
+                    color: $de-style-btn-color;
+                  } @else if $skin-name =='bootstrap5.3' {
+                    color: var(--color-sf-secondary-text-color-pressed);
+                  }
+                }
+            }
+        }
+
+        .e-de-style-font-group-button,
+        .e-de-style-paragraph-group-button,
+        .e-de-style-paragraph-indent-group-button {
+            .e-btn {
+                background: $de-style-dlg-btn-bg-color;
+                @if $skin-name !='Material3' {
+                    border-color: $de-style-dlg-btn-border-color;
+                }
+                &:focus {
+                    background-color: $de-style-btn-bg-color;
+                    box-shadow: $de-toggle-btn-border;
+                }
+                &:active {
+                    background-color: $de-style-btn-bg-color;
+                    box-shadow: $de-toggle-btn-border;
+                }
+                &:hover {
+                    background-color: $de-style-btn-bg-color;
+                    box-shadow: $de-toggle-btn-border;
+                }
+            }
+        }
+        .e-de-style-font-group-button .e-btn:hover,
+        .e-de-style-font-group-button .e-btn:focus,
+        .e-de-style-font-group-button .e-btn:active,
+        .e-de-style-font-group-button .e-btn:disabled,
+        .e-de-style-paragraph-group-button .e-btn:hover,
+        .e-de-style-paragraph-group-button .e-btn:focus,
+        .e-de-style-paragraph-group-button .e-btn:active,
+        .e-de-style-paragraph-group-button .e-btn:disabled {
+            .e-btn-icon {
+                @if $skin-name=='bootstrap5' or $skin-name=='bootstrap5.3' {
+                    color: $de-style-btn-hover-color
+                }
+                @else {
+                    color: $de-style-btn-color;
+                }
+            }
+        }
+        .e-de-style-font-group-button .e-btn-icon,
+        .e-de-style-paragraph-group-button .e-btn-icon,
+        .e-de-style-paragraph-indent-group-button .e-btn-icon {
+            color: $de-prop-btn-icon-clr;
+            font-size: $de-btn-font-size;
+        }
+        .e-de-style-paragraph-indent-group-button .e-btn:hover,
+        .e-de-style-paragraph-indent-group-button .e-btn:focus,
+        .e-de-style-paragraph-indent-group-button .e-btn:active,
+        .e-de-style-paragraph-indent-group-button .e-btn:disabled {
+            .e-btn-icon {
+                color: $de-style-btn-color;
+            }
+        }
+        .e-de-style-paragraph-indent-group-button .e-btn-icon {
+            color: $de-prop-btn-icon-clr;
+            font-size: $de-btn-font-size;
+        }
+
+        @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' {
+            .e-de-style-font-color-picker .e-split-btn-wrapper .e-split-colorpicker.e-split-btn,
+            .e-de-style-font-color-picker .e-btn.e-icon-btn,
+            .e-de-dlg-clr-picker .e-split-btn-wrapper .e-split-colorpicker.e-split-btn,
+            .e-de-dlg-clr-picker .e-btn.e-icon-btn,
+            .e-de-font-dlg-display .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn,
+            .e-de-font-dlg-display .e-colorpicker-wrapper .e-btn.e-icon-btn {
+                padding: $e-de-style-font-color-picker-padding-top $e-de-style-font-color-picker-padding-right !important;
+            }
+
+            .e-de-rp-close-icon.e-btn {
+                background: $de-rp-btn-bg-color;
+                border: $e-de-rp-close-icon-border;
+                color: $de-cmt-pant-content-font;
+                opacity: 1;
+            }
+
+            .e-de-toc-dlg-style-input {
+                margin-top: $e-de-toc-dlg-style-input-margin-top;
+            }
+            .e-de-list-container {
+                background: $de-style-btn-color !important;
+            }
+
+            .e-documenteditor .e-de-op-close-button {
+                top: 10px;
+            }
+            .e-de-styles,
+            .e-de-bookmark {
+                margin-top: $e-de-styles-margin-top !important;
+            }
+            .e-de-bookmark .e-bookmark-textbox-input {
+                box-sizing: border-box !important;
+            }
+            .e-de-cp-option {
+                background: transparent;
+            }
+
+            .e-styles-common {
+                padding-top: $de-style-list-top;
+            }
+            .e-styles-list {
+                margin-right: $de-style-list-top;
+            }
+            .e-de-font-dlg-display .e-split-btn-wrapper .e-btn {
+                border-color: $de-style-toggle-btn-color;
+            }
+        }
+    }
+    @if $skin-name=='bootstrap5' or $skin-name=='FluentUI' {
+        .e-de-restrict-pane {
+            color: $content-text-color;
+        }
+    }
+    @if $skin-name=='tailwind' {
+        
+        .e-de-style-font-group-button .e-btn:not(button:last-child),
+        .e-de-style-paragraph-group-button .e-btn:not(button:last-child),
+        .e-de-style-paragraph-indent-group-button .e-btn:not(button:last-child) {
+            margin-right: 3px;
+        }
+        .e-style-font-fmaily-right:not(.e-bigger .e-style-font-fmaily-right) {
+            width: 148px !important;
+        }
+        .e-de-rp-enforce-nav.e-de-rp-nav-lbl .e-label {
+            font-size: 12px;
+        }
+        .e-de-cell-margin-top {
+            padding-bottom: 0;
+        }
+        .e-de-ctnr-prop-label.e-de-table-prop-label {
+            margin-bottom: 8px;
+        }
+        .e-de-search-tab-content .e-input-group .e-de-op-search-icon:active,
+        .e-de-op-search-close-icon:active {
+            color: $search-icon-bdr-clr !important;
+        }
+        .e-de-op-search-icon:hover,
+        .e-de-op-search-close-icon:hover {
+            color: $search-icon-hvr !important;
+        }
+        .e-de-enforce {
+            font-weight: 500;
+        }
+        .e-de-page-setup-dlg-first-page-prop {
+            margin-bottom: 8px;
+        }
+        .e-de-pagesetup-dlg-container .e-input-group {
+            width: 184px !important;
+        }
+        .e-de-table-options-dlg-div .e-input-group {
+            width: 187px !important;
+        }
+        .e-de-font-dlg .e-input-group,
+        .e-de-list-dlg .e-input-group,
+        .e-de-list-dlg .e-input {
+            width: max-content !important;
+        }
+        .e-de-list-ddl-subheaderbottom {
+            margin-top: 12px;
+        }
+        .e-de-style-based-para-div .e-input-group,
+        .e-de-style-nametype-div .e-input-group,
+        .e-de-style-nametype-div .e-input {
+            width: 256px !important;
+        }
+        .e-de-list-ddl-subheader {
+            width: auto !important;
+        }
+        .e-de-table-measure-lbl {
+            width: 80px !important;
+        }
+        .e-de-style-font-group-button>button:last-child {
+            margin-right: 6px;
+        }
+        .e-de-hdr-ftr-frst-page-div,
+        .e-de-page-setup-dlg-sub-container,
+        .e-de-div-seperate-dlg {
+            margin-bottom: 12px;
+        }
+        .e-de-toc-dlg-tab-div {
+            margin-top: 16px;
+        }
+        .e-bookmark-textbox-input {
+            margin-top: 0px !important;
+        }
+        .e-de-table-cell-header-div,
+        .e-de-table-header-div {
+            margin-top: 4px !important;
+        }
+        .e-documenteditor {
+            .e-tab .e-content .e-item {
+                padding: 0;
+            }
+        }
+        .e-de-table-cell-margin-dlg .e-input-group {
+            width: 188px !important;
+        }
+        .e-de-restrict-pane {
+            line-height: $de-rp-content-ln-ht;
+        }
+    }
+    .e-de-restrict-pane {
+        color: $de-input-color;
+    }
+    .e-de-op.e-de-rtl .e-de-search-tab-content {
+        margin-left: $de-op-search-tab-content-margin-top;
+        margin-right: $de-op-search-tab-content-margin-right;
+    }
+    .e-documenteditor .e-de-op-close-button.e-de-rtl {
+        right: 255px;
+    }
+    .e-de-table-measure-lbl {
+        font-size: $de-tbl-measure-lbl-font-size;
+        font-weight: $de-header-font-weight;
+        display: block;
+        margin-bottom: $de-row-height-bottom-margin;
+    }
+    .e-de-tbl-indent-lbl {
+        font-weight: $de-header-font-weight;
+        font-size: $de-tbl-indent-lb-fnt-size;
+        position: relative;
+        display: block;
+        margin-bottom: $de-tbl-indent-lbl-mrgn-btm;
+        top: $de-tbl-indent-lbl-top;
+    }
+    .e-btn.e-de-op-close-button:hover {
+        background-color: $de-op-btn-icon-bg;
+        border-color: $de-op-btn-icon-border;
+        color: $de-op-btn-icon-hover-clr;
+    }
+    .e-btn.e-de-op-close-button:focus {
+        background-color: $de-op-btn-icon-bg;
+        border-color: $de-op-btn-icon-border;
+        color: $de-op-btn-icon-hover-clr;
+    }
+    .e-btn.e-de-op-close-button:active {
+        background-color: $de-op-btn-icon-bg;
+        border-color: $de-op-btn-icon-border;
+        color: $de-op-btn-icon-active-clr;
+    }
+    .e-documenteditor {
+        .e-input {
+            font-size: $de-documenteditor-font-size;
+        }
+    }
+    .e-de-dlg-target .e-footer-content {
+        .e-control.e-btn.e-flat:not(.e-icon-btn) {
+            height: $de-dlg-btn-height;
+        }
+    }
+    .e-dialog .e-footer-content {
+        @if $skin-name == 'tailwind3' {
+            border: $de-border-dlg-clr-border;
+            border-bottom-left-radius: $de-border-dlg-clr-radius-bottom;
+            border-bottom-right-radius: $de-border-dlg-clr-radius-bottom;
+        }
+    }
+    .e-de-tbl-dlg-border-btn .e-control.e-btn.e-flat:not(.e-icon-btn) {
+        height: auto;
+    }
+    .e-de-op-result-container {
+        margin-top: $de-op-result-container-margin-top;
+    }
+    .e-de-restrict-pane,
+    .e-de-op {
+        background: $de-op-bg-color;
+    }
+    .e-de-restrict-pane,
+    .e-de-op {
+        .e-tab-header .e-toolbar-items {
+            margin-bottom: $de-op-tab-header-margin-bottom;
+            margin-top: $de-op-tab-header-margin-top;
+        }
+    }
+    .e-de-font-dlg-color {
+        border: $de-font-color-border;
+        border-radius: $de-font-color-border-radius;
+        font-size: $de-font-color-font-size;
+        height: $e-de-font-dlg-color-height;
+        margin-left: $de-font-color-margin-left;
+        width: 25px;
+    }
+    .e-de-icon-table-row-above {
+        top: $de-icon-table-row-above-top;
+    }
+    .e-de-icon-table-row-below {
+        top: $de-icon-table-row-below-top;
+    }
+    .e-de-icon-table-column-left {
+        top: $de-icon-table-column-left-top;
+    }
+    .e-de-icon-table-column-right {
+        top: $de-icon-table-column-right-top;
+    }
+    .e-de-icon-table-delete {
+        top: $de-icon-table-delete-top;
+    }
+    .e-de-icon-table-row-delete {
+        top: $de-icon-table-row-delete-top;
+    }
+    .e-de-icon-table-column-delete {
+        top: $de-icon-table-column-delete-top;
+    }
+    .e-de-list-bullet-none {
+        height: $e-de-list-bullet-height;
+        width: 40px;
+    }
+    .e-de-list-bullet-dot {
+        height: $e-de-list-bullet-height;
+        width: 40px;
+    }
+    .e-de-list-bullet-circle {
+        height: $e-de-list-bullet-height;
+        width: 40px;
+    }
+    .e-de-list-bullet-square {
+        height: $e-de-list-bullet-height;
+        width: 40px;
+    }
+    .e-de-list-bullet-flower {
+        height: $e-de-list-bullet-height;
+        width: 40px;
+    }
+    .e-de-list-bullet-arrow {
+        height: $e-de-list-bullet-height;
+        width: 40px;
+    }
+    .e-de-list-bullet-tick {
+        height: $e-de-list-bullet-height;
+        width: 40px;
+    }
+    .e-de-bullet:hover {
+        background: $de-bullet-list-hover-color;
+    }
+    .e-de-list-numbered-none {
+        height: $e-de-list-numbered-height;
+        width: 80px;
+    }
+    .e-de-list-numbered-number-dot {
+        height: $e-de-list-numbered-height;
+        width: 80px;
+    }
+    .e-de-list-numbered-number-brace {
+        height: $e-de-list-numbered-height;
+        width: 80px;
+    }
+    .e-de-list-numbered-up-roman {
+        height: $e-de-list-numbered-height;
+        width: 80px;
+    }
+    .e-de-list-numbered-up-letter {
+        height: $e-de-list-numbered-height;
+        width: 80px;
+    }
+    .e-de-list-numbered-low-letter-brace {
+        height: $e-de-list-numbered-height;
+        width: 80px;
+    }
+    .e-de-numbered-low-letter-dot {
+        height: $e-de-list-numbered-height;
+        width: 80px;
+    }
+    .e-de-list-numbered-low-roman {
+        height: $e-de-list-numbered-height;
+        width: 80px;
+    }
+    .e-de-numbered:hover {
+        background: $de-number-list-hover-color;
+    }
+    .e-de-list-multilevel-none {
+        height: $e-de-list-multilevel-height;
+        width: 80px;
+    }
+    .e-de-list-multilevel-list-normal {
+        height: $e-de-list-multilevel-height;
+        width: 80px;
+    }
+    .e-de-list-multilevel-list-multilevel {
+        height: $e-de-list-multilevel-height;
+        width: 80px;
+    }
+    .e-de-list-multilevel-list-bullets {
+        height: $e-de-list-multilevel-height;
+        width: 80px;
+    }
+    .e-de-multilevel-list:hover {
+        background: $de-multilevel-list-hover-color;
+    }
+    .e-de-list-dialog-open:hover {
+        background: $de-list-dialog-hover-color;
+    }
+    .e-de-cell-options {
+        left: $de-cell-options-left;
+        top: $de-cell-options-top;
+    }
+    .e-de-cell-options.e-de-rtl {
+        left: $de-cell-options-rtl;
+    }
+    .e-de-font-color-label {
+        margin-bottom: $de-font-color-margin-bottom;
+        margin-right: $de-font-color-margin-top;
+        margin-top: $de-font-color-margin-top;
+    }
+    .e-de-font-content-label {
+        width: $de-font-label-width;
+    }
+    .e-de-font-color-margin {
+        margin-right: $de-font-dlg-color-margin-right;
+        margin-top: $de-font-dlg-color-margin-top;
+    }
+    .e-de-font-color-margin.e-de-rtl {
+        margin-left: $de-font-dlg-color-margin-right;
+        margin-right: $e-de-font-color-margin-right;
+    }
+    .e-de-font-content-checkbox-label {
+        margin-left: $de-font-content-checkbox-left;
+    }
+    .e-de-font-content-checkbox-label-rtl {
+        margin-right: $de-font-content-checkbox-right;
+    }
+    .e-de-font-checkbox {
+        margin-top: $de-font-style-margin;
+    }
+    .e-de-font-checkbox-transform {
+        margin-left: $de-font-checkbox-ltr;
+    }
+    .e-de-font-checkbox-transform.e-de-rtl {
+        margin-left: $de-font-checkbox-margin-left;
+        margin-right: $de-font-checkbox-ltr;
+    }
+    .e-de-font-checkbox-transform-label {
+        margin-bottom: $de-font-style-margin;
+        margin-top: $de-font-style-margin;
+    }
+    .e-de-font-checkbox.e-de-rtl {
+        margin-left: $de-font-checkbox-margin-left;
+        margin-right: $de-font-checkbox-ltr;
+    }
+    .e-de-font-checkbox.e-de-rtl {
+        margin-left: $de-font-checkbox-margin-left;
+        margin-right: $de-font-checkbox-left;
+    }
+    .e-de-font-clr-div {
+        margin-top: $de-font-clr-div-mrgn-top;
+    }
+    .e-de-font-dlg-padding {
+        margin-top: $de-font-dlg-margin-top;
+    }
+    .e-de-table-container-div {
+        margin-top: $de-table-container-margin-top;
+    }
+    .e-de-table-header-div {
+        padding-top: $de-table-header-padding-top;
+    }
+    .e-de-table-subheader-div {
+        float: right;
+        margin-right: $de-table-subheader-div-margin-right;
+        margin-top: $de-table-subheader-div-margin-top;
+    }
+    .e-de-table-subheader-div.e-de-rtl {
+        float: left;
+        margin-left: $de-table-subheader-div-margin-right;
+        margin-right: $de-table-subheader-div-margin-rgt-rtl;
+    }
+    .e-de-table-cell-header-div {
+        padding-top: $de-table-header-padding-top;
+    }
+    .e-de-table-cell-subheader-div {
+        top: $de-cell-subheader-top;
+    }
+    .e-de-cell-margin-header {
+        left: $de-cell-margin-header-left;
+        top: $de-cell-margin-header-top;
+    }
+    .e-de-tbl-margin-sub-header {
+        margin-top: $de-tbl-margin-sub-header;
+    }
+    .e-de-tbl-btn-separator {
+        width: $de-tbl-btn-separator;
+    }
+    .e-de-op-msg {
+        color: $de-op-container-messagediv-color;
+        top: 79px;
+    }
+    .e-de-save-dlg-file-name {
+        height: $e-de-save-dlg-height;
+        margin-bottom: $de-save-dlg-file-name-margin-bottom;
+    }
+    .e-de-save-dlg-format-type {
+        height: $e-de-save-dlg-height;
+        margin-bottom: $de-save-dlg-format-type-margin-bottom;
+        padding-top: $de-save-dlg-format-type-padding;
+    }
+    .e-de-search-tab-content {
+        margin-top: $de-op-search-tab-content-margin-top;
+        width: $de-op-search-text-box-container-width;
+    }
+    .e-de-font-dlg {
+        width: $de-font-dlg-width;
+        @if $skin-name == 'Material3' {
+            padding: 8px
+        }
+    }
+    .e-de-hyperlink {
+        width: $de-hyper-link-width;
+    }
+    @if $skin-name =='Material3'{
+        .e-de-table-border-shading-dlg {
+            .e-de-dlg-row .e-de-dlg-row label {
+                margin-left: 10px;
+            }
+        }
+        .e-de-table-setting-heading {
+            line-height: 22px;
+            letter-spacing: 0.30000001192092896px;
+        }
+        .e-de-rp-btn-enforce {
+            border-radius: 4px !important;
+        }
+        .e-de-track-toolbar .e-de-track-pane-drop-btn, #e-de-menu-option {
+            background: none;
+        }
+    }
+    .e-de-insert-table {
+        height: $de-insert-table-height;
+        width: $de-insert-table-width;
+    }
+    .e-de-insert-footnote {
+        height: $de-insert-footnote-height;
+        width: $de-insert-footnote-width;
+    }
+    .e-de-insert-spellchecker {
+        height: $de-insert-spellchecker-height;
+        width: $de-insert-spellchecker-width;
+        font-weight: $de-header-font-weight;
+    }
+    .e-de-dlg-spellcheck-listview {
+        @if $skin-name !='tailwind' {
+            border: $de-dlg-spellcheck-listview-border solid $de-spellcheck-listview-border-color;
+            border-radius: $de-dlg-spellcheck-listview-border-radius !important;
+        }
+        height: $de-spellcheck-listview-height !important;
+        margin-right: $de-bookmark-list-margin-right;
+        margin-top: $de-bookmark-list-margin-top;
+        position: relative;
+        float: left;
+        width:$de-spellcheck-list-width;
+    }
+    .e-de-dlg-spellcheck-listview.e-de-rtl {
+        float: right;
+    }
+    .e-de-spellcheck-error-container {
+        height: $de-spellcheck-container-height;
+        margin-bottom: $de-spellcheck-container-gap;
+        display: flex;
+    }
+    .e-de-spellcheck-suggestion-container {
+        height: $de-spellcheck-container-height;
+        margin-bottom: $de-spellcheck-container-gap;
+        display: flex;
+    }
+    .e-dlg-spellcheck-listitem {
+        font-size: $de-spellcheck--listitem-font-size !important;
+    }
+    .e-de-spellcheck-btncontainer {
+        margin-top: $de-spellcheck-btn-container-margin-top;
+        position: relative;
+        width:$de-spellcheck-btn-container-width;
+        float: right;
+    }
+    .e-de-spellcheck-btncontainer.e-de-rtl {
+        float: left;
+    }
+    .e-de-spellcheck-btn {
+        margin-bottom:$de-padding-half-bigger;
+        width:$de-spellcheck-btn-width;
+    }
+    .e-de-dlg-spellchecker-subheader {
+        margin-top: $de-dlg-spellchecker-subheader-margin-top;
+        @if $skin-name=='tailwind' {
+            font-size: 14px;
+            margin-top: 4px;
+        }
+        @else {
+            font-size: $de-dlg-spellchecker-subheader-font-size;
+        }
+    }
+    .e-de-dlg-spellchecker-subheaderbtm {
+        @if $skin-name=='tailwind' {
+            font-size: 14px;
+        }
+        @else {
+            font-size: $de-dlg-spellchecker-subheaderbtm-font-size;
+        }
+    }
+    .e-de-list-dlg {
+        height: $de-list-dlg-height;
+        width: $de-list-dlg-width;
+    }
+    .e-de-save-dlg {
+        height: $de-save-dlg-height;
+        width: $de-save-dlg-width;
+    }
+    .e-de-table-properties-dlg {
+        @if $skin-name =='Material3' {
+            padding: 0px 8px;
+        }
+        width: $de-table-ppty-dlg-width;
+    }
+    .e-de-table-border-shading-dlg {
+        width: $de-table-border-shading-dlg-width;
+        @if $skin-name =='Material3'{
+            height: 400px
+        }
+    }
+    .e-de-table-cell-margin-dlg {
+        height: $de-table-cell-margin-dlg-height;
+        width: $de-table-cell-margin-dlg-width;
+        @if $skin-name =='Material3' {
+            padding: 0px 8px
+        }
+    }
+    .e-de-table-options-dlg {
+        height: $de-table-options-dlg-height;
+        width: $de-table-options-dlg-width;
+    }
+    .e-de-table-border-none {
+        position: absolute;
+        top: $de-table-border-none-top;
+    }
+    .e-de-table-border-box {
+        position: absolute;
+        top: $de-table-border-box-top;
+    }
+    .e-de-table-border-all {
+        position: absolute;
+        top: $de-table-border-all-top;
+    }
+    .e-de-table-border-custom {
+        position: absolute;
+        top: $de-table-border-custom-top;
+    }
+    .e-de-table-shading-preview {
+        top: $de-table-shading-preview-top;
+    }
+    .e-de-font-label span.e-label {
+        color: $de-checkbox-wrapper-color;
+    }
+    .e-de-font-content-label:hover .e-label,
+    .e-css.e-de-font-content-label:hover .e-label {
+        color: $de-checkbox-wrapper-color;
+    }
+    .e-de-font-label:hover .e-label,
+    .e-css.e-de-font-label:hover .e-label {
+        color: $de-checkbox-wrapper-color;
+    }
+    .e-de-op-dlg-footer {
+        margin-top: $de-op-dlg-footer-margin-top;
+    }
+    .e-de-op-dlg-footer .e-btn {
+        padding-left: $de-op-dlg-footer-padding-left;
+        padding-right: $de-op-dlg-footer-padding-right;
+    }
+    .e-de-search-tab-content .e-input-group .e-de-search-input {
+        width: $de-op-search-input-width;
+    }
+    .e-de-op-replacewith {
+        width: $de-op-replacewith-width;
+    }
+    .e-de-table-ppty-tab {
+        border: $de-table-ppty-tab-border;
+    }
+    .e-de-list-format-info {
+        border-radius: $de-ff-cmt-avatar-border-radius;
+        cursor: default;
+        font-size: $de-list-info-btn-font-size !important;
+        height: $e-de-list-format-info-height;
+        line-height: $de-list-info-btn-line-height;
+        padding: $de-list-info-btn-padding !important;
+        text-transform: lowercase;
+        width: 16px;
+    }
+    .e-button-custom {
+        height: $de-bookmark-custom-btn-height;
+        width: 100%;
+    }
+    .e-styles-listview,
+    .e-bookmark-listview {
+        border: $bookmark-listview-border solid $bookmark-listview-border-color;
+        border-radius: $de-bookmark-list-view-border-radius;
+        height: $e-styles-bookmark-listview-height;
+        overflow-y: scroll;
+    }
+    .e-bookmark-gotobutton,
+    .e-bookmark-addbutton,
+    .e-styles-addbutton,
+    .e-bookmark-deletebutton {
+        margin-bottom: $de-bookmark-deletebutton-margin-bottom;
+    }
+    .e-bookmark-list {
+        float: left;
+        margin-right: $de-bookmark-list-margin-right;
+        width: 250px;
+    }
+    .e-bookmark-list.e-de-rtl {
+        margin-left: $de-bkmrk-list-margin-left;
+        margin-right: $de-bkmrk-list-margin-right-rtl;
+    }
+    .e-bookmark-textboxdiv {
+        margin-bottom: $de-bookmark-textbox-margin-bottom;
+    }
+    .e-bookmark-listview .e-list-item {
+        font-size: $de-bookmark-listview-font-size;
+        height: $e-bookmark-listview-height;
+        line-height: $de-bookmark-listview-line-height;
+    }
+    .e-bookmark-common {
+        display: flex;
+    }
+    .e-bookmark-button {
+        position: relative;
+        top: $de-bookmark-button-div-top-position;
+    }
+    .e-font {
+        float: left;
+    }
+    .e-font-rtl {
+        float: right;
+    }
+    .e-de-table-border-toptop-alignment,
+    .e-de-table-border-topcenter-alignment,
+    .e-de-table-border-topbottom-alignment,
+    .e-de-table-border-diagionalup-alignment,
+    .e-de-table-border-diagionaldown-alignment,
+    .e-de-table-border-bottomleft-alignment,
+    .e-de-table-border-bottomcenter-alignment,
+    .e-de-table-border-bottomright-alignment {
+        left: $de-table-border-dlg-alignments-left;
+        position: relative;
+        top: $de-table-border-preview-top;
+        transform: $de-table-border-dlg-alignments-transform;
+    }
+    .e-de-style-properties,
+    .e-de-style-formatting {
+        font-size: $de-style-heading-font-size;
+        font-weight: $de-style-heading-font-weight;
+        color: $de-dlg-heading-main-header;
+    }
+    .e-de-style-formatting {
+        margin-bottom: $de-style-dialog-style-formatting-bottom-margin;
+    }
+    .e-de-style-paragraph-indent-group-button .e-btn,
+    .e-de-style-paragraph-group-button .e-btn,
+    .e-de-style-font-group-button .e-btn {
+        box-shadow: none;
+    }
+    .e-de-table-options-dlg-div {
+        height: auto;
+        position: relative;
+        margin-bottom: $de-dlg-table-options-margin-bottom;
+        width: $de-dlg-table-options-content-div;
+    }
+        @if $skin-name !='bootstrap4' and $skin-name !='bootstrap5.3' and $skin-name !='tailwind' {
+            .e-de-style-paragraph-indent-group-button .e-btn.e-active,
+            .e-de-style-paragraph-group-button .e-btn.e-active,
+            .e-de-style-font-group-button .e-btn.e-active {
+                background-color: $de-style-btn-active-bg-border-color;
+                border-color: $de-style-btn-active-bg-border-color;
+                box-shadow: none;
+                color: $de-style-btn-active-text-color;
+            }
+        }
+        .e-de-style-properties {
+            margin-bottom: $de-style-dialog-style-ppties-bottom-margin;
+        }
+        .e-de-style-nametype-div {
+            margin-bottom: $de-style-dialog-style-name-type-div-bottom-margin;
+        }
+        .e-de-style-based-para-div {
+            margin-bottom: $de-style-dialog-style-based-para-div-bottom-margin;
+        }
+        .e-de-style-name,
+        .e-de-style-styletype,
+        .e-de-style-style-based-on,
+        .e-de-style-style-paragraph {
+            font-weight: $de-header-font-weight;
+            margin-bottom: $de-style-dialog-label-bottom-margin;
+            font-size: $de-style-font-size;
+            @if $skin-name !='tailwind' {
+                width: 180px;
+            }
+        }
+        .e-de-style-left-div {
+            margin-right: $de-style-dialog-style-left-div-right-margin;
+        }
+        .e-de-style-left-div.e-de-rtl {
+            margin-left: $de-style-dialog-style-left-div-right-margin;
+            margin-right: $de-style-dialog-style-left-div-margin-right-rtl;
+        }
+        @if $skin-name !='tailwind' and $skin-name !='bootstrap5' and $skin-name != 'FluentUI' {
+            .e-de-style-font-color-picker,
+            .e-de-style-icon-button-size,
+            .e-de-style-icon-button-first-size,
+            .e-de-style-icon-button-last-size {
+                height: $e-de-style-font-color-picker-height;
+            }
+        }
+        
+        
+
+        @if $skin-name =='Material3' {
+            .e-de-style-font-group-button button,
+            .e-de-style-paragraph-indent-group-button button,
+            .e-de-style-paragraph-group-button button {
+                width: 36px;
+                border-radius: 4px;
+                margin-right: 5px;
+                background: $de-style-dlg-btn-bg-color;
+            }
+        }
+        
+        .e-de-style-bold-button-size {          
+            @if $skin-name !='tailwind' and $skin-name !='bootstrap5' and $skin-name != 'Fluent' and $skin-name != 'Material3' {
+                margin-right: $de-style-dialog-label-right-margin;
+                height: $e-de-style-bold-button-size-height;
+            }
+            @if $skin-name=='fluent2' {
+                margin-left: 0;
+                border-left: 0;
+                border-right: 0;
+                height: 31px;
+                margin-right: 0px;
+            }
+            @else {
+                margin-left: $de-style-dialog-label-bottom-margin;
+            }   
+        }
+        .e-de-style-format-dropdwn .e-btn-icon {
+            margin-left: $de-style-format-dropdwn-margin-left;
+        }
+        @if $skin-name !='tailwind' and $skin-name !='bootstrap5' and $skin-name != 'FluentUI'  {
+            .e-de-style-font-color-picker,
+            .e-de-style-icon-button-size {
+                @if $skin-name=='fluent2' {
+                    margin-right: 0;
+                }
+                @else {
+                    margin-right: $de-style-dialog-label-bottom-margin;
+                }
+            }
+        }
+        .e-de-style-icon-button-first-size {
+            @if $skin-name !='tailwind' and $skin-name !='bootstrap5' and $skin-name != 'FluentUI' {
+                margin-right: $e-de-style-icon-button-first-size-margin-right;
+            }
+            @if $skin-name=='fluent2' {
+                margin-right: 0;
+                margin-left: 0;
+            }
+            @else{
+                margin-left: $de-style-dialog-label-bottom-margin;
+            }
+        }
+        .e-de-style-icon-button-last-size {
+            margin-right: $de-style-dialog-label-bottom-margin;
+        }
+        .e-de-style-font-color-picker {
+            margin-left: $de-style-dialog-label-bottom-margin;
+        }
+        .e-style-font-fmaily-right {
+            margin-right: $de-style-dialog-label-bottom-margin;
+        }
+        .e-style-font {
+            margin-left: $de-style-font-margin-left;
+            margin-right: $de-style-font-margin-right;
+        }
+        .e-de-style-dlg-name-input {
+            height: $e-de-style-input-text-height;
+        }
+        .e-style-list {
+            margin-left: $de-style-list-margin-left;
+        }
+        .e-de-style-dialog .e-de-style-only-this-document {
+            margin-top: $e-de-style-dialog-margin-top;
+        }
+        .e-de-style-format-dropdwn {
+            @if $skin-name == 'FluentUI' {
+              width: 145px;
+            } 
+            @else 
+            {
+              width: 135px;
+              @if $skin-name =='Material3' {
+                background: $de-style-dlg-btn-bg-color;
+                border-radius: 2px;
+              }
+            }
+        }
+        .e-de-style-options-div,
+        .e-de-style-options-div>div:first-child {
+            margin-bottom: $de-style-dialog-option-div-bottom-margin !important;
+        }
+        .e-de-style-paragraph-group-button {
+            @if $skin-name !='Material3' {
+                border-right: $de-style-toggle-btn-border-right solid $de-style-toggle-btn-color;
+            }
+            @if $skin-name=='fluent2' {
+                border-right: 0;
+                border-left: 0;
+            }
+        }
+        .e-de-style-font-group-button {
+            @if $skin-name !='Material3' {
+                border-left: $de-style-toggle-btn-border solid $de-style-toggle-btn-color;
+                border-right: $de-style-toggle-btn-border solid $de-style-toggle-btn-color;
+            }
+            @if $skin-name=='bootstrap5' or $skin-name == 'FluentUI' {
+                padding-right: $de-style-dialog-option-div-bottom-margin;
+            }
+            @if $skin-name=='fluent2' {
+                margin-right: 10px;
+                border-left: 0;
+                border-right: 0;
+            }
+        }
+        .e-de-op-replace-messagediv {
+            color: $de-op-container-messagediv-color;
+            top: auto;
+        }
+        @if $skin-name !='bootstrap5' and  $skin-name !='FluentUI' { 
+            .e-de-font-content-label .e-label,
+            .e-de-font-dlg-cb-right .e-label,
+            .e-de-font-checkbox .e-label {
+                font-size: $de-font-checkbox-label-font-size;
+                @if $skin-name=='tailwind' {
+                    line-height: 1.5;
+                }
+            }
+            .e-de-font-content-label .e-frame,
+            .e-de-font-dlg-cb-right .e-frame,
+            .e-de-font-checkbox .e-frame,
+            .e-de-font-content-label-caps .e-frame,
+            .e-de-cntr-pane-padding .e-frame {
+                height: $de-checkbox-height;
+                line-height: $de-checkbox-line-height;
+                width: $de-checkbox-width;
+            }
+        }
+        .e-de-op-input-group,
+        .e-de-op-replacewith {
+            height: $de-op-input-group-height;
+        }
+        .e-de-hyperlink-bookmark-check {
+            margin-top: $de-hyperlink-bookmark-check-margin-top;
+        }
+        @if $skin-name !='tailwind' and $skin-name !='bootstrap5' and $skin-name !='FluentUI' {
+            .e-de-table-container-div .e-checkbox-wrapper .e-frame,
+            .e-de-table-header-div .e-checkbox-wrapper .e-frame,
+            .e-de-table-ppty-options-break .e-checkbox-wrapper .e-frame,
+            .e-de-table-ppty-options-header-row .e-checkbox-wrapper .e-frame,
+            .e-de-table-cell-header-div .e-checkbox-wrapper .e-frame,
+            .e-de-tbl-btn-separator .e-checkbox-wrapper .e-frame,
+            .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame,
+            .e-de-tbl-margin-sub-header .e-frame {
+                height: $de-checkbox-height;
+                line-height: $de-checkbox-line-height;
+                width: $de-checkbox-width;
+            }
+            .e-de-table-container-div .e-checkbox-wrapper .e-label,
+            .e-de-table-header-div .e-checkbox-wrapper .e-label,
+            .e-de-table-ppty-options-break .e-checkbox-wrapper .e-label,
+            .e-de-table-ppty-options-header-row .e-checkbox-wrapper .e-label,
+            .e-de-table-cell-header-div .e-checkbox-wrapper .e-label,
+            .e-de-tbl-btn-separator .e-checkbox-wrapper .e-label,
+            .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-label,
+            .e-de-tbl-margin-sub-header .e-label {
+                font-size: $de-table-container-div-font-size;
+            }
+        }
+        .e-de-table-container-div .e-checkbox-wrapper .e-label,
+        .e-de-table-header-div .e-checkbox-wrapper .e-label,
+        .e-de-table-ppty-options-break .e-checkbox-wrapper .e-label,
+        .e-de-table-ppty-options-header-row .e-checkbox-wrapper .e-label,
+        .e-de-table-cell-header-div .e-checkbox-wrapper .e-label,
+        .e-de-tbl-btn-separator .e-checkbox-wrapper .e-label,
+        .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-label,
+        .e-de-tbl-margin-sub-header .e-label {
+            font-size: $de-table-container-div-font-size;
+        }
+        .e-de-table-ppty-dlg-measure-div {
+            float: right;
+            margin-left: $de-table-ppty-dlg-measure-div-margin-left;
+            margin-top: $de-table-ppty-dlg-measure-margin-top;
+        }
+        .e-de-table-ppty-dlg-measure-div.e-de-rtl {
+            float: left;
+            margin-left: $de-table-ppty-dlg-measure-div-margin-lft-rtl;
+            margin-right: $de-table-ppty-dlg-measure-div-margin-left;
+        }
+        .e-de-table-ppty-dlg-measure-drop-down-div {
+            float: right;
+            margin-left: $de-table-ppty-dlg-measure-div-margin-left;
+            margin-top: $de-table-ppty-dlg-measure-div-margin-top;
+            width: 120px;
+        }
+        .e-de-table-ppty-dlg-measure-drop-down-div.e-de-rtl {
+            margin-left: $de-table-ppty-dlg-measure-div-margin-lft-rtl;
+            margin-right: $de-table-ppty-dlg-measure-div-margin-left;
+        }
+        .e-de-table-ppty-dlg-left-indent-container {
+            @if $skin-name =='Material3' {
+                bottom: $e-de-table-ppty-dlg-left-indent-container-bottom;
+                left: $de-table-prop-left-indnt-cntr-pos;
+                position: relative;
+            }
+        }
+        .e-de-table-ppty-dlg-left-indent-container.e-de-rtl {
+            @if $skin-name =='Material3' {
+                right: $de-table-prop-left-indnt-cntr-pos;
+            }
+        }
+        .e-de-table-ppty-dlg-row-height-label {
+            float: right;
+            margin-right: $de-table-ppty-dlg-row-height-label-margin-right;
+            margin-top: $de-table-ppty-dlg-row-height-label-margin-top;
+        }
+        .e-de-table-ppty-dlg-row-height-label.e-de-rtl {
+            float: left;
+            margin-left: $de-table-ppty-dlg-row-height-label-margin-right;
+            margin-right: $de-table-ppty-dlg-row-height-label-margin-rgt-rtl;
+        }
+        .e-de-table-ppty-dlg-preferred-width-div {
+            float: right;
+            margin-left: $de-table-ppty-dlg-preferred-width-margin-left;
+            margin-top: $de-table-ppty-dlg-preferred-width-margin-top;
+            width: 120px;
+        }
+        .e-de-table-ppty-dlg-preferred-width-div.e-de-rtl {
+            margin-left: $de-table-ppty-dlg-preferred-width-margin-lft-rtl;
+            margin-right: $de-table-ppty-dlg-preferred-width-margin-left;
+            width: 120px;
+        }
+        .e-de-table-ppty-options-break {
+            margin-bottom: $de-table-ppty-options-break-margin-bottom;
+        }
+        .e-de-table-cell-subheader-div {
+            margin-right: $de-table-cell-subheader-div-margin-right;
+            margin-top: $de-table-cell-subheader-div-margin-top;
+        }
+        .e-de-table-cell-subheader-div.e-de-rtl {
+            margin-left: $de-table-cell-subheader-div-margin-right;
+            margin-right: $de-table-cell-subheader-div-margin-rgt-rtl;
+        }
+        .e-de-table-ppty-dlg-cell-tab-measure-label {
+            float: right;
+            margin-right: $de-table-ppty-dlg-cell-tab-measure-label-margin-right;
+            margin-top: $de-table-ppty-dlg-cell-tab-measure-label-margin-top;
+        }
+        .e-tab .e-tab-header .e-toolbar-item .e-de-table-ppty-dlg-row-header {
+            padding-left: $de-table-ppty-dlg-table-header-padding;
+            padding-right: $de-table-ppty-dlg-table-header-padding;
+        }
+        .e-tab .e-tab-header .e-toolbar-item .e-de-table-ppty-dlg-cell-header {
+            padding-left: $de-table-ppty-dlg-table-header-padding;
+            padding-right: $de-table-ppty-dlg-table-header-padding;
+        }
+        .e-tab .e-tab-header .e-toolbar-item .e-de-page-setup-dlg-margin-tab-header {
+            padding-left: $de-table-ppty-dlg-table-header-padding-left;
+            padding-right: $de-table-ppty-dlg-table-header-padding;
+        }
+        .e-styles-list {
+            float: left;
+            margin-right: $de-bookmark-listview-margin-right;
+            width: 250px;
+        }
+        .e-styles-textboxdiv {
+            padding-bottom: $de-styles-textboxdiv-padding-bottom;
+        }
+        .e-styles-listview .e-list-item {
+            @if $skin-name=='fluent2' {
+                font-size: 14px;
+                color: $de-sub-header-color;
+            }
+            @else {
+                font-size: $styles-listview-font-size;
+            }
+            height: $e-styles-listview-height;
+            line-height: $styles-listview-line-height;
+        }
+        .e-styles-common {
+            padding-top: $styles-common-padding-top;
+        }
+        .e-styles-button {
+            float: right;
+        }
+        .e-de-toc-dlg-right-sub-container.e-de-rtl {
+            margin-left: $de-toc-dlg-right-sub-container-margin-right;
+            margin-right: $de-toc-dlg-right-sub-container-margin-right;
+        }
+        .e-de-toc-dlg-styles {
+            margin-bottom: $de-toc-dlg-styles-margin-bottom;
+            margin-left: $de-toc-dlg-styles-margin-left;
+            margin-top: $de-toc-dlg-styles-margin-top;
+        }
+        .e-de-toc-dlg-styles.e-de-rtl {
+            margin-left: $de-toc-dlg-styles-margin-lft-rtl;
+            margin-right: $de-toc-dlg-styles-margin-left;
+        }
+        .e-de-toc-dlg-style-input.e-de-rtl {
+            margin-left: $de-toc-dlg-style-input-margin-lft-rtl;
+            margin-right: $de-toc-dlg-style-input-margin-left;
+        }
+        .e-de-toc-table-div .e-de-toc-dlg-toc-level {
+            height: $e-de-toc-table-height;
+            margin-left: $de-toc-dlg-toc-level-margin-left;
+            width: 44px;
+        }
+        .e-de-toc-styles-table-div {
+            border: $de-toc-list-view-border solid $de-toc-list-view-border-color;
+            border-radius: $de-toc-styles-table-div-border-radius;
+            margin-top: $de-toc-styles-table-div-margin-top;
+            width: $de-toc-list-view-width;
+            height: $de-toc-table-list-view-height;
+        }
+        .e-de-toc-dlg-sub-level-heading {
+            font-size: $de-toc-dlg-sub-level-heading-font-size;
+        }
+        .e-de-toc-table-div {
+            height: $e-de-toc-table-div-height;
+            overflow-y: scroll;
+            width: $de-toc-table-div-width;
+        }
+        .e-de-toc-dlg-style-input {
+            margin-bottom: $de-toc-dlg-style-input-margin-bottom;
+            margin-left: $de-toc-dlg-style-input-margin-left;
+            width: $de-toc-dlg-style-input-width;
+        }
+        .e-de-toc-dlg-outline-levels {
+            margin-top: $de-toc-dlg-outline-levels-margin-top;
+            width: $de-toc-dlg-outline-levels-width;
+        }
+        .e-bookmark-textboxdiv .e-bookmark-textbox-input {
+            height: $de-bookmark-textbox-height;
+        }
+        .e-styles-dlgfields {
+            font-weight: $de-header-font-weight;
+            margin-bottom: $de-header-margin-bottom;
+        }
+        .e-tab .e-tab-header .e-toolbar-item .e-de-op-find-tab-header {
+            padding-left: $de-op-tab-header-padding-left;
+            padding-right: $de-op-tab-header-padding;
+        }
+        .e-tab .e-tab-header .e-toolbar-item .e-de-op-replace-tab-header {
+            padding-left: $de-op-tab-header-padding-left;
+            padding-right: $de-op-tab-header-padding;
+        }
+        .e-de-dlg-target .e-footer-content .e-list-dlg-font {
+            margin-left: $de-list-dlg-font-margin-left;
+        }
+        .e-bookmark-dlgfields {
+            font-weight: $de-header-font-weight;
+            font-size: $de-dlg-bkm-fld-fnt-size;
+            margin-bottom: $de-bookmark-dlgfields-margin-bottom;
+        }
+        .e-de-ui-wfloating-menu.e-de-ui-bullets-menu .e-de-ui-wfloating-menuitem-md {
+            height: $de-floating-menu-height;
+            padding: $de-floating-menu-padding;
+            width: $de-floating-menu-width;
+        }
+        .e-de-ui-wfloating-menu.e-de-ui-bullets-menu .e-de-ui-wfloating-bullet-menuitem-md {
+            height: $e-de-ui-wfloating-menu-height;
+            width: 45px;
+        }
+        .e-de-bullet-icon-size {
+            height: $e-de-bullet-icon-size-height;
+            width: 45px;
+        }
+        .e-de-ui-list-header-presetmenu {
+            cursor: pointer;
+            font-size: $de-ui-list-header-presetmenu-font-size;
+            line-height: $de-ui-list-header-presetmenu-line-height;
+            min-width: $de-ui-list-header-presetmenu-min-width;
+            overflow: hidden;
+            text-align: left;
+            white-space: nowrap;
+            width: 100%;
+            @if $skin-name=='tailwind' {
+                color: $icon-color;
+            }
+        }
+        .e-de-number-bullet-dlg .e-tab .e-content .e-item {
+            padding: $de-number-bullet-dlg-padding;
+        }
+        .e-de-number-bullet-dlg {
+            width: $de-bullet-numbered-dlg-width;
+        }
+        .e-de-style-numbered-list,
+        .e-de-ui-bullet-list-header-presetmenu {
+            height: $de-bullet-numbered-dlg-height;
+        }
+        .e-de-ui-bullet {
+            font-size: $de-ui-bullet-font-size;
+        }
+        .e-de-ui-list-header-presetmenu .e-de-ui-list-line {
+            border-bottom: $de-numbering-list-border-bottom solid $de-numbering-list-line-color;
+            margin-left: $de-numbering-list-margin-left;
+            width: 100%;
+        }
+        .e-de-ui-list-header-presetmenu div span {
+            color: $de-numbering-list-span-color;
+            display: inline-block;
+            vertical-align: middle;
+        }
+        .e-de-ui-wfloating-menu .e-de-ui-wfloating-menuitem,
+        .e-de-ui-wfloating-menu .e-de-ui-menuitem-none {
+            border: $de-ui-wfloating-menu-border;
+            box-shadow: inset 0 0 0 1px $de-numbering-list-border-color;
+            cursor: pointer;
+            height: $e-de-ui-menuitem-none-height;
+            margin: $de-ui-wfloating-menu;
+            padding: $de-ui-wfloating-padding;
+            width: 70px;
+        }
+        .e-de-ui-wfloating-menu {
+            padding: $de-ui-floating-menu-padding;
+        }
+        .e-de-list-thumbnail .e-de-list-items {
+            float: left;
+        }
+        .e-de-list-thumbnail .e-de-list-items {
+            background: $de-numbering-list-background-color;
+            border: $de-numbering-list-border solid transparent;
+            clear: initial;
+            display: inline-block;
+            height: auto;
+            margin: $de-numbering-list-margin;
+            text-align: center;
+            width: auto;
+        }
+        .e-de-list-items {
+            background: $de-numbering-list-background-color;
+            box-sizing: border-box;
+            cursor: pointer;
+            list-style: none;
+            padding: $de-numbering-list-paddng-top $de-numbering-list-padding-right;
+            position: relative;
+        }
+        .e-de-list-item-size {
+            font-size: $de-list-item-size-font-size;
+        }
+        .e-de-ui-wfloating-menu {
+            padding: $de-ui-floating-menu-padding;
+        }
+        .e-de-table-ppty-dlg-tabs {
+            height: $de-table-ppty-dlg-tabs-height;
+            position: relative;
+        }
+        .e-de-ui-bullet-list-header-presetmenu .e-de-list-thumbnail .e-de-list-active,
+        .e-de-style-numbered-list .e-de-list-thumbnail .e-de-list-active {
+            border-color: $de-table-align-active-color;
+        }
+        .e-de-rp-sub-content-div {
+            line-height: $de-rp-content-ln-ht;
+            font-size: $de-rp-font-size;
+            margin-bottom: $de-rp-margin-bottom;
+        }
+        .e-de-bullet-icons {
+            left: 50%;
+            position: absolute;
+            top: 50%;
+            transform: translate(-50%, -50%);
+        }
+        .e-de-header-footer-list {
+            color: $de-op-search-txt;
+        }
+        
+        .e-de-ltr-btn-div {
+            font-size: $de-ltr-btn-div-font-size;
+            @if $skin-name =='Material3' {
+                width: 100px;
+            }
+            @else {
+                width: 200px;
+            }
+        }
+        .e-de-tbl-rtl-btn-div {
+            font-size: $de-tbl-rtl-btn-div-font-size;
+            margin-right: $de-tbl-rtl-btn-div-margin-right;
+        }
+        .e-de-tbl-rtl-btn-div.e-de-rtl {
+            margin-left: $de-tbl-rtl-btn-div-margin-right;
+            margin-right: $de-tbl-rtl-btn-div-margin-rgt-rtl;
+        }
+        .e-de-tbl-ltr-btn-div {
+            font-size: $de-tbl-ltr-btn-div-font-size;
+        }
+        
+        .e-de-disabledbutton {
+            opacity: $de-paradialog-dir-div;
+            pointer-events: none;
+        }
+        .e-de-restrict-format {
+            margin-top: $de-restrict-format-margin-top;
+        }
+        .e-de-rp-format {
+            font-size: $de-rp-format-font-size;
+            @if $skin-name == 'FluentUI'{
+              margin-bottom: 16px;
+            } 
+            @else {
+              margin-bottom: $de-rp-format-margin-bottom;
+              opacity: 0.65;
+            }
+            font-weight: $de-header-font-weight;
+            @if $skin-name=='fluent2' { 
+                color: $de-op-title-clr;
+                font-size: 16px;
+            }
+        }
+        .e-de-rp-checkbox {
+            font-size: $de-rp-checkbox-font-size;
+        }
+        .e-de-rp-border {
+            margin-bottom: $de-rp-border-margin-bottom;
+            margin-top: $de-rp-border-margin-top;
+        }
+        .e-de-rp-header {
+            font-size: $de-rp-header-font-size;
+            font-weight: $de-header-font-weight;
+            opacity: 0.87;
+            color: $de-op-title-clr;
+            width: 75%;
+            @if $skin-name=='fluent2' { 
+                color:$de-sub-header-color;
+                font-size: 14px;
+            }
+        }
+        @if $skin-name !='tailwind' {
+            .e-de-rp-user .e-checkbox-wrapper {
+                width: auto;
+            }
+        }
+        .e-de-rp-nav-btn,
+        .e-de-rp-btn-enforce {
+            @if $skin-name !='tailwind' {
+                background: $de-rp-btn-bg-color;
+                font-size: $de-rp-btn-font-size;
+            }
+            opacity: 0.87;
+            border-radius: $de-rp-btn-border-radius;
+            box-shadow: $de-rp-btn-enforce-bx-shadow;
+            @if $skin-name=='bootstrap4' {
+                border-color: $de-cmt-separator;
+                box-shadow: none;
+                color: $de-cmt-pant-content-font;
+                opacity: 1;
+            }
+        }
+        .e-de-rp-nav-btn { 
+          width: auto;
+        }
+        .e-de-rp-btn-stop-enforce {
+            @if $skin-name !='tailwind' {
+                background: $de-rp-btn-bg-color;
+                font-size: $de-rp-btn-font-size;
+                opacity: 0.87;
+            }
+            border-radius: $de-rp-btn-border-radius;
+            box-shadow: $de-rp-btn-enforce-bx-shadow;
+            @if $skin-name=='bootstrap4' {
+                border-color: $de-cmt-separator;
+                box-shadow: none;
+                color: $de-cmt-pant-content-font;
+                opacity: 1;
+            }
+        }
+        .e-de-rp-sub-div {
+            border-bottom: $de-list-view-border-bottom solid $de-list-view;
+            padding: $de-rp-sub-div-padding;
+        }
+        .e-de-restrict-pane {
+            padding-left: $de-restrict-pane-padding-left;
+            padding-top: $de-restrict-pane-padding-top;
+            padding-right: $de-restrict-pane-padding-right;
+        }
+        .e-de-rp-whole-header {
+            padding: $de-rp-whole-header-padding;
+        }
+        .e-de-rp-user {
+            background: $de-numbering-list-background-color;
+            border: $de-list-view-border-bottom solid $de-list-view;
+            border-radius: $de-list-view-border-radius;
+            font-size: $de-list-view-font-size;
+            height: $e-de-rp-use-height;
+        }
+        .e-de-rp-enforce {
+            padding: $de-rp-enforce-padding;
+        }
+        .e-de-rp-enforce-nav {
+            margin: $de-rp-enforce-nav-margin-top $de-rp-enforce-nav-margin $de-rp-enforce-nav-margin $de-rp-enforce-nav-margin;
+        }
+        .e-de-enforce-dlg-title {
+            font-size: $de-enforce-dlg-title-fnt-size;
+            font-weight: $de-header-font-weight;
+            margin-bottom: $de-hyperlink-dlg-margin-bottom;
+        }
+        .e-de-enforce .e-de-enforce-dlg-input {
+            height: $de-hyperlink-dlg-input-height;
+            width: 300px;
+        }
+        .e-de-enforce-dlg-input .e-input:focus {
+            @if $skin-name =='fluent2'  {
+                border-color: $content-bg-color-alt1;
+                border-radius: 5px;
+                box-shadow: $border;
+            }
+        }
+        .e-de-user-add-btn {
+            @if ($skin-name !='bootstrap4' and $skin-name !='tailwind' and $skin-name !='bootstrap5') {
+                background: $de-style-toggle-btn-color;
+            }
+            border-radius: $de-user-add-btn-border-radius;
+            width: 74px;
+        }
+        .e-de-user-dlg .e-de-user-dlg-textbox-input {
+            margin-right: $de-user-dlg-textbox-input-mrgn-right;
+            width: 304px;
+        }
+        .e-de-user-dlg-list.e-de-rtl .e-de-user-dlg-textbox-input {
+            margin-right: $de-user-dlg-list-margin-right;
+            margin-left: $de-user-dlg-textbox-input-mrgn-right;
+        }
+        .e-de-user-dlg-list {
+            margin-bottom: $de-user-dlg-list-mrgn-btm;
+            display: inline-flex;
+        }
+        .e-de-user-listview {
+            border: $de-list-view-border solid $de-list-view;
+            border-radius: $de-list-view-border-radius;
+            height: $e-de-user-listview-height;
+        }
+        .e-de-user-dlg-user {
+            margin-bottom: $de-user-dlg-user-mrgn-btm;
+            @if $skin-name=='tailwind' {
+                color: $de-dlg-heading-main-header;
+                font-weight: $de-para-dlg-heading-font-weight;
+            }
+        }
+        .e-user-delete {
+            float: left;
+        }
+        .e-de-unprotect-dlg-title {
+            font-size: $de-unprotect-dlg-title-fnt-size;
+            margin-bottom: $de-unprotect-dlg-title-mrgn-btm;
+        }
+        .e-de-rp-stop-div1 {
+            @if $skin-name != 'FluentUI' {
+              opacity: 0.87;
+            }
+            padding: $de-rp-stop-div1-padding-top $de-rp-stop-div1-padding-right $de-rp-stop-div1-padding-bottom $de-rp-stop-div1-padding-left;
+            font-weight: $de-rp-stop-div1-font-weight;
+            border-bottom: $de-rp-stop-div1-border-bottom solid #e0e0e0;
+        }
+        .e-de-rp-stop-div2 {
+            padding: $de-rp-stop-div2-padding-top $de-rp-stop-div2-padding-right $de-rp-stop-div2-padding-bottom;
+        }
+        .e-de-rp-close-icon {
+            float: right;
+            position: relative;
+            top: $de-rp-close-icon-top;
+            right: $de-rp-close-icon-right;
+        }
+        .e-de-restrict-pane {
+            height: $e-de-restrict-pane-height;
+            overflow: auto;
+            overflow-x: hidden;
+            width: $de-rp-width;
+        }
+        .e-de-rp-nav-lbl {
+            font-size: $de-rp-nav-lbl-font-size;
+            margin: $de-rp-nav-lbl-margin-top $de-rp-nav-lbl-margin-right;
+        }
+        .e-documenteditor-optionspane {
+            height: $e-documenteditor-optionspane-height;
+        }
+        .e-de-cmt-pane {
+            background-color: inherit;
+            color: $de-cmt-pant-content-font;
+        }
+        .e-de-cp-whole-header {
+            padding: $de-cp-whole-header-padding;
+        }
+        .e-de-cp-header {
+            font-size: $de-cp-header-font-size;
+            font-weight: $de-cp-header-font-weight;
+            opacity: 0.87;
+            width: 75%;
+        }
+        .e-de-cmt-container {
+            height: auto;
+            padding: $de-cmt-container-padding;
+            overflow: auto;
+        }
+        .e-de-cmt-sub-container {
+            @if $skin-name !='tailwind' and $skin-name != 'FluentUI' {
+                background-color: $de-background;
+            }
+            @if $skin-name !='Material3' {
+                border: $de-cmt-separator-border solid $de-cmt-separator;
+                border-radius: $de-cmt-sub-container-border-radius;
+            }
+            @if $skin-name=='fluent2' {
+                background-color: $de-ctnr-prop-bg-clr;
+            } 
+            margin: $de-cmt-sub-container-margin;
+            padding: $de-cmt-sub-container-padding;
+        }
+        .e-de-cmt-view {
+            cursor: default;
+        }
+        .e-de-cmt-sub-container.e-de-cmt-selection {
+            border-left: $de-cmt-sub-container-cmt-selection-border-left solid $de-cmt-selection;
+            padding-left: $de-cmt-sub-container-padding-left;
+        }
+        .e-de-tc-outer {
+            border-bottom: $de-tc-outer-border-bottom solid #d8d8d8;
+        }
+        .e-de-tc-pane {
+            color: $de-cmt-pant-content-font;
+        }
+        .e-de-trckchanges-inner {
+            cursor: default;
+            margin: $de-trckchanges-inner-mrgn;
+            padding-left: $de-trckchanges-inner-padding-left;
+            padding-right: $de-trckchanges-inner-padding-right;
+            padding-bottom: $de-trckchanges-inner-padding-bottom;
+        }
+        .e-de-trckchanges-inner:hover {
+            border-left: $de-trckchanges-inner-border-left solid $de-cmt-selection;
+            cursor: default;
+            margin: $de-trckchanges-inner-mrgn;
+            padding-left: $de-trckchanges-inner-hover-padding-left;
+            padding-right: $de-trckchanges-inner-padding-right;
+            padding-bottom: $de-trckchanges-inner-padding-bottom;
+        }
+        .e-de-trckchanges-inner.e-de-trckchanges-inner-select {
+            border-left: $de-trckchanges-inner-select-border-left solid $de-cmt-selection;
+            cursor: default;
+            margin: $de-trckchanges-inner-mrgn;
+            padding-left: $de-trckchanges-inner-select-padding-left;
+            padding-right: $de-trckchanges-inner-select-padding-right;
+            padding-bottom: $de-trckchanges-inner-select-padding-bottom;
+        }
+        .e-de-tc-no-chng {
+            color: $de-input-color;
+            font-size: $de-input-font-size;
+            opacity: 65%;
+            margin: $de-input-margin-top $de-input-margin-right;
+            text-align: center;
+        }
+        .e-tc-btn-bg-clr.e-btn:not(:hover):not(.e-active) {
+            background-color: inherit;
+            border-color: transparent;
+            color: inherit;
+        }
+        .e-tc-nvgte.e-icon-btn {
+            text-align: center;
+            vertical-align: middle;
+        }
+        .e-de-track-span-user {
+            display: inline-flex;
+            overflow: hidden;
+            width: 110px;
+            @if $skin-name=='fluent2' {
+                padding-left: $de-changes-padding-left;
+            }
+        }
+        .e-de-track-span-view {
+            display: inline-flex;
+            overflow: hidden;
+            width: 50px;
+        }
+        .e-btn.e-outline.e-de-track-accept-button {
+            min-width: 66px;
+            padding: $de-tc-btn-padding-top $de-tc-btn-padding;
+            text-transform: initial;
+        }
+        .e-btn.e-outline.e-de-track-accept-button:hover {
+            min-width: 66px; 
+            padding: $de-tc-btn-padding-top $de-tc-btn-padding;
+            text-transform: initial;
+        }
+        .e-btn.e-outline.e-de-track-reject-button {
+            min-width: 64px;
+            padding: $de-track-reject-button-top $de-track-reject-button-right;
+            margin-left: $de-track-reject-button-right-margin-left;
+            text-transform: initial;
+        }
+        .e-btn.e-outline.e-de-track-reject-button:hover {
+            min-width: 64px; 
+            padding: $de-track-reject-button-top $de-track-reject-button-right;
+            margin-left: $de-track-reject-button-right-margin-left;
+            text-transform: initial;
+        }
+        .e-de-track-chngs-count {
+            font-size: $de-track-chngs-count-font-size;
+            margin-left: $de-track-chngs-count-margin-left;
+            opacity: 0.87;
+            padding-top: $de-track-chngs-count-padding-top;
+            white-space: nowrap;
+        }
+        .e-de-track-insert {
+            color: $de-track-chngs-sucs-bg-color;
+            font-size: $de-track-chngs-sucs-font-size;
+            opacity: 100%;
+        }
+        .e-de-track-delete {
+            color: $de-track-chngs-rejct-bg-color;
+            font-size: $de-track-chngs-rejct-font-size;
+            opacity: 100%;
+        }
+        @if $skin-name !='tailwind' {
+            .e-de-track-toolbar {
+                border-bottom: $de-track-toolbar-border-bottom solid #d8d8d8;
+                border-top: $de-track-toolbar-border-top solid #d8d8d8;
+                padding-bottom: $de-tc-tlbr-padding-btm;
+            }
+            .e-de-track-pane-drop-btn {
+                padding-left: $de-track-pane-drop-btn-padding-left;
+                padding-right: $de-track-pane-drop-btn-padding-right;
+                @if $skin-name =='Material3' {
+                    padding-top: 10px !important;
+                }
+                @else {
+                    padding-top: $de-track-pane-drop-btn-padding-top;
+                }
+                font-size: $de-track-pane-drop-btn-font-size;
+                font-weight: $de-header-font-weight;
+            }
+            @if ($skin-name =='fabric' or $skin-name =='bootstrap') {
+                .e-de-track-toolbar .e-de-track-pane-drop-btn {
+                    padding-top: 4px !important;
+                }
+            }
+        }
+        .e-toolbar-item.e-de-track-toolbar-overlay.e-template.e-overlay {
+            opacity: 1;
+            font-weight: $de-header-font-weight;
+            font-size: $de-cmt-author-nme-fnt-size;
+        }
+        .e-de-track-date {
+            font-size: $de-cmt-date-fnt-size;
+            margin-top: $de-cmt-date-margin-top;
+            opacity: 0.67;
+        }
+        .e-de-track-usernme-div {
+            justify-content: space-between;
+            padding-top: $de-track-usernme-div-padding-top;
+        }
+        .e-de-track-user-nme {
+            font-size: $de-cmt-author-nme-fnt-size;
+            font-weight: $de-cmt-author-nme-font-weight;
+            padding-left: $de-track-user-nme-padding-left;
+        }
+        .e-de-track-chngs-text {
+            line-height: $de-track-chngs-text-line-height;
+            overflow: hidden;
+            word-wrap: break-word;
+            text-overflow: ellipsis;
+            font-size: $de-cmt-author-nme-fnt-size;
+            min-height: $e-de-track-chngs-text-min-height;
+            padding-top: $de-track-chngs-text-padding-top;
+            margin-bottom: $de-track-chngs-text-margin-bottom;
+        }
+        .e-de-track-chng-table {
+            border-collapse: collapse;
+            border-spacing: $de-track-chng-table-border-spacing;
+            opacity: 70%;
+            width: 100%;
+        }
+        .e-de-tc-tble-cell {
+            border: $de-tc-tble-cell-border solid;
+            height: $e-de-tc-tble-cell-height;
+        }
+        .e-de-tc-shrink-img {
+            height: $e-de-tc-shrink-img-height;
+            margin: $de-tc-shrink-img-margin-top $de-tc-shrink-img-margin-right;
+            vertical-align: middle;
+            width: 50px;
+        }
+        .e-de-tc-field {
+            background-color: rgb(206, 205, 205);
+            margin: $de-tc-field-margin-top $de-tc-field-margin-right;
+        }
+        .e-de-tc-hide-para-mark .e-de-tc-outer .e-de-trckchanges-inner .e-de-track-chngs-text .e-de-tc-pmark {
+            display: none;
+        }
+        .e-de-tc-pmark {
+            font-size: $de-tc-pmark-font-size;
+            font-family: Roboto-Regular;
+            font-weight: $de-tc-pmark-font-weight;
+            color: rgb(1, 22, 119);
+            margin: $de-tc-pmark-margin-top $de-tc-pmark-margin-right;
+        }
+        .e-de-cmt-sub-container:not(.e-de-cmt-selection):not(.e-de-cmt-reply):hover {
+            border-left: $de-cmt-selection-border-left solid $de-cmt-selection;
+            padding-left: $de-cmt-sub-container-hover-padding-left;
+        }
+        .e-de-cmt-author {
+            align-items: center;
+            @if $skin-name == 'bootstrap5' {
+              margin-bottom: 12px;
+            }
+            @else {
+              margin-bottom: $de-cmt-author-margin-bottom;
+            }
+        }
+        .e-de-cmt-author-name {
+            font-size: $de-cmt-author-nme-fnt-size;
+            font-weight: $de-header-font-weight;
+            padding-left: $de-cmt-author-nme-padding-left;
+            width: 90%;
+        }
+        .e-de-cp-option.e-btn.e-icon-btn {
+            background-color: inherit;
+            border: none;
+            color: inherit;
+            float: right;
+            height: $de-cmt-opt-size;
+            padding: $de-cp-option-padding;
+            width: $de-cmt-opt-size;
+            @if $skin-name=='bootstrap4' {
+                margin-top: -4px;
+            }
+            @if $skin-name=='bootstrap' {
+                margin-top: -8px;
+            }
+        }
+        .e-de-cp-option.e-btn.e-icon-btn span {
+            margin-top: $de-cp-option-margin-top;
+            background: $de-op-bg-color;
+        }
+        .e-de-cmt-view:hover {
+            .e-de-cp-option {
+                display: block;
+            }
+        }
+        .e-de-cmt-readonly {
+            font-size: $de-cmt-author-nme-fnt-size;
+            @if $skin-name != 'bootstrap5' {
+                padding-top: $de-cmt-readonly-padding-top;
+            }
+            word-break: break-word;
+        }
+        .e-de-cmt-date {
+            font-size: $de-cmt-date-fnt-size;
+            margin-top: $de-cmt-date-mrgn-top;
+            opacity: 0.67;
+        }
+        .e-de-cmt-sub-container.e-de-cmt-reply {
+            border: none;
+            border-top: $de-cmt-separator-border-top solid $de-cmt-separator;
+            border-radius: $de-cmt-separator-border-radius;
+            margin: $de-rply-cmt-sub-container-margin;
+            padding: $de-cmt-separator-padding;
+            .e-de-cmt-view {
+                margin-top: $de-cmt-view-mrgn-top;
+            }
+        }
+        .e-de-cmt-textarea.e-input {
+            color: $de-cmt-pant-content-font;
+            @if $skin-name == 'tailwind' {
+                font-size: $de-cmt-author-nme-fnt-size;
+            }
+            @else {
+                font-size: $de-cmt-font-size;
+            }
+            line-height: normal;
+            min-height: $e-de-cmt-textarea-min-height;
+            overflow: hidden;
+            padding-top: $e-de-cmt-textarea-padding-top;
+            resize: none;
+        }
+        .e-de-cmt-textarea.e-input:focus {
+            @if $skin-name == 'fluent2' {
+                border-color: $content-bg-color-alt1;
+                border-radius: 5px;
+                box-shadow: $border;
+            }
+        }
+        .e-de-cmt-textarea:empty::before {
+            content: attr(placeholder);
+            opacity: 0.5;
+        }
+        .e-de-cmt-action-button {
+            text-align: right;
+            margin-top: $de-reply-footer-margin-top;
+        }
+        .e-de-cmt-post-btn.e-btn.e-flat,
+        .e-de-cmt-cancel-btn.e-btn.e-flat {
+            height: $de-cmt-post-btn-ht;
+            margin-left: $de-cmt-post-btn-margin-left;
+            width: $de-cmt-post-btn-wt;
+            @if $skin-name == 'tailwind' {
+                padding-top: $de-cmt-cancel-btn-padding-top;
+                padding-left: $de-cmt-cancel-btn-padding-left;
+            }
+        }
+        .e-de-cmt-resolved {
+            .e-de-cmt-author-name,
+            .e-de-cmt-readonly,
+            e-de-cmt-date {
+                opacity: 0.67;
+            }
+            .e-de-cmt-rply-view {
+                display: none;
+            }
+            .e-de-cmt-resolve-btn {
+                display: block;
+                margin-top: $de-cmt-resolve-btn-margin-top;
+                text-align: right;
+                @if ($skin-name=='fluent2') {
+                    font-size: 12px;
+                    color: $de-sub-header-color;
+                }
+            }
+        }
+        .e-de-cmt-sub-container.e-de-cmt-resolved.e-de-cmt-selection {
+            border-left: $de-cmt-selection-rslv-border-left solid $de-cmt-selection-rslv;
+        }
+        .e-de-cmt-sub-container.e-de-cmt-resolved:not(.e-de-cmt-selection):not(.e-de-cmt-reply):hover {
+            border-left: $de-cmt-selection-rslv-border-lft solid $de-cmt-selection-rslv;
+        }
+        .e-de-lock-mark {
+            cursor: default;
+            color: $de-op-icon-color; 
+            font-size: $de-lock-mark-font-size;
+            height: $e-de-lock-mark-height;
+            pointer-events: all;
+            width: 13px;
+        }
+        .e-de-cmt-mark {
+            cursor: default;
+            color: $de-op-icon-color; 
+            font-size: $de-lock-mark-font-size;
+            height: $e-de-cmt-mark-height;
+            pointer-events: all;
+            width: 13px;
+             :hover {
+                color: $de-cmt-selection;
+            }
+        }
+        .e-de-cmt-mark.e-de-cmt-mark-selected,
+        .e-de-cmt-mark.e-de-cmt-mark-hover {
+            color: $de-cmt-selection;
+        }
+        .e-de-cmt-no-cmt {
+            margin-left: $de-cmt-no-cmt-margin-left;
+            margin-top: $de-cmt-no-cmt-margin-top;
+            font-size: $de-cmt-no-cmt-font-size;
+        }
+        .e-de-cmt-drawer-cnt {
+            font-size: $de-cmt-drawer-cnt-font-size;
+            height: $e-de-cmt-drawer-cnt-height;
+            margin-top: $de-cmt-drawer-cnt-margin-top;
+        }
+        .e-de-cmt-drawer {
+            cursor: pointer;
+            float: right;
+            opacity: 0.54;
+            margin-right: $de-cmt-drawer-margin-right;
+            margin-top: $de-cmt-drawer-margin-top;
+        }
+        .e-de-cmt-rply-view {
+            margin-top: $de-cmt-textbox-top-margin;
+        }
+        .e-de-cmt-resolve-btn {
+            display: none;
+        }
+        @if $skin-name=='bootstrap4' {
+            textarea.e-de-cmt-textarea {
+                height: 28px;
+            }
+        }
+        .e-rtl {
+            .e-de-cmt-pane {
+                border-left: none;
+                border-right: $de-op-border-right solid $de-op-border-clr;
+            }
+            .e-de-rp-close-icon {
+                float: left;
+                right: $de-rp-close-icon-right-rtl;
+            }
+            .e-de-cp-option.e-btn.e-icon-btn {
+                float: left;
+            }
+            .e-de-cmt-sub-container.e-de-cmt-selection {
+                border-left: $de-cmt-separator-border-left solid $de-cmt-separator;
+                border-right: $de-cmt-selection-border-right solid $de-cmt-selection;
+                padding-left: $de-cmt-sub-container-padding;
+                padding-right: $de-cmt-sub-container-padding-left;
+            }
+            .e-de-cmt-sub-container:not(.e-de-cmt-selection):not(.e-de-cmt-reply):hover {
+                border-left: $de-cmt-separator-border-left solid $de-cmt-separator;
+                border-right: $de-cmt-selection-border-rgt solid $de-cmt-selection;
+                padding-left: $de-cmt-sub-container-padding;
+                padding-right: $de-cmt-sub-container-hover-padding-left;
+            }
+            .e-de-cmt-sub-container.e-de-cmt-resolved.e-de-cmt-selection {
+                border-right: $de-cmt-selection-rslv-border-right solid $de-cmt-selection-rslv;
+            }
+            .e-de-cmt-sub-container.e-de-cmt-resolved:not(.e-de-cmt-selection):not(.e-de-cmt-reply):hover {
+                border-right: $de-cmt-selection-rslv-border-rgt solid $de-cmt-selection-rslv;
+            }
+            .e-de-cmt-action-button {
+                text-align: left;
+            }
+            .e-de-cmt-no-cmt {
+                margin-left: auto;
+                margin-right: $de-cmt-no-cmt-margin-right;
+            }
+            .e-de-cmt-drawer {
+                float: left;
+                margin-left: $de-cmt-drawer-margin-left;
+                margin-right: auto;
+            }
+            .e-de-cmt-resolve-btn {
+                text-align: left;
+            }
+        }
+        .e-de-close-icon.e-btn {
+            background-color: $dialog-btn-bg-color !important;
+            border-color: $dialog-btn-border-color !important;
+            border-radius: $dialog-headericon-border-radius;
+            color: $dialog-btn-clr;
+            border: none;
+            &:active {
+                background-color: $dialog-closeicon-btn-active-color !important;
+                border-color: $dialog-btn-border-color !important;
+                box-shadow: none;
+            }
+            &:hover {
+                background-color: $dialog-closeicon-btn-hover-color !important;
+                box-shadow: none;
+                color: $dialog-active-icon-color;
+                cursor: $e-de-close-icon-cursor;
+                border: none;
+            }
+        }
+        .e-btn.e-de-close-icon:hover span {
+            cursor: pointer;
+            color: $dialog-active-icon-color;
+        }
+        .e-de-para-dlg-right-sub-container-blazor {
+            top: $de-para-dlg-right-sub-container-top-margin;
+        }
+        .e-de-rp-mu-btn {
+            margin-top: $de-rp-mu-btn-margin-top;
+        }
+        .e-de-table-dialog-row-height {
+            padding-top: $de-table-row-height-padding;
+        }
+        .e-de-tablecell-dialog-alignment-icon {
+            width: $de-table-alignment-icon-width;
+            height: $de-table-alignment-icon-height;
+            margin: $de-table-alignment-icon-margin;
+        }
+        .e-de-table-dia-indent-from-left {
+            right: 45px;
+        }
+        .e-de-table-dia-align-div {
+            border: $de-table-align-border-width solid $de-table-align-border-color;
+            display: inline-block;
+            height: $de-table-dia-align-height;
+            margin-right: $de-table-align-margin-right;
+            width: $de-table-dia-align-width;
+        }
+        .e-de-table-dialog-alignment-icon {
+            margin: $de-table-alignment-icon-margin;
+            height: $de-table-dia-align-icon-height;
+        }
+        .e-de-table-border-setting-genral {
+            margin-right: $de-table-align-margin-right;
+        }
+        .e-de-table-border-clr-left-container {
+             padding-right: $de-border-dlg-clr-padding-right;
+        }
+        .e-de-table-border-clr-heading {
+            font-size: $de-border-dlg-setting-label-fontsize;
+            font-weight: $de-border-dlg-border-label-fontweight;
+            padding-bottom: $de-border-dlg-clr-radius-bottom;
+        }
+        .e-de-table-border-icon-container {
+            margin-top: $de-table-border-icon-container-margin-top;
+            margin-right: $de-table-bdr-icon-container-margin-right;
+        }
+        .e-de-table-border-preview-container {
+            padding-left: $de-border-dlg-preview-padding-left;
+        }
+        .e-de-table-dlg-alignment-heading {
+            color: $de-dlg-heading-main-header;
+            display: block;
+            font-size: $de-para-dlg-heading-font-size;
+            font-weight: $de-par-dlg-hdr-weight;
+            margin-bottom: $de-tbl-dlg-align-padding-bottom;
+            @if $skin-name == 'tailwind' {
+              line-height: 22px;
+            }
+          }
+
+        .e-rtl{
+            .e-de-cmt-author-name {
+                padding-left: $de-cmt-author-name-padding-lft;
+                padding-right: $de-cmt-author-nme-padding-left;
+            }
+            .e-de-cmt-post-btn.e-btn.e-flat,
+            .e-de-cmt-cancel-btn.e-btn.e-flat{
+                @if $skin-name == 'tailwind' {
+                    padding-bottom: $de-cmt-cancel-btn-padding-top;
+                    padding-right: $de-cmt-cancel-btn-padding-left;
+                }
+            }
+            .e-de-ok-button {
+                margin-right: $de-ok-button-margin-right;
+                margin-left: $de-ok-insert-button-margin-right;
+            }
+            .e-de-table-dia-align-div.e-de-rtl {
+                margin-left: $de-table-align-margin-right;
+                margin-right: $de-table-align-margin-rgt-rtl;
+            }
+            .e-de-table-border-clr-left-container {
+                padding-right: $de-border-dlg-clr-padding-rgt;
+                padding-left: $de-border-dlg-clr-padding-right;
+            }
+            .e-de-table-border-preview-container {
+                padding-right: $de-border-dlg-preview-padding-left;
+                padding-left: $de-border-dlg-preview-padding-lft;
+            }
+            .e-de-table-border-setting-genral {
+                margin-right: $de-table-border-setting-genral-margin-right;
+                margin-left: $de-table-align-margin-right;
+            }
+            .e-de-table-border-icon-container {
+                margin-right: $de-table-border-icon-container-margin-right;
+                margin-left: $de-table-border-icon-container-margin-left;
+            }
+            .e-de-table-border-preview {
+                width: 23px;
+              }
+            .e-de-table-setting-labels-heading {
+                margin-left: $de-table-setting-labels-heading-margin-left;
+                margin-right: $de-table-setting-labels-heading-margin-right;
+            }
+        }
+        .e-de-style-paragraph-indent-group-button .e-btn.e-active,
+        .e-de-style-paragraph-group-button .e-btn.e-active,
+        .e-de-style-font-group-button .e-btn.e-active {
+            @if $skin-name =='fluent2' {
+                background-color: var(--color-sf-content-bg-color-pressed);
+                color: var(--color-sf-toolbar-icon-color);
+            }
+        }
+        .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
+            @if $skin-name == 'fluent2' {
+               margin-left: 0px;
+               margin-right: 0px;
+            }
+        }
+        .e-de-user-info.e-de-user-name-collapse span {
+            transition-property: height, min-width, max-width, width, border-radius, padding;
+            transition-duration: 200ms;
+            transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: $e-de-user-name-collapse-height;
+            width: 6px;
+            min-width: 0px;
+            max-width: 6px;
+            border-radius: $de-user-info-border-radius;
+            padding: $de-user-info-padding;
+        }
+        .e-de-user-info.e-de-user-name-expended span {
+            transition-property: height, width, min-width, max-width, border-radius, padding;
+            transition-duration: 300ms;
+            transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+            position: absolute;
+            bottom: 0px;
+            height: $e-de-user-name-expended-height;
+            line-height: $e-de-user-name-expended-line-height;
+            min-width: 44px;
+            max-width: auto;
+            padding: $de-user-name-expended-padding-top $de-user-name-expended-padding-right;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: white;
+        }
+}