@syncfusion/ej2-angular-documenteditor 20.2.39 → 20.2.40-ngcc

package/styles/document-editor/_theme.scss

@@ -1,3391 +0,0 @@
-@include export-module('documenteditor-theme') {
-    /* stylelint-disable */
-    .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' {
-            .e-de-style-font-color-picker .e-split-btn-wrapper .e-split-colorpicker.e-split-btn,
-            .e-de-style-font-color-picker .e-btn.e-icon-btn,
-            .e-de-dlg-clr-picker .e-split-btn-wrapper .e-split-colorpicker.e-split-btn,
-            .e-de-dlg-clr-picker .e-btn.e-icon-btn,
-            .e-de-font-dlg-display .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn,
-            .e-de-font-dlg-display .e-colorpicker-wrapper .e-btn.e-icon-btn {
-                padding: 4px 8px !important;
-            }
-
-            .e-de-rp-close-icon.e-btn {
-                background: $de-rp-btn-bg-color;
-                border: 0;
-                color: $de-cmt-pant-content-font;
-                opacity: 1;
-            }
-
-            .e-de-toc-dlg-style-input {
-                margin-top: 18px;
-            }
-            .e-de-list-container {
-                background: $de-style-btn-color !important;
-            }
-
-            .e-documenteditor .e-de-op-close-button {
-                top: 10px;
-            }
-            .e-de-styles,
-            .e-de-bookmark {
-                margin-top: 0 !important;
-            }
-
-            .e-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;
-        }
-    }
-    .e-de-dlg-spellcheck-listview {
-        @if $skin-name !='tailwind' {
-            border: 1px solid $de-spellcheck-listview-border-color;
-            border-radius: 2px !important;
-        }
-        height: $de-spellcheck-listview-height !important;
-        margin-right: $de-bookmark-list-margin-right;
-        margin-top: 8px;
-        position: relative;
-        float: left;
-        width:$de-spellcheck-list-width;
-    }
-    .e-de-dlg-spellcheck-listview.e-de-rtl {
-        float: right;
-    }
-    .e-de-spellcheck-error-container {
-        height: $de-spellcheck-container-height;
-        margin-bottom: $de-spellcheck-container-gap;
-        display: flex;
-    }
-    .e-de-spellcheck-suggestion-container {
-       // height: 140px;
-        height: $de-spellcheck-container-height;
-        margin-bottom: $de-spellcheck-container-gap;
-        display: flex;
-    }
-    .e-dlg-spellcheck-listitem {
-        font-size: 15px !important;
-    }
-    //  .e-de-dlg-suggestListView {
-    //   position:absolute;
-    //   width: 343px;
-    //   height: 124px !important;
-    //   margin-top: 8px;
-    // }
-    .e-de-spellcheck-btncontainer {
-        margin-top: 8px;
-        position: relative;
-        width:$de-spellcheck-btn-container-width;
-        float: right;
-    }
-    .e-de-spellcheck-btncontainer.e-de-rtl {
-        float: left;
-    }
-    .e-de-spellcheck-btn {
-        //height: 36px;
-        margin-bottom:$de-padding-half-bigger;
-        width:$de-spellcheck-btn-width;
-    }
-    .e-de-dlg-spellchecker-subheader {
-        margin-top: 8px;
-        @if $skin-name=='tailwind' {
-            font-size: 14px;
-            margin-top: 4px;
-        }
-        @else {
-            font-size: 15px;
-        }
-    }
-    .e-de-dlg-spellchecker-subheaderbtm {
-        @if $skin-name=='tailwind' {
-            font-size: 14px;
-        }
-        @else {
-            font-size: 15px;
-        }
-    }
-    .e-de-list-dlg {
-        height: $de-list-dlg-height;
-        width: $de-list-dlg-width;
-    }
-    .e-de-save-dlg {
-        height: $de-save-dlg-height;
-        width: $de-save-dlg-width;
-    }
-    .e-de-table-properties-dlg {
-        //height: $de-table-ppty-dlg-height;
-        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;
-                }
-            }
-        }
-}