@syncfusion/ej2-angular-documenteditor 20.1.60 → 20.2.36

package/styles/document-editor/_theme.scss

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