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

package/styles/rich-text-editor/_layout.scss

@@ -0,0 +1,2767 @@
+@use 'variables' as *;
+@include export-module('richtexteditor-layout') {
+
+  /*! tab layout */
+
+  .e-richtexteditor {
+    display: block;
+    position: relative;
+
+    .e-rte-container {
+      display: flex;
+      flex-direction: column;
+      width: $rte-container-width;
+      height: $rte-container-height;
+      content: 'light-theme';
+      @if $theme-name == 'bootstrap-dark' or $theme-name == 'material-dark' or $theme-name == 'fabric-dark' or $theme-name == 'material3-dark' or $theme-name == 'fluent2-dark' or $theme-name == 'fluent2-highcontrast' or $theme-name == 'highcontrast' or $theme-name == 'botstrap5-dark' or $theme-name == 'tailwind-dark' or $theme-name == 'fluentui-dark' or $theme-name == 'tailwind3-dark' {
+        content: 'dark-theme';
+      }
+      &.e-count-enabled,
+      &.e-resize-enabled {
+        .e-content {
+          padding-bottom: $rte-count-resize-enabled-content-padding-bottom;
+        }
+      }
+  
+      &.e-source-code-enabled {
+        .e-rte-content {
+          display: none;
+        }
+  
+        .e-source-content {
+          display: block;
+          overflow: hidden;
+        }
+      }
+
+      &.e-rte-tb-bottom {
+        .e-rte-content {
+          margin-bottom: $rte-tb-bottom-content-margin-bottom;
+        }
+      }
+    }
+  
+    .e-rte-content {
+      flex-grow: 1;
+  
+      .e-rte-placeholder.e-placeholder-enabled {
+        display: block;
+        font-size: $rte-content-font-size;
+      }
+      .e-row-wrapper,
+      .e-col-wrapper,
+      .e-table-wrapper {
+        user-select: none;
+        position: absolute;
+        cursor: pointer;
+        .e-icons.e-drag-and-drop {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 4px 0 0 4px;
+          &.e-rtl {
+            border-radius: 0 4px 4px 0;
+          }
+          &:hover {
+            background: $rte-table-gripper-hover-bg;
+          }
+          &.e-active {
+            background-color: $rte-table-gripper-active-bg;
+            color: $rte-table-gripper-active-color;
+          }
+        }
+        .e-icons.e-move {
+          border-radius: 50%;
+          &:hover {
+            background: $rte-table-gripper-hover-bg;
+          }
+          &.e-active {
+            background-color: $rte-table-gripper-active-bg;
+            color: $rte-table-gripper-active-color;
+          }
+        }
+      }
+      .e-col-wrapper .e-icons.e-drag-and-drop {
+        border-radius: 4px 4px 0 0;
+        &::before {
+          transform: rotate(90deg);
+        }
+      }
+    }
+  
+    .e-source-content {
+      display: none;
+    }
+
+    & textarea.e-content {
+      border: $rte-content-textarea-border;
+      display: block;
+      height: $rte-content-textarea-height;
+      margin: $rte-content-textarea-margin;
+      outline: 0;
+      padding: $rte-content-textarea-padding;
+      resize: none;
+      width: $rte-content-textarea-width;
+    }
+
+    & .e-rte-hidden {
+      display: none;
+    }
+
+    &.e-disabled {
+      pointer-events: none;
+    }
+
+    &.e-rte-full-screen {
+      bottom: 0;
+      height: $rte-full-screen-height !important; /* stylelint-disable-line declaration-no-important */
+      left: 0;
+      overflow: auto;
+      position: fixed;
+      right: 0;
+      top: 0;
+      width: $rte-full-screen-width !important; /* stylelint-disable-line declaration-no-important */
+      z-index: 999;
+
+      .e-resize-handle {
+        display: none;
+      }
+
+      iframe {
+        height: calc(100% - 42px);
+      }
+
+      .e-rte-edit-table {
+        max-height: $rte-table-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
+      }
+
+      .e-rte-edit-table-prop-dialog {
+        max-height: $rte-edit-table-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
+      }
+
+      .e-rte-link-dialog {
+        max-height: $rte-link-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
+      }
+
+      .e-rte-img-dialog {
+        max-height: $rte-img-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
+      }
+
+      .e-rte-img-link-dialog {
+        max-height: $rte-img-link-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
+      }
+
+      .e-rte-img-size-dialog {
+        max-height: $rte-img-size-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
+      }
+
+      .e-rte-img-alt-dialog {
+        max-height: $rte-img-alt-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
+
+    &.e-rtl .e-rte-tb-bottom .e-rte-character-count {
+      text-align: left;
+    }
+
+    &.e-rtl .e-rte-character-count {
+      margin-right: $rte-character-count-rtl-margin-right;
+      padding-left: $rte-character-count-padding-left;
+      padding-right: $rte-character-count-padding-right;
+    }
+
+    &.e-rtl .e-rte-content .e-content blockquote {
+      padding-left: $rte-blockquote-padding-left;
+      padding-right: $rte-blockquote-padding-right;
+    }
+
+    .e-rte-toolbar {
+
+      @if $skin-name == 'bootstrap5' {
+        &.e-toolbar .e-hor-nav {
+          min-height: $toolbar-expand-icon-min-height;
+        }
+      }
+
+      .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-item:first-child {
+        margin-left: $rte-toolbar-item-first-child-margin-left;
+      }
+
+      .e-hor-nav.e-expended-nav {
+        height: $rte-expended-nav-min-height; //used toolbar component nav default min-height
+        min-height: $rte-expended-nav-min-height; //used toolbar component nav default min-height
+      }
+    }
+
+    .e-rte-toolbar.e-rte-tb-mobile .e-toolbar-multirow {
+      display: inline-block;
+      margin-left: $rte-toolbar-multirow-margin-left;
+      margin-right: $rte-toolbar-multirow-margin-right;
+      overflow-x: auto;
+      white-space: nowrap;
+      width: $rte-toolbar-multirow-width;
+    }
+
+    .e-rte-toolbar {
+      .e-toolbar-item {
+        .e-rte-dropdown-menu {
+          .e-rte-dropdown-btn-text {
+            font-weight: $font-weight;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+
+      &.e-control[class *= 'e-toolbar'] {
+        box-sizing: border-box;
+      }
+
+      .e-toolbar-extended.e-visible {
+        display: block;
+        visibility: hidden;
+      }
+
+      &.e-tbar-ios-fixed.e-rte-tb-fixed {
+        top: 0;
+        transform: translate3d(0, 0, 0);
+      }
+
+      &.e-rte-tb-fixed:not(.e-tbar-ios-fixed) {
+        bottom: 0;
+      }
+
+      &.e-rte-tb-fixed {
+        display: none;
+        left: 0;
+        position: fixed;
+        right: 0;
+
+        &.e-show {
+          display: block;
+          z-index: 101;
+        }
+      }
+    }
+
+    .e-rte-placeholder {
+      color: $rte-content-font-color;
+      line-height: $rte-placeholder-line-height;
+      opacity: .54;
+      overflow: hidden;
+      padding: $rte-placeholder-padding;
+      position: absolute;
+      text-align: start;
+      top: 0;
+      z-index: 1;
+      display: none;
+    }
+
+    .e-rte-content,
+    .e-rte-iframe-content {
+      position: relative;
+      z-index: 1;
+    }
+
+    .e-rte-content,
+    .e-source-content,
+    .e-rte-iframe-content {
+      overflow: hidden;
+      transition: 100ms ease-out;
+      width: $rte-content-width;
+      font-size: $rte-content-font-size;
+
+      .e-content {
+        width: $rte-e-content-width;
+        display: block;
+        float: left;
+        background: unset;
+        box-sizing: border-box;
+        height: $rte-content-height;
+        min-height: 100px;
+        outline: 0 solid transparent;
+        padding: $rte-iframe-content-padding;
+        position: relative;
+        text-align: inherit;
+        z-index: 2;
+        font-weight: $rte-content-font-weight;
+        line-height: $rte-content-line-height;
+        font-size: $rte-common-content-font-size;
+        /* stylelint-disable property-no-vendor-prefix */
+        -webkit-overflow-scrolling: touch; //iOS devices scrolling smooth
+        // sass-lint:enabled no-vendor-prefixes
+        overflow: auto;
+        transition: 100ms ease-out;
+      }
+
+      .e-content p {
+        margin: $rte-content-p-margin;
+        margin-bottom: $rte-content-p-margin-bottom;
+      }
+
+      .e-content blockquote {
+        font-size: $rte-common-content-font-size;
+      }
+
+      .e-content code {
+        background: $rte-code-background;
+        color: $rte-code-color;
+      }
+
+      .e-content hr {
+        margin: $rte-content-hr-margin;
+        border: $rte-hr-border;
+        @if $theme-name == 'Material3-dark' or $theme-name == 'fluent2-dark' or $theme-name == 'fluentui-dark' or $theme-name == 'fluent2-highcontrast' or $theme-name == 'highcontrast' or $theme-name == 'botstrap5-dark' or $theme-name == 'tailwind-dark' {
+          border: $rte-hr-small-border;
+        }
+      }
+
+      .e-content {
+        .e-rte-checklist > li:not(.e-rte-checklist-hidden) {
+          list-style: none;
+          position: relative;
+        }
+
+        .e-rte-checklist > li::before {
+          content: '';
+          position: absolute;
+          top: 2px;
+          box-sizing: content-box;
+          left: -25px;
+          width: $rte-checklist-checkbox-width;
+          height: $rte-checklist-checkbox-height;
+          border-radius: $rte-checklist-checkbox-border-radius;
+          border: $rte-checklist-checkbox-border;
+          cursor: pointer;
+        }
+
+        .e-rte-checklist li.e-rte-checklist-checked::before {
+          background: $rte-checklist-checked-bg-color;
+          border: $rte-checklist-checked-border-color;
+        }
+
+        .e-rte-checklist li.e-rte-checklist-checked::after {
+          border-color: $rte-checklist-checked-checkmark-color;
+          border-style: solid;
+          border-width: 0 calc(16px / 8) calc(16px / 8) 0;
+          box-sizing: content-box;
+          content: '';
+          display: block;
+          height: 8px;
+          width: 4px;
+          left: -19px;
+          position: absolute;
+          top: 4.5px;
+          transform: rotate(45deg);
+          cursor: pointer;
+          @if $theme-name =='Material3-dark' or $theme-name =='Material3' {
+            left: -18px;
+            top: 5.5px;
+          }
+        }
+      }
+
+      .e-content.e-rtl {
+        .e-rte-checklist li.e-rte-checklist-checked::after {
+          right: -19px;
+        }
+        .e-rte-checklist > li::before {
+          right: -25px;
+        }
+      }
+
+      .e-content hr:hover {
+        cursor: default;
+      }
+
+      hr.e-rte-hr-focus {
+        outline: 2px solid $rte-hr-outline;
+        outline-offset: 3px;
+        @if $theme-name == 'Material3-dark' or $theme-name == 'fluent2-dark' or $theme-name == 'fluentui-dark' or $theme-name == 'fluent2-highcontrast' or $theme-name == 'highcontrast' or $theme-name == 'botstrap5-dark' or $theme-name == 'tailwind-dark' {
+          outline: 2px solid rgba(0, 116, 204, 1);
+        }
+      }
+      
+      .e-content li {
+        margin-bottom: $rte-content-li-margin-bottom;
+      }
+      
+      .e-content li ol,
+      .e-content li ul {
+        margin-block-start: $rte-li-ul-margin;
+      }
+
+      .e-content ul {
+        list-style-type: disc;
+      }
+
+      .e-content ul ul,
+      .e-content ol ul {
+        list-style-type: circle;
+      }
+
+      .e-content ul ul ul,
+      .e-content ol ul ul,
+      .e-content ul ol ul,
+      .e-content ol ol ul {
+        list-style-type: square;
+      }
+      
+      .e-content h1 {
+        font-size: $rte-content-h1-font-size;
+        font-weight: $rte-content-h1-font-weight;
+        line-height: $rte-content-h1-line-height;
+        margin: $rte-content-h1-margin;
+      }
+
+      .e-content h2 {
+        font-size: $rte-content-h2-font-size;
+        font-weight: $rte-content-h2-font-weight;
+        line-height: $rte-content-h2-line-height;
+        margin: $rte-content-h2-margin;
+      }
+
+      .e-content h3 {
+        font-size: $rte-content-h3-font-size;
+        font-weight: $rte-content-h3-font-weight;
+        line-height: $rte-content-h3-line-height;
+        margin: $rte-content-h3-margin;
+      }
+
+      .e-content h4 {
+        font-size: $rte-content-h4-font-size;
+        font-weight: $rte-content-h4-font-weight;
+        line-height: $rte-content-h4-line-height;
+        margin: $rte-content-h4-margin;
+      }
+
+      .e-content h5 {
+        font-size: $rte-content-h5-font-size;
+        font-weight: $rte-content-h5-font-weight;
+        line-height: $rte-content-h5-line-height;
+        margin: $rte-content-h5-margin;
+      }
+
+      .e-content h6 {
+        font-size: $rte-content-h6-font-size;
+        line-height: $rte-content-h6-line-height;
+        margin: $rte-content-h6-margin;
+      }
+
+      .e-content blockquote {
+        margin: $rte-content-blockquote-margin;
+        margin-left: $rte-content-blockquote-margin-left;
+        padding-left: $rte-iframe-blockquote-padding-left;
+      }
+      
+      .e-content table {
+        border-collapse: collapse;
+        border-spacing: 0;
+        empty-cells: show;
+
+        &:not(.e-rte-paste-table) {
+          margin-bottom: $rte-content-table-margin-bottom;
+        }
+
+        &:not(:first-child):not(table table):not(.e-rte-paste-table) {
+          margin-top: $rte-content-table-margin-top;
+        }
+      }
+
+      .e-content pre {
+        background-color: $rte-content-pre-background;
+        border: $rte-content-pre-border;
+        border-radius: $rte-content-pre-border-radius;
+        color: $rte-content-color;
+        font-size: inherit;
+        line-height: inherit;
+        margin: $rte-content-pre-margin;
+        overflow: visible;
+        padding: $rte-content-pre-padding;
+        white-space: pre-wrap;
+        word-break: inherit;
+        word-wrap: break-word;
+
+        @if $skin-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
+          background-color: $rte-pre-bg-color;
+        }
+      }
+      .e-content pre[data-language] {
+        background: rgba(157, 157, 157, .08);
+        color: rgba(46, 46, 46, 1);
+        font-family: $rte-code-block-font-family;
+        border-radius: $rte-pre-border-radius;
+        border: $rte-pre-border;
+        padding: $rte-code-block-padding;
+        font-size: $rte-pre-font-size;
+        line-height: $rte-code-block-line-height;
+        font-weight: $rte-code-block-font-weight;
+        position: relative;
+        @if $theme-name == 'bootstrap-dark' or $theme-name == 'material-dark' or $theme-name == 'fabric-dark' or $theme-name == 'material3-dark' or $theme-name == 'fluent2-dark' or $theme-name == 'fluent2-highcontrast' or $theme-name == 'highcontrast' or $theme-name == 'botstrap5-dark' or $theme-name == 'tailwind-dark' or $theme-name == 'fluentui-dark' or $theme-name == 'tailwind3-dark' {
+          background: rgba(157, 157, 157, .08);
+          color: rgba(245, 245, 245, 1);
+          border: $rte-pre-small-border;
+        }
+        &::before {
+          content: attr(data-language);
+          font-family: $rte-code-block-label-font-family;
+          font-weight: $rte-code-block-label-font-weight;
+          color: rgba(249, 250, 251, 1);
+          font-size: $rte-pre-before-content-font-size;
+          line-height: $rte-code-block-label-line-height;
+          right: 8px;
+          padding: $rte-code-block-label-padding;
+          background-color: rgba(105, 105, 105, 1);
+          top: -1px;
+          border-radius: $rte-pre-before-content-border-radius;
+          position: absolute;
+          @if $theme-name == 'bootstrap-dark' or $theme-name == 'material-dark' or $theme-name == 'fabric-dark' or $theme-name == 'Material3-dark' or $theme-name == 'fluent2-dark' or $theme-name == 'fluent2-highcontrast' or $theme-name == 'highcontrast' or $theme-name == 'botstrap5-dark' or $theme-name == 'tailwind-dark' or $theme-name == 'fluentui-dark' or $theme-name == 'tailwind3-dark' {
+            background: rgba(189, 186, 186, 1);
+            color: rgba(29, 36, 50, 1);
+          }
+        }
+        code {
+          color: rgba(46, 46, 46, 1);
+          background: none;
+          @if $theme-name == 'bootstrap-dark' or $theme-name == 'material-dark' or $theme-name == 'fabric-dark' or $theme-name == 'Material3-dark' or $theme-name == 'fluent2-dark' or $theme-name == 'fluent2-highcontrast' or $theme-name == 'highcontrast' or $theme-name == 'botstrap5-dark' or $theme-name == 'tailwind-dark' or $theme-name == 'fluentui-dark' or $theme-name == 'tailwind3-dark' {
+            color: rgba(245, 245, 245, 1);
+          }
+        }
+      }
+      .e-content strong,
+      .e-content b {
+        font-weight: $rte-content-strong-b-font-weight;
+      }
+
+      .e-content a {
+        text-decoration: none;
+        user-select: auto;
+      }
+
+      .e-content a:hover {
+        text-decoration: underline;
+      }
+
+      .e-content p:last-child,
+      .e-content p.e-rte-last-paragraph,
+      .e-content pre:last-child,
+      .e-content blockquote:last-child {
+        margin-bottom: $rte-content-para-pre-block-last-margin-bottom;
+      }
+
+      .e-content h3 + h4 {
+        margin-top: $rte-content-h3-h4-tag-margin-top;
+      }
+
+      .e-content h4 + h5 {
+        margin-top: $rte-content-h4-h5-tag-margin-top;
+      }
+
+      .e-content h5 + h6 {
+        margin-top: $rte-content-h5-h6-tag-margin-top;
+      }
+
+      .e-content ul:last-child {
+        margin-bottom: $rte-content-ul-tag-margin-bottom;
+      }
+
+      .e-content table.e-cell-select {
+        position: relative;
+      }
+  
+      .e-content table.e-cell-select::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border: $rte-table-select-border;
+        pointer-events: none;
+      }
+  
+      .e-content table td.e-cell-select.e-multi-cells-select,
+      .e-content table th.e-cell-select.e-multi-cells-select {
+        border: $rte-table-select-multi-cells-border;
+        position: relative;
+      }
+  
+      .e-content table td.e-cell-select.e-multi-cells-select::after,
+      .e-content table th.e-cell-select.e-multi-cells-select::after {
+        background-color: $rte-table-multicell-select-bg-color;
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: $rte-table-cell-after-width;
+        height: $rte-table-cell-after-height;
+        bottom: 0;
+        pointer-events: none;
+        right: 0;
+      }
+      .e-content table td.e-multi-cells-select ::selection,
+      .e-content table th.e-multi-cells-select ::selection {
+        background-color: transparent;
+      }
+      .e-content table td.e-multi-cells-select,
+      .e-content table th.e-multi-cells-select {
+        user-select: none;
+      }
+    }
+
+    .e-rte-tb-bottom {
+      .e-rte-character-count {
+        position: relative;
+        text-align: right;
+      }
+    }
+
+    .e-rte-character-count {
+      color: $rte-default-character-count-color;
+      font-size: $rte-default-character-count-font-size;
+      margin-right: $rte-default-character-count-margin-right;
+      opacity: $rte-default-character-count-opacity;
+      padding-bottom: $rte-default-character-count-padding-bottom;
+      text-align: right;
+      z-index: 100;
+      pointer-events: none;
+
+      &.e-warning {
+        color: $rte-warning-character-count-color;
+        opacity: unset;
+      }
+
+      &.e-error {
+        color: $rte-error-character-count-color;
+        opacity: unset;
+      }
+    }
+
+    &:not(.e-rtl) .e-rte-character-count:last-child {
+      margin-right: $rte-character-count-last-child-margin-right;
+    }
+
+    .e-rte-srctextarea {
+      background-color: transparent;
+      border: $rte-content-src-textarea-border;
+      color: $rte-content-color;
+      height: $rte-srctextarea-height;
+      line-height: $rte-srctextarea-line-height;
+      overflow: auto;
+      padding: $rte-content-src-textarea-padding;
+      resize: none;
+      transition: 100ms ease-out;
+      width: $rte-srctextarea-width;
+    }
+
+    .e-resize-handle {
+      position: absolute;
+      margin-bottom: $rte-resize-handler-margin-bottom; //changing width(15px) to margin right 3px
+
+      &.e-south-east {
+        bottom: $rte-resize-handler-position;
+        cursor: nwse-resize;
+        right: $rte-resize-handler-position;
+        z-index: 100;
+        margin-right: $rte-resize-handler-margin-right; //changing height(15px) to margin right 3px
+      }
+
+      &.e-south-west {
+        bottom: $rte-resize-handler-position;
+        cursor: sw-resize;
+        left: $rte-resize-handler-position;
+        transform: rotate(90deg);
+        z-index: 100;
+        margin-left: $rte-resize-handler-margin-right; //changing height(15px) to margin left 3px
+      }
+    }
+
+    &.e-rtl {
+
+      &.e-rte-resize {
+        float: right;
+      }
+
+      .e-resize-handle.e-south-west {
+        direction: ltr;
+        text-align: initial;
+      }
+    }
+
+    &.e-rte-tb-expand {
+      &.e-rte-fixed-tb-expand {
+        transition: none;
+      }
+    }
+    .e-clickelem::after,
+    .e-video-clickelem::after {
+      left: 0;
+      right: 0;
+      z-index: 1;
+    }
+    .e-clickelem::before,
+    .e-video-clickelem::before {
+      left: 0;
+      right: 0;
+      z-index: 1;
+    }
+    .e-clickelem::before {
+      bottom: 70%;
+      top: 0;
+    }
+    .e-clickelem::after {
+      bottom: 0;
+      top: 70%;
+    }
+    .e-video-clickelem::before {
+      bottom: 85%;
+      top: 0;
+    }
+    .e-video-clickelem::after {
+      bottom: 0;
+      top: 90%;
+    }
+    
+    .e-audio-wrap,
+    .e-embed-video-wrap {
+      display: inline-block;
+    }
+
+    .e-clickelem,
+    .e-video-clickelem {
+      display: block;
+      margin: $rte-video-elem-margin;
+      outline: none;
+      padding: $rte-video-elem-padding;
+      position: relative;
+    }
+
+    .e-clickelem::after,
+    .e-video-clickelem::after {
+      background: transparent;
+      content: '';
+      cursor: default;
+      display: block;
+      position: absolute;
+    }
+
+    .e-clickelem::before,
+    .e-video-clickelem::before {
+      background: transparent;
+      content: '';
+      cursor: default;
+      display: block;
+      position: absolute;
+    }
+
+    .e-videoheader,
+    .e-embed-videoheader,
+    .e-video-url-wrap {
+      padding-bottom: $rte-video-url-wrapper-padding-bottom;
+      padding-top: $rte-video-url-wrapper-padding-top;
+    }
+
+    .e-video-url-wrap .e-radio-wrapper {
+      padding: $rte-video-wrapper-padding;
+    }
+
+    .e-video-url-wrap textarea {
+      min-height: 80px; //3. video url height to min-height
+    }
+
+    .e-rte-value-wrapper {
+      display: none;
+    }
+
+    .e-rte-upload {
+      visibility: hidden;
+      display: none;
+    }
+
+    .e-rte-dropdown-btn-text-wrapper {
+      display: inline-flex;
+    }
+
+    .e-rte-radio-keep-format {
+      padding-top: $rte-radio-keep-format-padding-top;
+    }
+
+    .e-rte-radio-remove-format,
+    .e-rte-radio-plain-format {
+      padding-top: $rte-radio-remove-plain-padding-top;
+    }
+  }
+
+  .e-richtexteditor .e-rte-toolbar .e-toolbar-item {
+    .e-colorpicker-wrapper,
+    .e-colorpicker-container {
+
+      &.e-rte-font-colorpicker .e-split-colorpicker.e-icons::before,
+      &.e-rte-background-colorpicker .e-split-colorpicker.e-icons::before {
+        display: block;
+        font-family: 'e-icons';
+        font-weight: $rte-color-picker-font-weight;
+        line-height: $rte-color-picker-line-height;
+        text-transform: none;
+      }
+
+      .e-split-btn-wrapper {
+        .e-split-colorpicker {
+          .e-selected-color {
+            background: none;
+            display: block;
+            margin-top: $rte-color-picker-margin-top;
+            width: $rte-color-picker-width;
+            height: $rte-color-picker-height;
+            .e-split-preview {
+              height: 3px;
+              bottom: 0;
+              top: unset;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .e-rte-toolbar.e-rte-quick-toolbar .e-toolbar-item {
+    .e-colorpicker-wrapper,
+    .e-colorpicker-container {
+
+      &.e-rte-font-colorpicker .e-split-colorpicker.e-icons::before,
+      &.e-rte-background-colorpicker .e-split-colorpicker.e-icons::before {
+        display: block;
+        font-family: 'e-icons';
+        font-weight: $rte-color-picker-font-weight;
+        line-height: $rte-color-picker-line-height;
+        text-transform: none;
+      }
+
+      .e-split-btn-wrapper {
+        .e-split-colorpicker {
+          .e-selected-color {
+            background: none;
+            display: block;
+            margin-top: $rte-color-picker-margin-top;
+            width: $rte-color-picker-width;
+            height: $rte-color-picker-height;
+
+            .e-split-preview {
+              height: 3px;
+              bottom: 0;
+              top: unset;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .e-colorpicker-popup.e-rte-dropdown .e-container.e-color-palette .e-clr-pal-rec-wpr .e-recent-clr-span {
+    font-family: $rte-font-family;
+  }
+
+  .e-richtexteditor .e-rte-toolbar .e-toolbar-item {
+    .e-split-btn-wrapper,
+    .e-rte-dropdown-menu {
+      min-height: $rte-split-btn-height;
+    }
+  }
+
+  .e-rte-linkcontent .e-rte-label {
+    padding-top: $rte-insert-dialog-label-padding-top;
+  }
+
+  .e-rte-label label {
+    font-weight: $rte-lable-font-weight;
+  }
+
+  .e-dlg-content {
+  
+    .e-rte-label label,
+    .e-audio-content .e-audioheader,
+    .e-img-content .e-linkheader {
+      @if $skin-name =='tailwind3' {
+        font-weight: $font-weight-medium;
+        color: $rte-content-font-color;
+      }
+    }
+  }
+
+  .e-rte-linkcontent .e-rte-label:first-child {
+    padding-top: $rte-link-label-first-child-padding-top;
+  }
+
+  .e-rte-dropdown-popup {
+
+    &.e-rte-inline-dropdown {
+
+      @media screen and (max-width: 768px) {
+        ul {
+          padding: $rte-inline-dropdown-ul-padding;
+
+          li.e-item {
+            height: $rte-media-inline-dropdown-height;
+            line-height: $rte-inline-dropdown-line-height;
+            padding: $rte-inline-dropdown-li-padding;
+          }
+
+          .e-item .e-menu-icon {
+            float: none;
+          }
+        }
+      }
+
+      &.e-rte-dropdown-icons.e-dropdown-popup {
+
+        @media screen and (max-width: 768px) {
+          max-height: 280px;
+
+          ul {
+            display: inline-flex;
+          }
+        }
+      }
+    }
+
+    ul {
+      min-width: 82px;
+
+      .e-item {
+
+        .e-menu-icon {
+          margin: $rte-ul-menu-icon-margin;
+          width: $rte-ul-menu-icon-width;
+        }
+
+        &.e-h1 {
+          font-size: $rte-content-ul-h1-font-size;
+          font-weight: $rte-content-ul-h1-font-weight;
+          height: $rte-content-ul-h1-height;
+          @if $skin-name =='fluent2' {
+            line-height: $rte-content-ul-h1-small-line-height;
+          }
+          @else {
+            line-height: $rte-content-ul-h1-line-height;
+          }
+        }
+
+        &.e-code{
+          font-family: monospace;
+          unicode-bidi: isolate;
+          white-space: pre;
+        }
+
+        &.e-h2 {
+          font-size: $rte-content-ul-h2-font-size;
+          font-weight: $rte-content-ul-h2-font-weight;
+          height: $rte-content-ul-h2-height;
+          @if $skin-name =='fluent2' {
+            line-height: $rte-content-ul-h2-small-line-height;
+          }
+          @else {
+            line-height: $rte-content-ul-h2-line-height;
+          }
+        }
+
+        &.e-h3 {
+          font-size: $rte-content-ul-h3-font-size;
+          font-weight: $rte-content-ul-h3-font-weight;
+        }
+
+        &.e-h4 {
+          font-size: $rte-content-ul-h4-font-size;
+          font-weight: $rte-content-ul-h4-font-weight;
+        }
+
+        &.e-h5 {
+          font-size: $rte-content-ul-h5-font-size;
+          font-weight: $rte-content-ul-h5-font-weight;
+        }
+
+        &.e-h6 {
+          font-size: $rte-content-ul-h6-font-size;
+          font-weight: $rte-content-ul-h6-font-weight;
+        }
+
+        &.e-segoe-ui {
+          font-family: 'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', sans-serif;
+        }
+
+        &.e-arial {
+          font-family: 'Arial', 'Helvetica', sans-serif;
+        }
+
+        &.e-courier-new {
+          font-family: 'Courier New', 'Courier', monospace;
+        }
+
+        &.e-georgia {
+          font-family: 'Georgia', 'Times New Roman', 'Times', serif;
+        }
+
+        &.e-helvetica-neue {
+          font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+        }
+
+        &.e-impact {
+          font-family: 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
+        }
+
+        &.e-lucida-console {
+          font-family: 'Lucida Console', 'Monaco', monospace;
+        }
+
+        &.e-tahoma {
+          font-family: 'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', sans-serif;
+        }
+
+        &.e-times-new-roman {
+          font-family: 'Times New Roman', 'Times', serif;
+        }
+
+        &.e-trebuchet-ms {
+          font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'Arial', sans-serif;
+        }
+
+        &.e-verdana {
+          font-family: 'Verdana', 'Geneva', 'Tahoma', sans-serif;
+        }
+
+        &.e-roboto {
+          font-family: 'Roboto', 'Segoe UI', 'GeezaPro', 'DejaVu Serif', sans-serif;
+        }
+      }
+    }
+
+    &.e-rte-dropdown-icons {
+
+      ul {
+        min-width: $rte-dropdown-icons-ul-min-width;
+      }
+
+      @media screen and (max-width: 768px) {
+
+        ul {
+          min-width: 30px;
+        }
+      }
+    }
+
+    &.e-rtl {
+      ul .e-item .e-menu-icon {
+        margin: $rte-rtl-ul-menu-icon-margin;
+      }
+    }
+  }
+
+  .e-rte-image.e-imgbreak,
+  .e-rte-audio.e-audio-break,
+  .e-rte-video.e-video-break {
+    border: $rte-media-break-elem-border;
+    cursor: pointer;
+    display: block;
+    float: none;
+    max-width: $rte-media-break-elem-max-width;
+    padding: $rte-media-break-elem-padding;
+    position: relative;
+  }
+
+  .e-rte-image,
+  .e-rte-audio,
+  .e-rte-video  {
+    border: $rte-media-elem-border;
+    cursor: pointer;
+    display: block;
+    float: none;
+    margin: $rte-media-elem-margin;
+    max-width: $rte-media-elem-max-width;
+    position: relative;
+  }
+
+  .e-rte-image.e-imginline,
+  .e-rte-image.e-img-inline,
+  .e-img-caption-container.e-img-inline,
+  .e-rte-audio.e-audio-inline,
+  .e-rte-video.e-video-inline {
+    margin-left: $rte-media-inline-elem-margin-left;
+    margin-right: $rte-media-inline-elem-margin-right;
+    display: inline-block;
+    float: none;
+    max-width: $rte-media-inline-elem-max-width;
+    padding: $rte-media-inline-elem-padding;
+    vertical-align: bottom;
+  }
+
+  .e-rte-image.e-imgcenter,
+  .e-rte-image.e-img-center,
+  .e-rte-image.e-img-break,
+  .e-img-caption-container.e-img-center,
+  .e-img-caption-container.e-img-break,
+  .e-rte-video.e-video-center {
+    cursor: pointer;
+    display: block;
+    float: none;
+    margin: $rte-img-video-center-margin;
+    max-width: $rte-img-video-center-max-width;
+    position: relative;
+  }
+
+  .e-rte-image.e-imgleft,
+  .e-rte-video.e-video-left {
+    float: left;
+    margin: $rte-img-video-left-margin;
+    margin-right: $rte-img-video-left-margin-right;
+    text-align: left;
+  }
+
+  .e-rte-image.e-imgright,
+  .e-rte-video.e-video-right {
+    float: right;
+    margin: $rte-img-video-right-margin;
+    margin-left: $rte-img-video-right-margin-left;
+    text-align: right;
+  }
+
+  .e-rte-img-popup .e-item {
+    height: 106px;
+    width: 300px;
+  }
+
+  .e-rte-img-caption {
+    display: inline-block;
+    margin: $rte-img-caption-margin;
+    max-width: $rte-img-caption-max-width;
+    position: relative;
+  }
+
+  .e-rte-img-caption.e-caption-inline {
+    display: inline-block;
+    margin: 5px auto;
+    margin-left: 5px;
+    margin-right: 5px;
+    max-width: calc(100% - (2 * 5px));
+    position: relative;
+    text-align: center;
+    vertical-align: bottom;
+  }
+
+  .e-rte-img-caption.e-imgcenter {
+    display: contents;
+    margin-left: $rte-imgcenter-margin-left;
+    margin-right: $rte-imgcenter-margin-right;
+  }
+
+  .e-rte-img-caption.e-imgright {
+    display: contents;
+    margin-left: $rte-imgright-margin-left;
+    margin-right: 0;
+  }
+
+  .e-rte-img-caption.e-imgleft {
+    display: contents;
+    margin-left: 0;
+    margin-right: $rte-imgleft-margin-right;
+  }
+
+  .e-rte-img-caption .e-rte-image.e-imgright {
+    margin-left: auto;
+    margin-right: $rte-img-caption-imgright-margin-right;
+  }
+
+  .e-rte-img-caption .e-rte-image.e-imgleft {
+    margin: 0;
+  }
+
+  .e-img-caption.e-rte-img-caption.e-imgbreak {
+    display: contents;
+  }
+
+  .e-rte-table td,
+  .e-rte-table th {
+    border: $rte-table-border;
+    height: 20px;
+    min-width: 20px;
+    padding: $rte-table-padding;
+    box-sizing: border-box;
+  }
+
+  .e-rte-table,
+  .e-rte-paste-table {
+    &.e-dashed-border > tbody > tr {
+      > td,
+      > th {
+        border-style: dashed;
+      }
+    }
+  }
+
+  .e-rte-img-caption .e-img-inner {
+    box-sizing: border-box;
+    display: block;
+    font-size: $rte-toolbar-icon-size;
+    font-weight: $rte-content-img-caption-font-weight;
+    margin: $rte-content-img-caption-inner-margin;
+    opacity: .9;
+    position: relative;
+    text-align: center;
+    width: $rte-content-img-caption-inner-width;
+  }
+
+  .e-rte-img-caption.e-imgleft .e-img-inner {
+    float: left;
+    text-align: left;
+  }
+
+  .e-rte-img-caption.e-imgright .e-img-inner {
+    float: right;
+    text-align: right;
+  }
+
+  .e-rte-img-caption.e-imgleft .e-img-wrap,
+  .e-rte-img-caption.e-imgright .e-img-wrap {
+    display: contents;
+  }
+
+  .e-container.e-color-palette .e-custom-palette .e-palette {
+    padding: $rte-container-custom-palette-padding;
+  }
+
+  .e-rte-img-caption .e-img-wrap {
+    display: inline-block;
+    margin: $rte-img-wrap-margin;
+    padding: $rte-img-wrap-padding;
+    width: $rte-img-wrap-width;
+  }
+
+  .e-rte-img-dialog .e-rte-label {
+    padding-top: $rte-insert-dialog-label-padding-top;
+  }
+
+  .e-rte-img-dialog .e-rte-label:first-child {
+    padding-top: $rte-img-label-first-child-padding-top;
+  }
+
+  .e-rte-video-dialog .e-rte-label {
+    padding-top: $rte-insert-dialog-label-padding-top;
+  }
+
+  .e-rte-video-dialog .e-rte-label:first-child {
+    padding-top: $rte-video-dialog-label-padding-top;
+  }
+
+  .e-rte-table-resize.e-tb-col-insert,
+  .e-rte-table-resize.e-tb-row-insert {
+    position: absolute;
+    background-color: transparent;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    color: $rte-insert-icon-color;
+  }
+
+  .e-rte-table-resize .e-circle::before,
+  .e-rte-table-resize .e-circle-add::before {
+    background-color: $rte-content-bg;
+    border-radius: 50%;
+  }
+
+  .e-rte-table-resize.e-tb-col-insert {
+    width: 26px;
+    height: 22px;
+  }
+
+  .e-rte-table-resize.e-tb-row-insert {
+    width: 22px;
+    height: 26px;
+  }
+
+  .e-rte-table-resize.e-tb-row-insert.e-insert-cell-rtl {
+    right: 2px;
+  }
+
+  .e-rte-table-resize.e-tb-col-insert .e-icons.e-circle-add,
+  .e-rte-table-resize.e-tb-row-insert .e-icons.e-circle-add {
+    font-size: 16px;
+    line-height: 16px;
+    border: 1px;
+    position: absolute;
+    z-index: 2;
+  }
+
+  .e-rte-table-resize.e-tb-col-insert .e-icons.e-circle-add {
+    top: 0;
+    left: 5px;
+  }
+  
+  .e-rte-table-resize.e-tb-row-insert .e-icons.e-circle-add {
+    top: 5px;
+    left: 0;
+  }
+
+  .e-rte-table-resize.e-tb-row-insert .e-icons.e-circle-add.e-insert-cell-rtl {
+    left: 6.5px;
+  }
+
+  .e-rte-table-resize.e-tb-col-insert .e-icons.e-circle,
+  .e-rte-table-resize.e-tb-row-insert .e-icons.e-circle {
+    font-size: 8px;
+    line-height: 8px;
+    border: 1px;
+    position: absolute;
+    z-index: 2;
+  }
+
+  .e-rte-table-resize.e-tb-row-insert .e-icons.e-circle {
+    top: 9px;
+    left: 4px;
+  }
+
+  .e-rte-table-resize.e-tb-col-insert .e-icons.e-circle {
+    top: 4px;
+    left: 9px;
+  }
+
+  .e-rte-table-resize.e-tb-row-insert .e-icons.e-circle.e-insert-cell-rtl {
+    left: 10px;
+  }
+
+  .e-rte-table-resize.e-row-resize,
+  .e-rte-table-resize.e-column-resize {
+    background-color: transparent;
+    background-repeat: repeat;
+    bottom: 0;
+    cursor: col-resize;
+    height: 1px;
+    overflow: visible;
+    position: absolute;
+    width: 1px;
+  }
+
+  .e-rte-table-resize.e-row-resize {
+    cursor: row-resize;
+    height: 1px;
+  }
+
+  .e-rte-image,
+  .e-img-caption-container {
+    &.e-img-left-wrap {
+      float: left;
+      margin: 5px 5px 5px 0;
+    }
+    &.e-img-right-wrap {
+      float: right;
+      margin: 5px 0 5px 5px;
+    }
+    &.e-img-left,
+    &.e-img-right {
+      margin-top: 5px;
+      margin-bottom: 5px;
+    }
+    &.e-img-right {
+      margin-right: 0;
+      margin-left: auto;
+    }
+    &.e-img-left {
+      margin-left: 0;
+      margin-right: auto;
+    }
+  }
+  .e-img-caption-container {
+    &.e-img-left-wrap,
+    &.e-img-right-wrap {
+      display: inline-block;
+    }
+    &.e-img-left,
+    &.e-img-right {
+      display: block;
+    }
+    max-width: 100%;
+    position: relative;
+    .e-img-caption-text {
+      box-sizing: border-box;
+      display: block;
+      font-size: $rte-toolbar-icon-size;
+      font-weight: $rte-content-img-caption-font-weight;
+      margin: auto;
+      opacity: .9;
+      position: relative;
+      text-align: center;
+      width: 100%;
+    }
+    &.e-img-left-wrap,
+    &.e-img-right-wrap,
+    &.e-img-left,
+    &.e-img-right,
+    &.e-img-center,
+    &.e-img-break {
+      .e-img-wrap img {
+        margin-bottom: 0;
+      }
+    }
+    &.e-img-center,
+    &.e-img-break {
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+
+  .e-richtexteditor,
+  .e-rte-elements {
+    .e-linkheader,
+    .e-audioheader,
+    .e-videoheader,
+    .e-video-url-wrap {
+      font-family: $rte-font-family;
+      font-size: $rte-insert-dialog-font-size;
+      opacity: .87;
+      padding-bottom: $rte-insert-dialog-label-padding-bottom;
+      padding-top: $rte-insert-dialog-label-padding-top;
+    }
+
+    .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-delete-btn.e-icons,
+    .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
+    .e-aud-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-delete-btn.e-icons,
+    .e-aud-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
+    .e-vid-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-delete-btn.e-icons,
+    .e-vid-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
+    .e-word-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-delete-btn.e-icons,
+    .e-word-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons  {
+      margin-top: $rte-uploadwrap-file-btn-icons-margin-top;
+    }
+
+    .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list,
+    .e-aud-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list,
+    .e-vid-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list,
+    .e-word-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list  {
+      border-bottom: $rte-uploadwrap-file-list-border-bottom;
+      min-height: $rte-uploadwrap-file-list-min-height;
+    }
+
+    .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list .e-file-container,
+    .e-aud-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list .e-file-container,
+    .e-vid-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list .e-file-container,
+    .e-word-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list .e-file-container {
+      margin-left: $rte-uploadwrap-file-container-margin-left;
+    }
+
+    .e-img-uploadwrap.e-droparea .e-upload .e-upload-files,
+    .e-aud-uploadwrap.e-droparea .e-upload .e-upload-files,
+    .e-vid-uploadwrap.e-droparea .e-upload .e-upload-files,
+    .e-word-uploadwrap.e-droparea .e-upload .e-upload-files {
+      border-top: $rte-droparea-files-border-top;
+    }
+
+    .e-img-uploadwrap.e-droparea .e-file-select-wrap,
+    .e-aud-uploadwrap.e-droparea .e-file-select-wrap,
+    .e-vid-uploadwrap.e-droparea .e-file-select-wrap,
+    .e-word-uploadwrap.e-droparea .e-file-select-wrap {
+      display: none;
+    }
+
+    .e-img-uploadwrap.e-droparea .e-upload,
+    .e-aud-uploadwrap.e-droparea .e-upload,
+    .e-vid-uploadwrap.e-droparea .e-upload,
+    .e-word-uploadwrap.e-droparea .e-upload {
+      border: $rte-media-droparea-upload-border;
+      float: none;
+    }
+
+    .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
+      margin-top: $rte-img-upload-abort-icon-btn-margin-top;
+    }
+
+    .e-dialog .e-img-uploadwrap.e-droparea .e-browsebtn,
+    .e-dialog .e-aud-uploadwrap.e-droparea .e-browsebtn,
+    .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,
+    .e-dialog .e-word-uploadwrap.e-droparea .e-browsebtn {
+      display: block;
+      height: $rte-droparea-browsebtn-height;
+      margin: $rte-droparea-browsebtn-margin;
+      padding: $rte-droparea-browsebtn-padding;
+      position: relative;
+      top: 6px;
+      @if $skin-name == 'FluentUI' {
+        outline: none;
+      }
+    }
+
+    .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap.e-droparea .e-browsebtn,
+    .e-dialog.e-device.e-dlg-modal .e-aud-uploadwrap.e-droparea .e-browsebtn,
+    .e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap.e-droparea .e-browsebtn,
+    .e-dialog.e-device.e-dlg-modal .e-word-uploadwrap.e-droparea .e-browsebtn {
+      display: none;
+    }
+
+    .e-dialog .e-img-uploadwrap.e-droparea,
+    .e-dialog .e-aud-uploadwrap.e-droparea,
+    .e-dialog .e-vid-uploadwrap.e-droparea,
+    .e-dialog .e-word-uploadwrap.e-droparea {
+      // line-height: 10;////No UI affected so removed
+      min-height: 50px;
+      position: relative;
+    }
+
+    .e-dialog .e-img-uploadwrap.e-droparea .e-rte-upload-text,
+    .e-dialog .e-aud-uploadwrap.e-droparea .e-rte-upload-text,
+    .e-dialog .e-vid-uploadwrap.e-droparea .e-rte-upload-text,
+    .e-dialog .e-word-uploadwrap.e-droparea .e-rte-upload-text {
+      display: inline-block;
+      line-height: $rte-dialog-word-upload-text-line-height;
+    }
+
+    // .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap.e-droparea,
+    // .e-dialog.e-device.e-dlg-modal .e-aud-uploadwrap.e-droparea,
+    // .e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap.e-droparea,
+    // .e-dialog.e-device.e-dlg-modal .e-word-uploadwrap.e-droparea {
+    //   line-height: 4;////No UI affected so removed
+    // }
+
+    .e-rte-inline-dropdown ul {
+      max-height: 200px;
+      overflow-y: auto;
+    }
+
+    .e-rte-dropdown-popup.e-rte-dropdown-items ul {
+      max-height: 280px;
+      overflow-y: auto;
+    }
+
+    .e-rte-table-popup.e-popup.e-popup-open {
+      border-radius: $rte-table-popup-border-radius;
+      box-shadow: $rte-table-popup-box;
+      font-size: $rte-popup-open-font-size;
+      font-weight: $rte-popup-open-font-weight;
+      min-width: 120px;
+      overflow: hidden;
+      padding: $rte-table-popup-padding;
+      border: $rte-table-popup-border;
+    }
+
+    .e-rte-table-popup.e-popup-open .e-rte-tablecell {
+      border: $rte-table-span-border;
+      display: inline-block;
+      height: $rte-table-popup-tablecell-height;
+      margin: $rte-table-popup-tablecell-margin;
+      overflow: hidden;
+      vertical-align: top;
+      width: $rte-table-popup-tablecell-width;
+    }
+
+    .e-rte-table-popup.e-popup-open .e-rte-table-row {
+      height: $rte-table-popup-row-height;
+    }
+
+    .e-rte-table-popup.e-popup-open .e-insert-table-btn {
+      width: $rte-insert-table-btn-width;
+    }
+
+    .e-rte-edit-table .e-rte-field {
+      padding-top: $rte-insert-dialog-label-padding-top;
+    }
+
+    .e-rte-edit-table .e-rte-field:first-child {
+      padding-top: $rte-table-dialog-label-padding-top;
+    }
+
+    .e-table-fake-selection {
+      visibility: hidden;
+      content: '\u200B';
+      position: fixed;
+      top: 0;
+      left: -9999px;
+    }
+
+    .e-rte-content .e-content table td.e-cell-select,
+    .e-rte-content .e-content table th.e-cell-select {
+      border: $rte-content-table-select-border;
+      height: $rte-content-table-select-height;
+    }
+
+    span.e-table-box {
+      cursor: nwse-resize;
+      display: block;
+      height: 10px;
+      position: absolute;
+      width: 10px;
+
+      &.e-hide {
+        display: none;
+      }
+    }
+
+    span.e-table-box.e-rmob {
+      height: 14px;
+      width: 14px;
+    }
+
+    .e-upload .e-upload-files .e-upload-file-list .e-file-container {
+      margin-right: $rte-upload-file-container-margin-right;
+    }
+
+    .e-rte-upload-popup {
+      width: 250px;
+    }
+
+    .e-rte-dialog-upload .e-upload-files {
+      border-top: $rte-dialog-upload-files-border-top;
+    }
+
+    .e-rte-dialog-upload .e-upload-files .e-upload-file-list {
+      border-bottom: $rte-dialog-file-list-border-bottom;
+    }
+
+    .e-rte-edit-table-content {
+      .e-rte-edit-table-cell {
+        display: flex;
+        gap: $rte-edit-table-cell-gap;
+      }
+      .e-rte-edit-table-tablewidth,
+      .e-rte-edit-table-bgcolor {
+        width: $rte-table-bgcolor-width;
+      }
+      .e-rte-edit-table-border {
+        .e-rte-edit-table-borderfields {
+          display: flex;
+          justify-content: space-between;
+          .e-rte-edit-table-borderwidth {
+            width: 37%;
+          }
+          .e-rte-dropdown-btn-text-wrapper {
+            width: 47px;
+          }
+        }
+      }
+      .e-rte-edit-table-element {
+        margin-top: $rte-table-element-margin-top;
+      }
+      .e-rte-edit-table-field {
+        margin-top: $rte-table-field-margin-top;
+      }
+      .e-rte-dropdown-btn-text {
+        font-weight: $rte-dropdown-btn-font-weight;
+      }
+      .e-rte-edit-table-borderlabel {
+        font-weight: $rte-edit-table-border-label-font-weight;
+        font-style: semi-bold;
+      }
+      .e-caret {
+        opacity: .75;
+      }
+    }
+
+    .e-rte-edit-tablecell-dialog {
+      .e-rte-edit-tablecell-row {
+        display: flex;
+        gap: $rte-edit-table-cell-gap;
+
+        &:first-child {
+          .e-rte-edit-table-tablewidth,
+          .e-rte-edit-table-tableheight {
+            width: 50%;
+          }
+        }
+
+        &:not(:first-child) {
+          .e-rte-edit-table-cellpadding,
+          .e-rte-edit-table-bgcolor {
+            width: 50%;
+          }
+        }
+      }
+
+      .e-rte-edit-table-field-flex {
+        display: flex;
+        justify-content: space-between;
+
+        @if $theme-name == 'bootstrap' or $theme-name == 'bootstrap-dark' {
+          .e-control-wrapper.e-numeric {
+            width: 115px !important; /* stylelint-disable-line declaration-no-important */
+          }
+        }
+      }
+
+      .e-rte-edit-table-widthValue,
+      .e-rte-edit-table-heightValue {
+        button {
+          padding: 2px 8px;
+
+          @if $theme-name == 'highcontrast' or $theme-name == 'highcontrast-light' {
+            margin-top: 0;
+          }
+          @else {
+            margin-top: 2px;
+          }
+
+          .e-rte-dropdown-btn-content-text {
+            display: inline-block;
+            width: 18px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+
+      .e-rte-edit-tablecell-align-container {
+        display: flex;
+        gap: 24px;
+
+        .e-rte-edit-tablecell-horizontal-align,
+        .e-rte-edit-tablecell-vertical-align {
+          margin-top: 8px;
+          width: 50%;
+        }
+
+        .e-rte-edit-tablecell-btn-group {
+          margin-top: 4px;
+        }
+
+        .e-rte-tablecell-align-btn {
+          width: auto;
+          height: auto;
+          padding: 12px;
+          font-size: 14px;
+        }
+      }
+
+      .e-rte-edit-table-border {
+        .e-rte-edit-table-borderfields {
+          display: flex;
+          justify-content: space-between;
+
+          .e-rte-edit-table-borderwidth {
+            width: 37%;
+          }
+
+          .e-rte-dropdown-btn-text-wrapper {
+            width: 47px;
+          }
+        }
+      }
+
+      .e-rte-edit-table-element {
+        margin-top: $rte-table-element-margin-top;
+      }
+
+      .e-rte-edit-table-field {
+        margin-top: $rte-table-field-margin-top;
+      }
+
+      .e-rte-dropdown-btn-text {
+        font-weight: $rte-dropdown-btn-font-weight;
+      }
+
+      .e-rte-edit-table-borderlabel {
+        font-weight: $rte-edit-table-border-label-font-weight;
+        font-style: semi-bold;
+      }
+
+      .e-caret {
+        opacity: .75;
+      }
+    }
+
+    .e-rte-emojipicker-popup.e-popup.e-popup-open {
+      border: $rte-emoji-pop-border;
+      // min-width: 120px; //Not affecting the UI after removal
+      min-height: $rte-emoji-popup-open-min-height;
+      min-width: $rte-emoji-popup-open-width;
+      display: flex;
+      flex-direction: column;
+
+      .e-toolbar .e-toolbar-item .e-tbar-btn {
+        padding: $rte-emoji-picker-tbar-btn-padding;
+        border-radius: $rte-emoji-pop-border-radius;
+        
+        @if $skin-name =='bootstrap' or $skin-name =='botstrap-dark' {
+          &:hover,
+          &:focus{
+            padding: $rte-emoji-picker-tbar-btn-hover-padding;
+          }
+        }
+
+        @if $skin-name =='material' or $skin-name =='material-dark' {
+          padding: $rte-emoji-picker-tbar-btn-material-padding;
+        }
+
+        .e-tbar-btn-text {
+          @if $skin-name =='fluent2' {
+            font-size: $rte-emoji-pop-tbar-btn-small-font-size;
+          }
+          @else {
+            font-size: $rte-emoji-pop-tbar-btn-large-font-size;
+          }
+          padding: $rte-emoji-picker-tbar-btn-text-padding;
+        }
+      }
+
+      .e-input-group.e-control-wrapper {
+        margin: $rte-emojipicker-input-control-wrapper-margin;
+        width: 94%;
+        box-sizing: border-box;
+        align-self: center;
+
+        .e-rte-emoji-search {
+          @if $skin-name =='material' or $skin-name =='material-dark' or $skin-name =='material3' or $skin-name =='material3-dark' {
+            text-indent: 4px;
+          }
+        }
+      }
+      
+      .e-rte-emojipicker-btn {
+        display: block;
+        gap: $rte-emoji-btn-gap;
+        height: $rte-emoji-btn-height;
+        overflow: auto;
+        padding: $rte-emoji-btn-padding;
+
+        .e-rte-emojipicker-group .e-rte-emojipickerbtn-group {
+          display: grid;
+          grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+          gap: $rte-emoji-btn-group-gap;
+
+          .e-btn.e-control {
+            display: inline-block;
+            box-shadow: none;
+            padding: $rte-emoji-grp-btn-padding;
+            // width: $rte-emoji-grp-btn-width; //2. emoji picker dynamic issue
+            // height: $rte-emoji-grp-btn-height; //2. emoji picker dynamic issue
+            border: $rte-emoji-grp-btn-border;
+            // line-height: 1px;//No UI affected so removed
+            @if $skin-name =='fluent2' {
+              font-size: $rte-emoji-grp-btn-small-font-size;
+            }
+            @else {
+              font-size: $rte-emoji-grp-btn-large-font-size;
+            }
+          }
+        }
+
+        .e-rte-emojisearch-btn {
+          display: grid;
+          grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+          gap: $rte-emoji-search-btn-gap;
+          height: $rte-emoji-search-btn-height;
+
+          .e-btn.e-control {
+            display: inline-block;
+            box-shadow: none;
+            font-size: $rte-emoji-grp-btn-font-size;
+            padding: $rte-emoji-grp-btn-control-padding;
+            // width: 40px; //2. emoji picker dynamic issue
+            // height: 40px; //2. emoji picker dynamic issue
+            border: $rte-emoji-grp-btn-border;
+            // line-height: 1px;//No UI affected so removed
+          }
+        }
+
+        .e-rte-emojipicker-group .e-rte-emojipicker-name {
+          font-weight: $rte-emoji-headname-font-weight;
+          font-size: $rte-emoji-headname-font-size;
+        }
+
+        .e-rte-emojiSearch-noEmoji {
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  .e-rte-backgroundcolor-colorpicker,
+  .e-rte-fontcolor-colorpicker {
+    & .e-color-palette.e-container {
+      & .e-custom-palette .e-palette {
+        padding: $rte-colorpicker-custom-palette-padding;
+      }
+
+      & .e-switch-ctrl-btn {
+        padding: $rte-colorpicker-custom-palette-switch-btn-padding;
+      }
+    }
+  }
+
+  .e-rte-quick-popup.e-rte-elements {
+    border-radius: $rte-quick-popup-border-radius;
+    border: $rte-quick-popup-border;
+    .e-rte-quick-toolbar.e-rte-toolbar.e-toolbar {
+      min-height: $rte-quick-toolbar-min-height;
+      min-width: $rte-quick-toolbar-min-width;
+      .e-toolbar-items:not(.e-tbar-pos) {
+        min-height: $rte-quick-toolbar-items-not-tbar-pos-min-height;
+        min-width: $rte-quick-toolbar-items-not-tbar-pos-min-width;
+        margin: $rte-quick-popup-outer-margin;
+        .e-toolbar-item {
+          margin: $rte-popup-toolbar-item-margin;
+          min-height: $rte-popup-toolbar-item-min-height;
+          min-width: $rte-popup-toolbar-item-min-width;
+          padding: $rte-quick-popup-inner-padding;
+        }
+      }
+    }
+  }
+
+  .e-rte-quick-popup {
+
+    .e-rte-quick-toolbar {
+
+      .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
+        white-space: normal;
+        display: inline-block;
+      }
+
+      &.e-remove-white-space {
+
+        .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
+          white-space: nowrap;
+        }
+      }
+
+      .e-toolbar-items:not(.e-tbar-pos) {
+
+        .e-toolbar-item.e-rte-horizontal-separator,
+        .e-toolbar-item.e-separator.e-multirow-separator.e-rte-horizontal-separator {
+          display: block;
+          height: 1px;
+          margin: $rte-quick-toolbar-horizontal-separator-margin;
+          min-height: 1px;
+        }
+
+        .e-toolbar-item {
+          margin: $rte-toolbar-item-frist-last-child-margin;
+
+          &:first-child,
+          &:last-child {
+            margin: $rte-quick-horizontal-separator-first-margin;
+          }
+        }
+      }
+      &.e-rte-toolbar.e-toolbar {
+        box-sizing: border-box;
+      }
+    }
+
+    &.e-hide {
+      display: block;
+      visibility: hidden;
+    }
+  }
+
+  .e-rte-quick-popup.e-rte-inline-popup {
+    .e-rte-quick-toolbar {
+      .e-toolbar-item {
+        &.e-rte-inline-template {
+          min-width: $rte-inline-tmp-min-width;
+        }
+
+        &.e-rte-inline-size-template {
+          min-width: $rte-inline-tmp-size-min-width;
+        }
+
+        &.e-rte-inline-color-template {
+          min-width: $rte-inline-tmp-color-min-width;
+        }
+      }
+    }
+  }
+
+  .e-popup-modal.e-popup.e-popup-open {
+    display: inline-flex;
+  }
+
+  .e-rte-modal-popup.e-popup-container.e-center {
+    justify-content: center;
+  }
+
+  .e-rte-modal-popup.e-popup-container {
+    align-items: center;
+    display: none;
+    height: $rte-modal-popup-container-height;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: $rte-modal-popup-container-width;
+    z-index: 10000;
+  }
+
+  .e-popup-overlay {
+    height: $rte-popup-overlay-height;
+    left: 0;
+    opacity: .5;
+    position: absolute;
+    top: 0;
+    width: $rte-popup-overlay-width;
+  }
+
+  .e-table-rhelper {
+    cursor: col-resize;
+    opacity: .87;
+    position: absolute;
+  }
+
+  .e-table-rhelper.e-column-helper {
+    width: 1px;
+  }
+
+  .e-table-rhelper.e-row-helper {
+    height: 1px;
+  }
+
+  .e-reicon::before {
+    border-bottom: $rte-reicon-before-border-bottom;
+    border-right: $rte-reicon-before-border-right;
+    border-top: $rte-reicon-before-border-top;
+    content: '';
+    display: block;
+    height: $rte-reicon-before-height;
+    position: absolute;
+    right: 4px;
+    top: 4px;
+    width: 20px;
+  }
+
+  .e-reicon::after {
+    border-bottom: $rte-reicon-after-border-bottom;
+    border-left: $rte-reicon-after-border-left;
+    border-top: $rte-reicon-after-border-top;
+    content: '';
+    display: block;
+    height: $rte-reicon-after-height;
+    left: 4px;
+    position: absolute;
+    top: 4px;
+    width: 20px;
+    z-index: 3;
+  }
+
+  .e-row-helper.e-reicon::after {
+    top: 10px;
+    transform: rotate(90deg);
+  }
+
+  .e-row-helper.e-reicon::before {
+    left: 4px;
+    top: -20px;
+    transform: rotate(90deg);
+  }
+
+  .e-rte-overflow {
+    overflow: hidden;
+  }
+
+  .e-dialog.e-rte-dialog-minheight {
+    min-height: $rte-dialog-min-height; //for now using 298px for ensuring But acutal value 296px
+    @if $skin-name == 'FluentUI' or $skin-name =='fluent2' {
+      min-height: $rte-dialog-fluent-min-height;
+    }
+  }
+
+  .e-content-placeholder.e-richtexteditor.e-placeholder-richtexteditor {
+    background-size: 700px 190px;
+    min-height: 190px;
+  }
+
+  .e-rte-table.e-rte-table-border {
+    border: $rte-table-border-table-border;
+    border-collapse: separate;
+  }
+
+  .e-rte-img-dialog.e-dialog.e-device.e-dlg-modal,
+  .e-rte-audio-dialog.e-dialog.e-device.e-dlg-modal,
+  .e-rte-video-dialog.e-dialog.e-device.e-dlg-modal,
+  .e-rte-import-dialog.e-dialog.e-device.e-dlg-modal {
+    .e-img-uploadwrap.e-droparea,
+    .e-aud-uploadwrap.e-droparea,
+    .e-vid-uploadwrap.e-droparea,
+    .e-word-uploadwrap.e-droparea {
+      // line-height: 10;//No UI affected so removed
+      min-height: 50px;
+      position: relative;
+
+      .e-browsebtn {
+        display: block;
+        height: $rte-dlg-modal-browse-btn-mobile-height;
+        margin: $rte-dlg-modal-browse-btn-margin;
+        padding: $rte-dlg-modal-browse-btn-padding;
+        position: relative;
+        top: 6px;
+        @if $skin-name == 'FluentUI' {
+          outline: none;
+        }
+      }
+
+      .e-upload {
+        border: $rte-import-word-upload-border;
+        float: none;
+      }
+
+      .e-file-select-wrap {
+        display: none;
+      }
+    }
+  }
+
+  .e-rte-import-dialog .e-dlg-content {
+    overflow-y: hidden;
+  }
+
+  .e-rte-file-manager-dialog {
+
+    .e-rte-label {
+      padding-bottom: $rte-filemanager-label-padding-bottom;
+      padding-top: $rte-filemanager-label-padding-top;
+
+      label {
+        font-size: $rte-filemanager-label-font-size;
+        opacity: .87;
+      }
+    }
+  }
+
+  .e-dialog .e-img-uploadwrap .e-droptext,
+  .e-dialog .e-aud-uploadwrap .e-droptext,
+  .e-dialog .e-vid-uploadwrap .e-droptext,
+  .e-dialog .e-word-uploadwrap .e-droptext,
+  .e-dialog.e-device .e-vid-uploadwrap .e-droptext  {
+    border: $rte-drop-text-border;
+    border-radius: $rte-upload-drag-border-radius;
+    color: $rte-drop-text-clr;
+    font-family: $rte-font-family;
+    font-size: $rte-drop-text-font-size;
+    height: $rte-drop-text-height;
+    margin: $rte-drop-text-margin;
+    text-align: center;
+    width: $rte-drop-text-width;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap .e-droptext,
+  .e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap .e-droptext,
+  .e-dialog.e-device.e-dlg-modal .e-aud-uploadwrap .e-droptext,
+  .e-dialog.e-device.e-dlg-modal .e-word-uploadwrap .e-droptext {
+    margin: $rte-drop-text-mobile-margin;
+    width: $rte-drop-text-mobile-width;
+  }
+  .e-dialog.e-device .e-video-url-wrap .e-radio-wrapper {
+    padding: $rte-video-url-wrap-padding;
+  }
+
+  // Blazor styles start
+  .e-rte-upload-popup.e-dialog .e-file-select-wrap {
+    display: none;
+  }
+
+  .e-rte-upload-popup.e-dialog .e-dlg-content {
+    overflow: hidden;
+    padding: $rte-upload-dlg-content-padding;
+  }
+
+  .e-hide.e-rte-quick-popup-hide {
+    border: $rte-quick-popup-hide-border;
+    position: absolute;
+  }
+
+  .e-rte-popup-hide {
+    display: none;
+  }
+
+  .e-rte-hide-visible {
+    visibility: hidden;
+  }
+
+  .e-rte-table-popup.e-dialog .e-dlg-content {
+    padding: $rte-table-dlg-content-padding;
+    @if $skin-name == 'FluentUI' {
+      margin-bottom: $rte-table-dlg-content-small-margin;
+    }
+  }
+
+  .e-richtexteditor .e-rte-table-popup.e-popup-open.e-dialog .e-rte-tablecell,
+  .e-rte-elements.e-rte-table-popup.e-popup-open.e-dialog .e-rte-tablecell {
+    @if $skin-name == 'fluent2' {
+      margin: $rte-table-tablecell-small-margin;
+    }
+    @else {
+      margin: $rte-table-tablecell-large-margin;
+    }
+  }
+  
+  .e-rte-elements{
+    .e-rte-table-popup.e-popup-open{
+      .e-rte-table-row {
+        height: $rte-table-popup-row-height;
+      }
+
+      .e-insert-table-btn {
+        @if $skin-name == 'FluentUI' {
+          margin-top: $rte-table-popup-btn-margin-top;
+        }
+        width: $rte-insert-table-btn-width;
+      }
+      .e-rte-tablecell {
+        border: $rte-table-span-border;
+        display: inline-block;
+        height: $rte-table-popup-tablecell-height;
+        margin: $rte-table-open-tablecell-margin;
+        overflow: hidden;
+        vertical-align: top;
+        width: $rte-table-popup-tablecell-width;
+      }
+    }
+    .e-rte-table-popup.e-popup.e-popup-open {
+      border-radius: $rte-table-popup-border-radius;
+      box-shadow: $rte-table-popup-box;
+      font-size: $rte-popup-open-font-size;
+      font-weight: $rte-popup-open-font-weight;
+      min-width: 120px;
+      overflow: hidden;
+      padding: $rte-table-popup-padding;
+    }
+    &.e-dropdown-popup.e-popup.e-font-size-tbar-btn.e-popup-open {
+      min-width: 95px;
+    }
+    &.e-dropdown-popup.e-rte-codeblock-dropdown.e-popup-open ul {
+      max-height: $rte-codeblock-dropdown-popup-max-height;
+      overflow: auto;
+    }
+  }
+  
+  .e-rte-elements.e-dialog {
+    .e-img-uploadwrap.e-droparea .e-rte-upload-text,
+    .e-aud-uploadwrap.e-droparea .e-rte-upload-text,
+    .e-vid-uploadwrap.e-droparea .e-rte-upload-text,
+    .e-word-uploadwrap.e-droparea .e-rte-upload-text {
+      display: inline-block;
+      line-height: $rte-uploadwrap-droparea-upload-text-line-height;
+    }
+    .e-img-uploadwrap.e-droparea,
+    .e-aud-uploadwrap.e-droparea,
+    .e-vid-uploadwrap.e-droparea,
+    .e-word-uploadwrap.e-droparea {
+      // line-height: 10;//No UI affected so removed
+      min-height: 50px;
+      position: relative;
+    }
+    .e-img-uploadwrap.e-droparea .e-browsebtn,
+    .e-aud-uploadwrap.e-droparea .e-browsebtn,
+    .e-vid-uploadwrap.e-droparea .e-browsebtn,
+    .e-word-uploadwrap.e-droparea .e-browsebtn {
+      display: block;
+      height: $rte-droparea-browsebtn-height;
+      margin: $rte-media-droparea-browsebtn-margin;
+      padding: $rte-droparea-browsebtn-padding;
+      position: relative;
+      @if $skin-name == 'FluentUI' {
+        outline: none;
+      }
+    }
+  }
+  // Blazor styles end
+
+  .e-richtexteditor {
+    .e-rte-container.e-rte-tb-bottom{
+      & .e-toolbar-wrapper.e-rte-tb-float,
+      .e-toolbar-container.e-rte-tb-float {
+        bottom: 0;
+      }
+    }
+  }
+    
+  .e-richtexteditor {
+    .e-toolbar-wrapper.e-rte-tb-float,
+    .e-toolbar-container.e-rte-tb-float {
+      position: sticky;
+      top: 0;
+      overflow: visible;
+    }
+    .e-toolbar-wrapper,
+    .e-toolbar-container {
+      height: $rte-toolbar-wrapper-container-height;
+      z-index: 10;
+      white-space: nowrap;
+    }
+    .e-toolbar .e-toolbar-pop.e-toolbar-extended {
+      position: relative;
+      width: $rte-pop-toolbar-extended-width;
+      top: 0 !important; /* stylelint-disable-line declaration-no-important */
+      left: 0 !important; /* stylelint-disable-line declaration-no-important */
+    }
+    .e-toolbar .e-toolbar-pop.e-toolbar-extended.e-popup-open {
+      display: block;
+    }
+  }
+  // Used to hide the Color picker during the rendering at the initial stage. Removed the class in the created event.
+  .e-rte-picker-init {
+    display: none !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  @if $skin-name == 'tailwind' {
+    .e-rte-table-popup.e-popup.e-popup-open {
+      box-shadow: $rte-table-popup-box;
+    }
+    .e-richtexteditor .e-toolbar .e-hor-nav{
+      min-height: 39px;
+    }
+  }
+
+  @if $skin-name == 'fabric-dark' {
+    .e-richtexteditor {
+      .e-toolbar .e-hor-nav{
+        min-height: 42px;
+      }
+    }
+  }
+
+  @if $skin-name == 'Material3' {
+    .e-richtexteditor .e-rte-table-popup .e-insert-table-btn {
+      font-weight: $font-weight;
+      border: $rte-insert-table-btn-border;
+      border-radius: $rte-insert-table-btn-border-radius;
+    }
+    .e-dialog .e-dlg-header-content + .e-dlg-content{
+      padding-top: $rte-dlg-header-content-padding-top;
+    }
+    .e-rte-link-dialog .e-dlg-content{
+      padding: $rte-link-dlg-content-padding;
+    }
+  }
+
+  @if $skin-name == 'fluent2' {
+    .e-richtexteditor {
+      .e-toolbar .e-hor-nav{
+        min-height: 40px;
+      }
+      .e-dialog {
+        .e-radio + label {
+          margin: $rte-dialog-radio-small-margin;
+        }
+      }
+    }
+    .e-rte-container{
+      border-radius: $rte-container-border-radius;
+    }
+    .e-richtexteditor{
+      border-radius: $rte-border-radius;
+      .e-toolbar .e-hor-nav {
+        border-radius: $rte-toolbar-border-radius;
+      }
+      .e-rte-content {
+        border-radius: $rte-toolbar-container-border-radius;
+      }
+    }
+    .e-richtexteditor .e-toolbar-wrapper{
+      border-radius: $rte-toolbar-wrapper-border-radius;
+      border-top-left-radius: $rte-top-left-border-radius;
+      border-top-right-radius: $rte-top-right-border-radius;
+    }
+
+    .e-richtexteditor.e-rte-tb-expand {
+      border-radius: $rte-big-tb-expand-border-radius;
+    }
+    .e-richtexteditor.e-rte-tb-expand .e-rte-toolbar.e-extended-toolbar,
+    .e-richtexteditor.e-rte-tb-expand .e-rte-toolbar .e-toolbar-extended {
+      border-top-left-radius: $rte-top-left-border-radius;
+      border-top-right-radius: $rte-top-right-border-radius;
+    }
+    .e-rte-toolbar .e-toolbar-items {
+      border-top-left-radius: $rte-toolbar-items-top-left-border-radius;
+    }
+    .e-rte-toolbar .e-hor-nav {
+      border-top-right-radius: $rte-top-right-border-radius;
+    }
+    .e-rtl .e-rte-toolbar .e-hor-nav {
+      border-top-left-radius: $rte-top-left-border-radius;
+      border-top-right-radius: $rte-top-right-border-radius;
+    }
+    .e-rtl .e-rte-toolbar .e-toolbar-items {
+      border-top-right-radius: $rte-toolbar-items-top-left-border-radius;
+    }
+  }
+
+  /* Slash Menu Styles */
+  .e-rte-elements.e-slash-menu {
+    .e-rte-quotes::before {
+      content: open-quote;
+      font-size: $rte-slash-menu-content-font-size;
+      line-height: $rte-slash-menu-content-line-height;
+    }
+    
+    .e-rte-paragraph::before {
+      content: 'T';
+      font-size: $rte-slash-menu-para-before-font-size;
+    }
+    
+    .e-rte-h1::before {
+      content: 'H1';
+      font-size: $rte-slash-menu-h1-before-font-size;
+    }
+    
+    .e-rte-h2::before {
+      content: 'H2';
+      font-size: $rte-slash-menu-h2-before-font-size;
+    }
+    
+    .e-rte-h3::before {
+      content: 'H3';
+      font-size: $rte-slash-menu-h3-before-font-size;
+    }
+    
+    .e-rte-h4::before {
+      content: 'H4';
+      font-size: $rte-slash-menu-h4-before-font-size;
+    }
+    
+    .e-rte-slash-menu-item-text {
+      font-size: $rte-slash-menu-item-text-font-size;
+      display: block;
+      line-height: $rte-slash-menu-item-text-line-height;
+      padding: $rte-slash-menu-item-text-padding;
+    }
+    
+    .e-rte-slash-menu-item-description {
+      display: block;
+      line-height: $rte-slash-menu-item-description-line-height;
+      font-size: $rte-slash-menu-item-description-font-size;
+      padding: $rte-slash-menu-item-description-padding;
+    }
+    
+    .e-slash-menu-icon {
+      // line-height: 0;//No UI affected so removed
+      display: inline-block;
+      width: 50px;
+      font-family: 'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', sans-serif;
+    }
+
+    .e-rte-slash-menu-item-content-description {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: $rte-slashmenu-description-gap;
+      align-items: center;
+    }
+    
+    .e-rte-slash-menu-item-content-description .e-slash-menu-icon {
+      padding: $rte-slash-menu-icon-padding;
+    }
+    
+    .e-rte-slash-menu-item-content-description .e-rte-slash-menu-item-text-column {
+      display: flex;
+      flex-direction: column;
+    }
+    
+    .e-rte-slash-menu-item-content-description .e-rte-slash-menu-item-text,
+    .e-rte-slash-menu-item-content-text {
+      font-weight: $rte-slash-menu-content-text-font-weight;
+    }
+    
+    .e-rte-slash-menu-item-content-text {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      height: 25px;
+    }
+    
+    .e-rte-slash-menu-item-content-text .e-slash-menu-icon {
+      margin-left: $rte-slash-menu-icon-margin-left;
+      width: 30px;
+    }
+  }
+
+  .e-image-quicktoolbar {
+    .e-link-groups {
+      display: none;
+    }
+  
+    &.e-link-enabled {
+      .e-link-groups {
+        display: inline-block;
+      }
+      
+      .e-toolbar-item {
+        &:has(.e-insert-link) {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .e-rte-quick-popup {
+    .e-rte-tip-pointer {
+      position: absolute;
+
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        width: $rte-tip-pointer-before-after-width;
+        height: $rte-tip-pointer-before-after-height;
+        pointer-events: none;
+      }
+
+      &.e-rte-tip-top {
+        &::after,
+        &::before {
+          bottom: 0;
+        }
+      }
+
+      &.e-rte-tip-bottom {
+        bottom: 0;
+        &::before,
+        &::after {
+          top: 0;
+        }
+      }
+
+      &.e-rte-tip-center,
+      &.e-rte-tip-center::before,
+      &.e-rte-tip-center::after {
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      &.e-rte-tip-left,
+      &.e-rte-tip-left::before,
+      &.e-rte-tip-left::after {
+        left: 8.5px;
+        transform: translateX(-50%);
+      }
+
+      &.e-rte-tip-right,
+      &.e-rte-tip-right::before,
+      &.e-rte-tip-right::after {
+        right: 8.5px;
+        transform: translateX(50%);
+      }
+
+      &.e-rte-tip-leftmiddle,
+      &.e-rte-tip-leftmiddle::before,
+      &.e-rte-tip-leftmiddle::after {
+        left: 25%;
+        transform: translateX(-50%);
+      }
+
+      &.e-rte-tip-rightmiddle,
+      &.e-rte-tip-rightmiddle::before,
+      &.e-rte-tip-rightmiddle::after {
+        right: 25%;
+        transform: translateX(50%);
+      }
+    }
+  }
+}
+
+.e-richtexteditor {
+  .e-rte-container.e-resize-enabled:not(.e-rte-tb-bottom):not(.e-count-enabled) {
+    .e-rte-content,
+    .e-source-content {
+      margin-bottom: $rte-resize-bar-margin-bottom;
+    }
+  }
+}
+
+.e-richtexteditor .e-rte-toolbar .e-toolbar-pop.e-toolbar-extended {
+  margin-left: $rte-toolbar-poup-extended-margin-left;
+}
+
+//toolbar popup min height over riding start
+.e-richtexteditor .e-rte-toolbar .e-toolbar-pop:not(.e-toolbar-extended) {
+  background: $rte-popup-bg;
+  .e-toolbar-item.e-toolbar-popup {
+    min-height: $rte-popup-item-min-height;
+  }
+}
+
+.e-richtexteditor {
+  .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item,
+  .e-rte-toolbar .e-toolbar-pop:not(.e-toolbar-extended) .e-toolbar-item.e-toolbar-popup,
+  .e-rte-toolbar .e-toolbar-item {
+    .e-tbar-btn.e-btn {
+      min-height: $rte-split-btn-height;
+      min-width: $rte-split-btn-height;
+      padding: $rte-toolbar-tbar-btn-padding; //4.toolbar tbar-btn padding need to confirm and remove
+      &:hover,
+      &:active,
+      &:focus,
+      &.e-active {
+        border: $rte-hover-split-btn-border;
+        padding: $rte-toolbar-tbar-btn-hover-padding; //4.toolbar tbar-btn padding need to confirm and remove
+      }
+      .e-icons {
+        padding: $rte-toolbar-tbar-btn-icons-padding; //4.toolbar tbar-btn padding need to confirm and remove
+      }
+    }
+    .e-tbar-btn:not(:hover):not(:focus):not(:active):not(.e-active) {
+      border: $rte-split-btn-border;
+    }
+  }
+  .e-rte-toolbar .e-toolbar-pop:not(.e-toolbar-extended) {
+    .e-toolbar-item.e-toolbar-popup:not(.e-overlay) .e-tbar-btn:hover .e-icons {
+      @if $theme-name == 'bootstrap5.3' {
+        color: $rte-hover-icons-color;
+      }
+    }
+    .e-toolbar-item.e-toolbar-popup .e-tbar-btn:not(:hover):not(:focus):not(:active):not(.e-active) {
+      @if $theme-name == 'bootstrap4' {
+        background: $rte-default-btn-bg;
+      }
+    }
+  }
+}
+
+@if $theme-name == 'material' or $theme-name == 'material-dark' {
+  .e-richtexteditor .e-rte-toolbar:not(.e-rte-inline-toolbar) .e-toolbar-item .e-tbar-btn.e-btn {
+    margin: $rte-tbar-btn-small-margin;
+  }
+}
+
+//toolbar popup min height over riding end
+
+.e-richtexteditor .e-rte-tb-bottom {
+  order: 999;
+  bottom: 0;
+}
+
+.e-rte-aiquery-popup {
+  min-height: 100px;
+  overflow: hidden;
+  display: flex !important; /* stylelint-disable-line declaration-no-important */
+  flex-direction: column;
+  .e-rte-ai-assit-content-container {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    width: 100%;
+  }
+
+  .e-aiassistview {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    height: auto !important; /* stylelint-disable-line declaration-no-important */
+    .e-view-header {
+      flex: 0 0 auto;
+    }
+    .e-view-content {
+      flex: 1 1 auto;
+      overflow-y: auto;
+      overflow-x: hidden;
+      min-height: 0;
+    }
+    .e-view-container {
+      margin: auto;
+    }
+    .e-rte-icon-btn-disabled {
+      pointer-events: none;
+      opacity: .5;
+      cursor: not-allowed;
+    }
+    .banner-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      height: 230px;
+      text-align: center;
+      & .e-assistview-icon::before {
+        font-size: 35px;
+      }
+    }
+    .e-footer {
+      width: 85%;
+    }
+  }
+}
+
+//Added for export button
+.e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-progress-btn.e-tbar-btn.e-spin-center {
+  line-height: 2px;
+}
+
+// Styles for Blazor SmartRichTextEditor component
+.e-smartrichtexteditor {
+  .e-rte-ai-selected-text {
+    color: rgb(255, 255, 255);
+    background: rgba(51, 103, 209);
+  }
+  .e-rte-aiquery-dialog {
+    border: 0;
+  }
+  .e-rte-aiquery-dialog .e-dlg-content {
+    min-height: 100px;
+    overflow: hidden;
+    display: flex !important; /* stylelint-disable-line declaration-no-important */
+    flex-direction: column;
+    padding: 0;
+    border-radius: 0 !important; /* stylelint-disable-line declaration-no-important */
+
+    .e-rte-ai-assit-content-container {
+      flex: 1 1 auto;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      width: 100%;
+    }
+
+    .e-aiassistview {
+      flex: 1 1 auto;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      height: auto !important; /* stylelint-disable-line declaration-no-important */
+      .e-view-header {
+        flex: 0 0 auto;
+      }
+      .e-view-content {
+        flex: 1 1 auto;
+        overflow-y: auto;
+        overflow-x: hidden;
+        min-height: 0;
+      }
+      .e-view-container {
+        margin: auto;
+      }
+      .banner-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        height: 230px;
+        text-align: center;
+        & .e-assistview-icon::before {
+          font-size: 35px;
+        }
+      }
+      .e-footer {
+        width: 85%;
+      }
+    }
+  }
+
+  @if $theme-name != 'bootstrap4' and $theme-name != 'bootstrap5' and $theme-name != 'bootstrap5.3' {
+    .e-rte-aiquery-dialog .e-toolbar-item .e-rte-dropdown-menu:not(:hover):not(:focus):not(:active):not(.e-active) {
+      border: 1px solid transparent;
+      background-color: transparent;
+      background: transparent;
+      box-shadow: none;
+    }
+  }
+  .e-rte-aiquery-dialog .e-dlg-overlay {
+    background-color: rgb(250, 250, 250);
+    opacity: .6;
+  }
+}
+
+.e-smartrichtexteditor.e-dlg-target.e-scroll-disabled {
+  overflow: initial !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-rte-ai-assist-history.e-rte-dropdown-menu.e-popup-open {
+  visibility: hidden;
+  max-height: 200px;
+  overflow-y: auto;
+}