@import '../../base/tailwind.scss';
@import '../../navigations/accordion/tailwind.scss';
@import '../../dropdowns/drop-down-list/tailwind.scss';
@import '../../inputs/input/tailwind.scss';
@import '../../popups/popup/tailwind.scss';
@import '../../popups/spinner/tailwind.scss';
@import '../../dropdowns/drop-down-base/tailwind.scss';
@import '../../dropdowns/auto-complete/tailwind.scss';
@import '../../buttons/button/tailwind.scss';
@import '../../buttons/floating-action-button/tailwind.scss';
@import '../../buttons/speed-dial/tailwind.scss';
@import '../../calendars/calendar/tailwind.scss';
@import '../../buttons/check-box/tailwind.scss';
@import '../../buttons/chips/tailwind.scss';
@import '../../splitbuttons/drop-down-button/tailwind.scss';
@import '../../splitbuttons/split-button/tailwind.scss';
@import '../../inputs/numerictextbox/tailwind.scss';
@import '../../popups/tooltip/tailwind.scss';
@import '../../inputs/slider/tailwind.scss';
@import '../../inputs/color-picker/tailwind.scss';
@import '../../navigations/context-menu/tailwind.scss';
@import '../../calendars/datepicker/tailwind.scss';
@import '../../buttons/radio-button/tailwind.scss';
@import '../../buttons/switch/tailwind.scss';
@import '../../lists/list-view/tailwind.scss';
@import '../../lists/sortable/tailwind.scss';
@import '../../calendars/datetimepicker/tailwind.scss';
@import '../../inputs/maskedtextbox/tailwind.scss';
@import '../../inputs/textbox/tailwind.scss';
@import '../../inputs/uploader/tailwind.scss';
@import '../../popups/dialog/tailwind.scss';
@import '../../navigations/h-scroll/tailwind.scss';
@import '../../navigations/v-scroll/tailwind.scss';
@import '../../navigations/toolbar/tailwind.scss';
@import '../../navigations/tab/tailwind.scss';
@import '../../navigations/treeview/tailwind.scss';
@import '../../navigations/sidebar/tailwind.scss';
@import '../../navigations/menu/tailwind.scss';
@import '../../layouts/splitter/tailwind.scss';
@import '../../grids/excel-filter/tailwind.scss';
@import '../../grids/grid/tailwind.scss';
@import '../../filemanager/file-manager/tailwind.scss';
@import '../../splitbuttons/button-group/tailwind.scss';
@import '../../splitbuttons/progress-button/tailwind.scss';
@import '../../navigations/appbar/tailwind.scss';
//Layout Variables Start
$rte-border-size: 1px !default;
$rte-2px-border-size: 2px !default;
$rte-border-type: solid !default;
$rte-list-btn-flex: column !default;
$rte-list-btn-line-height: 30px !default;
$rte-big-list-btn-line-height: 38px !default;
$rte-split-btn-line-height: 30px !default;
$rte-big-split-btn-line-height: 38px !default;
$rte-big-quick-item-btn-width: 38px !default;
$rte-quick-item-btn-width: 26px !default;
$rte-big-quick-item-btn-height: 38px !default;
$rte-quick-item-btn-height: 30px !default;
$rte-big-quick-item-padding: 12px !default;
$rte-quick-item-padding: 0 3px !default;
$rte-quick-item-icon-min-width: 24px !default;
$rte-big-quick-item-line-height: $leading-normal !default;
$rte-content-padding: 12px !default;
$rte-toolbar-icon-size: $text-xl !default;
$rte-toolbar-big-icon-size: $text-xl !default;
$rte-big-quick-drop-btn-line-height: 33px !default;
$rte-quick-drop-btn-line-height: 24px !default;
$rte-big-quick-drop-btn-margin: 4px 0 !default;
$rte-quick-drop-btn-margin: 4px 0 !default;
$rte-big-quick-drop-btn-padding: 0 !default;
$rte-quick-drop-btn-padding: 1px 0 !default;
$rte-big-quick-drop-btn-icon-size: 16px !default;
$rte-quick-drop-btn-icon-size: 14px !default;
$rte-big-quick-drop-btn-caret-icon-size: 10px !default;
$rte-quick-drop-btn-caret-icon-size: 12px !default;
$rte-big-quick-drop-btn-caret-font-size: $text-xs !default;
$rte-quick-drop-btn-caret-font-size: $text-xxs !default;
$rte-big-tb-items-margin-left: 3px !default;
$rte-tb-items-margin-left: 7px !default;
$rte-big-tb-items-padding-left: 3px !default;
$rte-tb-items-padding-left: 7px !default;
$rte-active-tb-item-btn-padding: 0 4px !default;
$rte-split-btn-bar-size: 0 !default;
$rte-split-btn-active-color-icon-line-height: 30px !default;
$rte-big-split-btn-active-color-icon-line-height: 35px !default;
$rte-format-btn-min-width: 0 !default;
$rte-font-name-btn-min-width: 0 !default;
$rte-font-size-btn-min-width: 0 !default;
$rte-drop-btn-padding-left: 7px !default;
$dropdown-btn-font-size: $text-sm;
$dropdown-btn-big-font-size: $text-base;
$rte-drop-btn-padding-right: 2.5px !default;
$rte-drop-btn-action-padding-left: 7px !default;
$rte-drop-btn-action-padding-right: 2.5px !default;
$rte-big-drop-btn-padding-left: 10px !default;
$rte-big-drop-btn-padding-right: 6px !default;
$rte-big-drop-btn-action-padding-left: 10px !default;
$rte-big-drop-btn-action-padding-right: 6px !default;
$rte-colorpicker-parent-padding: 0 !default;
$rte-colorpicker-parent-padding-hover: 0 !default;
$rte-colorpicker-parent-padding-active-hover: 0 !default;
$rte-dropdown-btn-color-content-height: 30px !default;
$rte-big-dropdown-btn-color-content-height: 38px !default;
$rte-font-icon-width: 30px !default;
$rte-font-arrow-width: 18px !default;
$rte-font-arrow-touch-width: 20px !default;
$rte-font-icon-line-height: $leading-none !default;
$rte-placeholder-line-height: $leading-normal !default;
$rte-big-active-tb-item-btn-padding: 0 8px !default;
$rte-table-popup-padding: 18px 18px 8px 22px !default;
$rte-table-popup-border: 1px solid $cool-gray-300 !default;
$rte-insert-dialog-label-padding-top: 12px !default;
$rte-insert-dialog-label-padding-bottom: 3px !default;
$rte-big-quick-tbar-item-min-height: 38px !default;
$rte-big-quick-tbar-item-min-width: 38px !default;
$rte-content-font-size: 14px !default;
$rte-big-content-font-size: 16px !default;
$rte-dropdown-caret-icon-size: $text-xs !default;
$rte-big-dropdown-caret-icon-size: $text-sm !default;
$rte-inline-dropdown-line-height: 30px !default;
$rte-big-inline-dropdown-line-height: 36px !default;
$font-weight: $font-weight-normal !default;
$rte-table-popup-bdr-radius: 2px !default;
$rte-resize-handler-width: 15px;
$rte-resize-handler-height: 15px;
$rte-resize-handler-position: 0;
$rte-big-inline-tmp-min-width: 48px;
$rte-inline-tmp-min-width: 55px;
$rte-big-inline-tmp-size-min-width: 59px;
$rte-inline-tmp-size-min-width: 66px;
$rte-big-inline-tmp-color-min-width: 50px;
$rte-inline-tmp-color-min-width: 55px;
$rte-big-color-list-span-common-padding-left-right: 0;
$rte-placeholder-padding: 12px !default;
$rte-default-character-count-opacity: 1;
$rte-droparea-line-height: 10;
$rte-droparea-browsebtn-height: 36px;
$rte-droparea-browsebtn-padding: 0 18px;
$rte-insert-dialog-font-size: 15px;
$rte-big-insert-dialog-font-size: 15px;
$rte-table-popup-tablecell-height: 14px;
$rte-table-popup-tablecell-width: 14px;
$rte-table-popup-tablecell-margin: 1px;
$rte-table-popup-row-height : 16px;
$rte-big-table-row-height : 18px;
$rte-big-tablecell-height : 16px;
$rte-big-tablecell-width : 16px;
$rte-toolbar-item-frist-last-child-margin: 0;
$rte-big-toolbar-item-frist-last-child-margin: 0 6px;
$rte-toolbar-expaned-padding: 0 4px;
$rte-big-toolbar-expaned-padding: 0 8px;
$rte-toolbar-expaned-padding-hover: 0 4px;
$rte-formatlists-dropdown-line-height: 20px;
$rte-big-formatlists-dropdown-line-height: 35px;

//Layout Variables End

//Theme Variables Start
$rte-table-multicell-select-bg-color: rgba($primary, .08) !default;
$rte-border-color: $border-light !default;
$rte-content-bg: $content-bg-color !default;
$rte-full-screen-bg: $content-bg-color !default;
$rte-content-font-color: $content-text-color !default;
$rte-item-color: $content-text-color !default;
$rte-icons-color: $icon-color !default;
$rte-tlbar-expand-active: $icon-color !default;
$rte-hover-icons-color: $icon-color !default;
$rte-img-popup-border: 1px solid $border-light !default;
$rte-img-popup-box-shadow: $shadow !default;
$rte-img-popup-color: $border-light !default;
$rte-quick-item-active-bg: $secondary-bg-color-pressed !default;
$rte-quick-item-active-font-color: $icon-color !default;
$rte-quick-item-border: 1px solid transparent !default;
$rte-quick-item-hover-border-color: $secondary-border-color-hover !default;
$rte-quick-item-active-border-color: $secondary-border-color-pressed !default;
$rte-quick-drop-btn-border-color: $content-bg-color-alt2 !default;
$rte-quick-drop-btn-hover-border-color: $content-bg-color-alt2 !default;
$rte-extended-toolbar-background: $content-bg-color-alt2 !default;
$rte-quick-pop-border: none !default;
$rte-quick-tb-border: 1px solid $border-light !default;
$rte-quick-pop-bg: $content-bg-color-alt2 !default;
$rte-quick-vr-line-color: $border-light !default;
$rte-quick-pop-shadow: level3 !default;
$rte-quick-pop-item-focus-bg: $secondary-bg-color-pressed !default;
$rte-quick-tb-btn-hover: $secondary-bg-color-pressed !default;
$rte-tb-item-active-bg: $secondary-bg-color-pressed !default;
$rte-tb-active-font-color: $icon-color !default;
$rte-tb-item-active-border:  1px solid $secondary-border-color-pressed !default;
$rte-expand-tb-border-bottom: $rte-border-size $rte-border-type $border-light !default;
$rte-color-picker-active-bg: inherit !default;
$rte-drop-btn-active-bg: $secondary-bg-color-pressed !default;
$rte-drop-btn-active-color: $icon-color !default;
$rte-drop-btn-active-border-color: $secondary-border-color-pressed !default;
$rte-split-btn-active-hover-font-color: $icon-color !default;
$rte-split-btn-color: $secondary-bg-color-pressed !default;
$rte-tb-hover-font-color: $icon-color !default;
$rte-split-btn-active-color: $icon-color !default;
$rte-split-btn-hover-bg: $content-bg-color-alt1 !default;
$rte-split-btn-active-bg: $secondary-bg-color-pressed !default;
$rte-split-btn-span-hover-bg: $content-bg-color-alt3 !default;
$rte-split-btn-span-focus-bg: $secondary-bg-color-hover !default;
$rte-split-btn-span-active-bg: $secondary-bg-color-pressed !default;
$rte-split-btn-bar-bg: $content-bg-color-alt1 !default;
$rte-split-btn-active-bar-bg: $content-bg-color !default;
$rte-split-btn-bar-size: 0 !default;
$rte-split-btn-active-border: 1px solid $secondary-border-color-hover !default;
$rte-split-btn-active-color-icon-line-height: 30px !default;
$rte-big-split-btn-active-color-icon-line-height: 38px !default;
$rte-qt-item-btn-line-height: 32px;

$rte-link-valid-color: $danger !default;
$rte-upload-drag-border-clr: $border-dark !default;
$rte-img-header-clr: $content-text-color-alt1 !default;
$rte-drop-text-clr: $content-text-color-alt2 !default;
$rte-default-character-count-color: $content-text-color-alt1 !default;
$rte-warning-character-count-color: $warning !default;
$rte-error-character-count-color: $danger !default;
$rte-img-border: solid 2px #4a90e2 !default;
$rte-font-family: $font-family !default;
$rte-content-color: $content-text-color !default;
$rte-content-blockquote-border-left-color: solid 3px $content-bg-color-alt4 !default;
$rte-dropdown-selection-bgcolor: $secondary-bg-color-pressed !default;
$rte-ext-tbar-overlay-icons-color: $icon-color-disabled !default;
$rte-overlay-color: $overlay-bg-color !default;
$rte-dropdown-selection-color: $content-text-color-selected !default;
$rte-anchor-color: $info !default;
$rte-ext-tbar-overlay-dropdown-color: $content-bg-color-alt4 !default;
$rte-img-resize-back-color: $primary !default;
$rte-img-resize-color: $primary-text-color !default;
$rte-table-header-color: $content-text-color !default;
$rte-table-span-bg-color: $content-bg-color !default;
$rte-table-span-border: 1px solid $border-light !default;
$rte-table-span-active-bg-color: $primary-lighter !default;
$rte-table-span-active-border-color: $primary !default;
$rte-table-select-border-color:  $primary !default;
$rte-table-popup-bg: $content-bg-color !default;
$rte-table-resize-back-color: $content-bg-color !default;
$rte-table-popup-color: $border-light !default;
$rte-table-popup-box: $shadow !default;
$rte-table-border-color: $border-light !default;
$rte-table-alternate-color: $content-bg-color-alt1 !default;
$rte-table-header-bg: $content-bg-color-alt1 !default;
$rte-toolbar-hor-nav-border-width: 0 0 0 0 !default;
$rte-border-top-left-radius: 0;
$rte-border-top-right-radius: 0;
$rte-border-bottom-right-radius: 0;
$rte-border-bottom-left-radius: 0;
$rte-big-border-radius: 0;
$rte-extended-toolbar-items-padding: 0;
$rte-expand-tbar-hover-bg: $content-bg-color-alt1 !default;

//Theme Variables End

$rte-tb-hover-bg-color: $content-bg-color-alt1 !default;

$rte-img-dlg-max-height: 363px !default;
$rte-img-alt-dlg-max-height: 363px !default;
$rte-img-link-dlg-max-height: 173px !default;
$rte-img-size-dlg-max-height: 236px !default;
$rte-link-dlg-max-height: 331px !default;
$rte-file-browser-dlg-max-height: 557px !default;
$rte-table-dlg-max-height: 232px !default;
$rte-edit-table-dlg-max-height: 340px !default;
$rte-quick-toolbar-item-margin: 0 6px !default;
$rte-big-quick-toolbar-item-margin: 0 6px !default;
$rte-big-quick-toolbar-items-margin : 0 6px !default;
$rte-big-quick-toolbar-item-btn-padding: 0 !default;
$rte-big-img-dlg-max-height: 397px !default;
$rte-big-img-alt-dlg-max-height: 397px !default;
$rte-big-img-link-dlg-max-height: 211px !default;
$rte-big-img-size-dlg-max-height: 293px !default;
$rte-big-link-dlg-max-height: 378px !default;
$rte-big-file-browser-dlg-max-height: 557px !default;
$rte-big-table-dlg-max-height: 283px !default;
$rte-big-edit-table-dlg-max-height: 388px !default;
$rte-drop-text-width: 300px !default;
$rte-drop-text-height: 128px !default;
$rte-big-drop-text-height: 140px !default;
$rte-drop-text-mobile-width: 250px !default;
$rte-tbar-default-bg: $content-bg-color-alt2;
$rte-big-insert-dialog-label-padding-top: 12px;
$rte-tbar-icon-size: 20px;
$rte-dropdown-btn-color-content-padding: 1px !default;
$rte-big-dropdown-btn-color-content-padding: 0 !default;
$rte-tb-expended-min-height: 40px !default;
$rte-big-tb-expended-min-height: 48px !default;
$rte-tb-expended-padding-left: 1px !default;
$rte-tb-expended-hover-padding-left: 0 !default;
$rte-toolbar-expaned-minwidth: 18px !default;

$rte-emoji-pop-background: $flyout-bg-color;
$rte-emoji-pop-box-shadow: none;
$rte-emoji-pop-border-radius: 4px;
$rte-emoji-pop-border:1px solid $cool-gray-200;
$rte-emoji-tbar-btn-bg: transparent;
$rte-emoji-tbar-btn-select-bg : $secondary-border-color-hover;
$rte-emoji-tbar-btn-hover: $secondary-border-color-hover;
$rte-emoji-btn-height: 249px;
$rte-emoji-grp-btn-line-height: 1px;
$rte-emoji-grp-btn-height: 40px;
$rte-emoji-grp-btn-width: 40px;
$rte-emoji-headname-font-weight: 400;
$rte-emoji-headname-color:$content-text-color-alt2;
$rte-big-emoji-btn-height: 254px;
$rte-background-color-icon-fontsize: 20px;
$rte-big-background-color-icon-fontsize: 20px;
$rte-content-pre-background: inherit;
$rte-code-background: rgba(157, 157, 157, .15) !default;
$rte-code-color: rgba(237, 72, 76) !default;

$rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAzMiAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUgMi41QzQuNDQ3NzIgMi41IDQgMi45NDc3MiA0IDMuNUM0IDQuMDUyMjggNC40NDc3MiA0LjUgNSA0LjVINi42OTcyMkw3LjUgNS4wMzUxOFYxNi45NjQ4TDYuNjk3MjIgMTcuNUg1QzQuNDQ3NzIgMTcuNSA0IDE3Ljk0NzcgNCAxOC41QzQgMTkuMDUyMyA0LjQ0NzcyIDE5LjUgNSAxOS41SDYuNjk3MjJDNy4wOTIwNyAxOS41IDcuNDc4MDkgMTkuMzgzMSA3LjgwNjYyIDE5LjE2NDFMOC41IDE4LjcwMTlMOS4xOTMzOCAxOS4xNjQxQzkuNTIxOTEgMTkuMzgzMSA5LjkwNzkzIDE5LjUgMTAuMzAyOCAxOS41SDEyQzEyLjU1MjMgMTkuNSAxMyAxOS4wNTIzIDEzIDE4LjVDMTMgMTcuOTQ3NyAxMi41NTIzIDE3LjUgMTIgMTcuNUwxMC4zMDI4IDE3LjVMOS41IDE2Ljk2NDhWNS4wMzUxOEwxMC4zMDI4IDQuNUgxMkMxMi41NTIzIDQuNSAxMyA0LjA1MjI4IDEzIDMuNUMxMyAyLjk0NzcyIDEyLjU1MjMgMi41IDEyIDIuNUgxMC4zMDI4QzkuOTA3OTMgMi41IDkuNTIxOTEgMi42MTY4OCA5LjE5MzM4IDIuODM1OUw4LjUgMy4yOTgxNUw3LjgwNjYyIDIuODM1OUM3LjQ3ODA5IDIuNjE2ODggNy4wOTIwNyAyLjUgNi42OTcyMiAyLjVINVoiIGZpbGw9ImJsYWNrIiBzdHJva2U9IndoaXRlIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPHBhdGggZD0iTTIzLjUgNFY4LjVIMjVDMjUuODI4NCA4LjUgMjYuNSA5LjE3MTU3IDI2LjUgMTBWMTEuNVYxNy41SDIzLjVIMjAuNUgxNi41QzE3LjUgMTUgMTcuNSAxMS41IDE3LjUgMTEuNVYxMEMxNy41IDkuMTcxNTcgMTguMTcxNiA4LjUgMTkgOC41SDIwLjVWNEMyMC41IDMuMTcxNTcgMjEuMTcxNiAyLjUgMjIgMi41QzIyLjgyODQgMi41IDIzLjUgMy4xNzE1NyAyMy41IDRaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNMjMuNSA4LjVWNEMyMy41IDMuMTcxNTcgMjIuODI4NCAyLjUgMjIgMi41VjIuNUMyMS4xNzE2IDIuNSAyMC41IDMuMTcxNTcgMjAuNSA0VjguNU0yMy41IDguNUgyNUMyNS44Mjg0IDguNSAyNi41IDkuMTcxNTcgMjYuNSAxMFYxMS41TTIzLjUgOC41SDIwLjVNMjAuNSA4LjVIMTlDMTguMTcxNiA4LjUgMTcuNSA5LjE3MTU3IDE3LjUgMTBWMTEuNU0yNi41IDExLjVWMTcuNUgyMy41TTI2LjUgMTEuNUgxNy41TTE3LjUgMTEuNUMxNy41IDExLjUgMTcuNSAxNSAxNi41IDE3LjVIMjAuNU0yMy41IDE3LjVWMTQuNU0yMy41IDE3LjVIMjAuNU0yMC41IDE3LjVWMTUuNSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=')  8 1, auto;

$rte-img-upload-abort-icon-btn-margin-right: 52px;
$rte-img-upload-abort-icon-btn-margin-top: 5px;
$rte-big-img-upload-abort-icon-btn-margin-right: 66px;
$rte-big-img-upload-abort-icon-btn-margin-top: -2px;
$rte-big-img-upload-abort-icon-btn-padding: 18px;
$rte-dialog-upload-status-progress: $info;

@include export-module('richtexteditor-layout') {

  /*! tab layout */

  .e-richtexteditor {
    display: block;
    position: relative;

    .e-rte-container {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
  
      &.e-count-enabled,
      &.e-resize-enabled {
        .e-content {
          padding-bottom: 0;
        }
  
        .e-rte-content,
        .e-source-content {
          margin-bottom: 20px;
        }
      }
  
      &.e-source-code-enabled {
        .e-rte-content {
          display: none;
        }
  
        .e-source-content {
          display: block;
          overflow: hidden;
        }
      }
    }
  
    .e-rte-content {
      flex-grow: 1;
  
      .rte-placeholder.e-rte-placeholder.enabled {
        display: block;
        font-size: $rte-content-font-size;
      }
    }
  
    .e-source-content {
      display: none;
    }

    & textarea.e-content {
      border: 0;
      display: block;
      height: 100%;
      margin: 0;
      outline: 0;
      padding: 8px;
      resize: none;
      width: 100%;
    }

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

    &.e-disabled {
      pointer-events: none;
    }

    &.e-rte-full-screen {
      bottom: 0;
      height: 100% !important; /* stylelint-disable-line declaration-no-important */
      left: 0;
      overflow: auto;
      position: fixed;
      right: 0;
      top: 0;
      width: 100% !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-character-count {
      left: 0;
      padding-left: 30px;
      padding-right: unset;
      right: unset;
    }

    &.e-rtl .e-rte-content .e-content blockquote {
      padding-left: 0;
      padding-right: 12px;
    }

    .e-rte-toolbar {

      @if $skin-name == 'bootstrap5' {
        &.e-toolbar .e-hor-nav {
          min-height: $toolbar-expand-icon-min-height;
        }
      }

      .e-toolbar-items:not(.e-tbar-pos):not(.e-toolbar-multirow) .e-toolbar-item:first-child {
        margin-left: $rte-tb-items-margin-left;
      }

      .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-item:first-child {
        margin-left: 0;
      }

      .e-hor-nav.e-expended-nav {
        height: auto;
      }

      .e-toolbar-multirow {
        margin-left: 7px;
        margin-right: 7px;
      }
    }

    &.e-rtl .e-rte-toolbar .e-toolbar-items:not(.e-tbar-pos):not(.e-toolbar-multirow) .e-toolbar-item:first-child {
      margin-left: 0;
      margin-right: $rte-tb-items-margin-left;
    }

    &.e-rtl .e-rte-toolbar .e-toolbar-multirow:not(.e-tbar-pos) .e-toolbar-item:first-child {
      margin-right: 0;
    }

    .e-rte-toolbar.e-rte-tb-mobile .e-toolbar-multirow {
      display: inline-block;
      margin-left: 0;
      margin-right: 0;
      overflow-x: auto;
      white-space: nowrap;
      width: 100%;
    }

    .e-rte-toolbar,
    .e-rte-toolbar.e-toolbar.e-extended-toolbar {

      .e-toolbar-extended {
        margin-left: 0;
        padding-left: $rte-tb-items-padding-left;
      }
    
      .e-toolbar-items,
      .e-toolbar-extended {

        .e-toolbar-item {

          .e-formats-tbar-btn > :first-child {
            min-width: $rte-format-btn-min-width;
          }

          .e-font-name-tbar-btn > :first-child {
            min-width: $rte-font-name-btn-min-width;
          }

          .e-font-size-tbar-btn > :first-child {
            min-width: $rte-font-size-btn-min-width;
          }

          .e-dropdown-btn {
            padding-left: $rte-drop-btn-padding-left;
            padding-right: $rte-drop-btn-padding-right;

            .e-rte-dropdown-btn-text {
              font-size: $dropdown-btn-font-size;
              font-weight: $font-weight;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          .e-dropdown-btn:hover,
          .e-dropdown-btn:focus,
          .e-dropdown-btn:active {
            padding-left: $rte-drop-btn-action-padding-left;
            padding-right: $rte-drop-btn-action-padding-right;
          }

          .e-rte-font-color .e-selected-color.e-icons::before {
            font-size: 12px;
            position: relative;
            top: -18px;
          }

          .e-rte-numberformatlist-dropdown .e-rte-list-primary-content,
          .e-rte-bulletformatlist-dropdown .e-rte-list-primary-content {
            line-height: $rte-formatlists-dropdown-line-height;
            @if $skin-name == 'FluentUI' {
              padding: 5px;
            }
          }

          .e-background-color.e-icons::before {
            display: inline;
            font-size: $rte-background-color-icon-fontsize;
          }

          .e-rte-font-color.e-icons::before {
            font-size: $rte-background-color-icon-fontsize;
          }

          .e-tbar-btn {

            .e-order-list.e-icons,
            .e-unorder-list.e-icons,
            .e-icons.e-btn-icon:not(.e-caret) {
              font-size: $rte-toolbar-icon-size;
            }
          }

          &.e-active .e-tbar-btn.e-btn {
            padding: $rte-active-tb-item-btn-padding;
            @if $skin-name == 'FluentUI' {
              border-radius: 0;
            }
          }
        }
        .e-dropdown-btn .e-rte-color-content {
          padding-top: $rte-dropdown-btn-color-content-padding;
          height: $rte-dropdown-btn-color-content-height;
        }
      }

      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
        .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
          padding: 0 4px;
        }
      }

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

      .e-toolbar-extended.e-visible {
        display: block;
        visibility: hidden;
      }

      &.e-tbar-ios-fixed.e-rte-tb-fixed {
        top: 0;
        transform: translate3d(0, 0, 0);
      }

      &.e-rte-tb-fixed:not(.e-tbar-ios-fixed) {
        bottom: 0;
      }

      &.e-rte-tb-fixed {
        display: none;
        left: 0;
        position: fixed;
        right: 0;

        &.e-show {
          display: block;
          z-index: 101;
        }
      }
    }

    .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 {
      position: relative;
      z-index: 1;
    }

    .e-rte-content,
    .e-source-content  {
      /* 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;
      width: 100%;
      font-size: $rte-content-font-size;

      .e-content {
        width: 100%;
        float: left;
        background: unset;
        box-sizing: border-box;
        height: 100%;
        min-height: 100px;
        outline: 0 solid transparent;
        padding: $rte-content-padding;
        position: relative;
        text-align: inherit;
        z-index: 2;
        font-weight: normal; /* normal = 400 */
        line-height: 1.5;
        font-size: 1em;
      }

      .e-content p {
        margin: 0 0 10px;
        margin-bottom: 10px;
      }

      .e-content code {
        background: $rte-code-background;
        color: $rte-code-color;
      }

      .e-content li {
        margin-bottom: 10px;
      }
      
      .e-content li ol,
      .e-content li ul {
        margin-block-start: 10px;
      }

      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: 2.857em;
        font-weight: 600;
        line-height: 1.2;
        margin: 10px 0;
      }

      .e-content h2 {
        font-size: 2.285em;
        font-weight: 600;
        line-height: 1.2;
        margin: 10px 0;
      }

      .e-content h3 {
        font-size: 2em;
        font-weight: 600;
        line-height: 1.2;
        margin: 10px 0;
      }

      .e-content h4 {
        font-size: 1.714em;
        font-weight: 600;
        line-height: 1.2;
        margin: 10px 0;
      }

      .e-content h5 {
        font-size: 1.428em;
        font-weight: 600;
        line-height: 1.2;
        margin: 10px 0;
      }

      .e-content h6 {
        font-size: 1.142em;
        line-height: 600;
        line-height: 1.5;
        margin: 10px 0;
      }

      .e-content blockquote {
        margin: 10px 0;
        margin-left: 0;
        padding-left: 12px;
      }
      
      .e-content table {
        margin-bottom: 10px;
        border-collapse: collapse;
        empty-cells: show;
      }

      .e-content pre {
        background-color: $rte-content-pre-background;
        border: 0;
        border-radius: 0;
        color: $rte-content-color;
        font-size: inherit;
        line-height: inherit;
        margin: 0 0 10px;
        overflow: visible;
        padding: 0;
        white-space: pre-wrap;
        word-break: inherit;
        word-wrap: break-word;

        @if $skin-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
          background-color: $rte-pre-bg-color;
        }
      }

      .e-content strong,
      .e-content b {
        font-weight: bold;
      }

      .e-content a {
        text-decoration: none;
        user-select: auto;
      }

      .e-content a:hover {
        text-decoration: underline;
      }

      .e-content p:last-child,
      .e-content pre:last-child,
      .e-content blockquote:last-child {
        margin-bottom: 0;
      }

      .e-content h3 + h4,
      .e-content h4 + h5,
      .e-content h5 + h6 {
        margin-top: .6em;
      }

      .e-content ul:last-child {
        margin-bottom: 0;
      }

      .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: 2px solid $rte-table-select-border-color;
        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: 1px double $rte-table-select-border-color;
        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: 100%;
        height: 100%;
        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-character-count {
      bottom: 0;
      color: $rte-default-character-count-color;
      font-size: 14px;
      margin-right: 10px;
      opacity: $rte-default-character-count-opacity;
      padding-bottom: 2px;
      position: absolute;
      right: 0;
      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;
      }
    }

    .e-rte-srctextarea {
      background-color: transparent;
      border: 0;
      color: $rte-content-color;
      height: 100%;
      line-height: 22px;
      overflow: auto;
      padding: 16px;
      resize: none;
      transition: 100ms ease-out;
      width: 100%;
    }

    .e-resize-handle {
      height: $rte-resize-handler-height;
      position: absolute;
      width: $rte-resize-handler-width;

      &.e-south-east {
        bottom: $rte-resize-handler-position;
        cursor: nwse-resize;
        right: $rte-resize-handler-position;
        z-index: 100;
      }

      &.e-south-west {
        bottom: $rte-resize-handler-position;
        cursor: sw-resize;
        left: $rte-resize-handler-position;
        transform: rotate(90deg);
        z-index: 100;
      }
    }

    &.e-rtl {

      &.e-rte-resize {
        float: right;
      }

      .e-resize-handle.e-south-west {
        direction: ltr;
        text-align: initial;
      }
    }

    &.e-rte-tb-expand {
      &.e-rte-fixed-tb-expand {
        transition: none;
      }
    }
    .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon:not(.e-toolbar-pop) {
      padding: $rte-extended-toolbar-items-padding;
    }
    .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
      background: $rte-expand-tbar-hover-bg;
    }
    .e-toolbar .e-toolbar-item .e-tbar-btn,
    .e-toolbar.e-extended-toolbar .e-toolbar-extended.e-toolbar-pop .e-toolbar-item .e-tbar-btn{
      font-size: $rte-tbar-icon-size;
    }
    .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: 0;
      outline: none;
      padding: 0;
      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: 5px;
      padding-top: 15px;
    }

    .e-video-url-wrap .e-radio-wrapper {
      padding: 5px;
    }

    .e-video-url-wrap textarea {
      height: 80px;
    }

    .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon.e-caret:not(.e-toolbar-pop,.e-rte-fontcolor-dropdown .e-caret,.e-rte-backgroundcolor-dropdown .e-caret, .e-rte-numberformatlist-dropdown .e-caret,.e-rte-bulletformatlist-dropdown .e-caret){
      padding-left: 9px;
    }
    .e-toolbar-item .e-caret:not(.e-toolbar-pop,.e-rte-fontcolor-dropdown .e-caret,.e-rte-backgroundcolor-dropdown .e-caret, .e-rte-numberformatlist-dropdown .e-caret,.e-rte-bulletformatlist-dropdown .e-caret){
      padding-left: 9px;
    }
  }

  .e-rte-quick-toolbar .e-toolbar-item .e-caret:not(.e-toolbar-pop,.e-rte-fontcolor-dropdown .e-caret,.e-rte-backgroundcolor-dropdown .e-caret, .e-rte-numberformatlist-dropdown .e-caret,.e-rte-bulletformatlist-dropdown .e-caret){
    padding-left: 9px;
  }

  .e-rte-linkcontent .e-rte-label {
    padding-top: $rte-insert-dialog-label-padding-top;
  }

  .e-rte-label label {
    font-weight: normal;
  }

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

  .e-rte-dropdown-popup {

    &.e-rte-inline-dropdown {

      @media screen and (max-width: 768px) {
        ul {
          padding: 7px 0;

          li.e-item {
            height: 34px;
            line-height: 34px;
            padding: 0 6.5px;
          }

          .e-item .e-menu-icon {
            float: none;
          }
        }
      }

      &.e-rte-dropdown-icons.e-dropdown-popup {

        @media screen and (max-width: 768px) {
          max-height: 280px;

          ul {
            display: inline-flex;
          }
        }
      }
    }

    ul {
      min-width: 82px;

      .e-item {

        .e-menu-icon {
          margin: 0 6px;
          width: auto;
        }

        &.e-h1 {
          font-size: 2em;
          font-weight: bold;
          height: 40px;
          @if $skin-name =='fluent2' {
            line-height: 25px;
          }
          @else {
            line-height: 40px;
          }
        }

        &.e-code{
          font-family: monospace;
          unicode-bidi: isolate;
          white-space: pre;
        }

        &.e-h2 {
          font-size: 1.5em;
          font-weight: bold;
          height: 40px;
          @if $skin-name =='fluent2' {
            line-height: 25px;
          }
          @else {
            line-height: 40px;
          }
        }

        &.e-h3 {
          font-size: 1.16em;
          font-weight: bold;
        }

        &.e-h4 {
          font-size: 1em;
          font-weight: bold;
        }

        &.e-h5 {
          font-size: .83em;
          font-weight: bold;
        }

        &.e-h6 {
          font-size: .7em;
          font-weight: bold;
        }

        &.e-segoe-ui {
          font-family: 'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', sans-serif;
        }

        &.e-arial {
          font-family: 'Arial', 'Helvetica', sans-serif;
        }

        &.e-courier-new {
          font-family: 'Courier New', 'Courier', monospace;
        }

        &.e-georgia {
          font-family: 'Georgia', 'Times New Roman', 'Times', serif;
        }

        &.e-helvetica-neue {
          font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
        }

        &.e-impact {
          font-family: 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
        }

        &.e-lucida-console {
          font-family: 'Lucida Console', 'Monaco', monospace;
        }

        &.e-tahoma {
          font-family: 'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', sans-serif;
        }

        &.e-times-new-roman {
          font-family: 'Times New Roman', 'Times', serif;
        }

        &.e-trebuchet-ms {
          font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'Arial', sans-serif;
        }

        &.e-verdana {
          font-family: 'Verdana', 'Geneva', 'Tahoma', sans-serif;
        }

        &.e-roboto {
          font-family: 'Roboto', 'Segoe UI', 'GeezaPro', 'DejaVu Serif', sans-serif;
        }
      }
    }

    &.e-rte-dropdown-icons {

      ul {
        min-width: auto;
      }

      @media screen and (max-width: 768px) {

        ul {
          min-width: 30px;
        }
      }
    }

    &.e-rtl {
      ul .e-item .e-menu-icon {
        margin: 0 6px;
      }
    }
  }

  .e-rte-image.e-imgbreak,
  .e-rte-audio.e-audio-break,
  .e-rte-video.e-video-break {
    border: 0;
    cursor: pointer;
    display: block;
    float: none;
    max-width: 100%;
    padding: 1px;
    position: relative;
  }

  .e-rte-image,
  .e-rte-audio,
  .e-rte-video  {
    border: 0;
    cursor: pointer;
    display: block;
    float: none;
    margin: auto;
    max-width: 100%;
    position: relative;
  }

  .e-rte-image.e-imginline,
  .e-rte-audio.e-audio-inline,
  .e-rte-video.e-video-inline {
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
    float: none;
    max-width: 100%;
    padding: 1px;
    vertical-align: bottom;
  }

  .e-rte-image.e-imgcenter,
  .e-rte-video.e-video-center {
    cursor: pointer;
    display: block;
    float: none;
    margin: 5px auto;
    max-width: 100%;
    position: relative;
  }

  .e-rte-image.e-imgleft,
  .e-rte-video.e-video-left {
    float: left;
    margin: 0 auto;
    margin-right: 5px;
    text-align: left;
  }

  .e-rte-image.e-imgright,
  .e-rte-video.e-video-right {
    float: right;
    margin: 0 auto;
    margin-left: 5px;
    text-align: right;
  }

  .e-rte-img-popup .e-item {
    height: 106px;
    width: 300px;
  }

  .e-rte-img-caption {
    display: inline-block;
    margin: 5px auto;
    max-width: 100%;
    position: relative;
  }

  .e-rte-img-caption.e-caption-inline {
    display: inline-block;
    margin: 5px auto;
    margin-left: 5px;
    margin-right: 5px;
    max-width: calc(100% - (2 * 5px));
    position: relative;
    text-align: center;
    vertical-align: bottom;
  }

  .e-rte-img-caption.e-imgcenter {
    display: contents;
    margin-left: auto;
    margin-right: auto;
  }

  .e-rte-img-caption.e-imgright {
    display: contents;
    margin-left: auto;
    margin-right: 0;
  }

  .e-rte-img-caption.e-imgleft {
    display: contents;
    margin-left: 0;
    margin-right: auto;
  }

  .e-rte-img-caption .e-rte-image.e-imgright {
    margin-left: auto;
    margin-right: 0;
  }

  .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: 1px solid $rte-table-border-color;
    height: 20px;
    min-width: 20px;
    padding: 2px 5px;
    box-sizing: border-box;
  }

  .e-rte-table.e-dashed-border td,
  .e-rte-table.e-dashed-border th {
    border-style: dashed;
  }

  .e-rte-img-caption .e-img-inner {
    box-sizing: border-box;
    display: block;
    font-size: $rte-toolbar-icon-size;
    font-weight: initial;
    margin: auto;
    opacity: .9;
    position: relative;
    text-align: center;
    width: 100%;
  }

  .e-rte-img-caption.e-imgleft .e-img-inner {
    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-rte-img-caption .e-img-wrap {
    display: inline-block;
    margin: auto;
    padding: 0;
    width: 100%;
  }

  .e-rte-img-dialog .e-rte-label {
    padding-top: $rte-insert-dialog-label-padding-top;
  }

  .e-rte-img-dialog .e-rte-label:first-child {
    padding-top: 0;
  }

  .e-rte-video-dialog .e-rte-label {
    padding-top: $rte-insert-dialog-label-padding-top;
  }

  .e-rte-video-dialog .e-rte-label:first-child {
    padding-top: 0;
  }

  .e-rte-table-resize.e-row-resize,
  .e-rte-table-resize.e-column-resize {
    background-color: transparent;
    background-repeat: repeat;
    bottom: 0;
    cursor: col-resize;
    height: 1px;
    overflow: visible;
    position: absolute;
    width: 1px;
  }

  .e-rte-table-resize.e-row-resize {
    cursor: row-resize;
    height: 1px;
  }

  .e-richtexteditor,
  .e-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-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn,
    .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control {
      padding: $rte-toolbar-expaned-padding;
    }

    .e-toolbar .e-toolbar-pop .e-toolbar-item.e-tbtn-align .e-btn.e-control .e-icons.e-btn-icon {
      min-width: $rte-toolbar-expaned-minwidth;
    }

    .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
      padding: $rte-toolbar-expaned-padding-hover;
    }

    .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  {
      margin-top: 0;
    }

    .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-abort-btn.e-icons,
    .e-vid-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
      margin-right: 30px;
    }

    .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list,
    .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  {
      border-bottom: 0 solid transparent;
      min-height: initial;
    }

    .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list .e-file-container,
    .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 {
      margin-left: 0;
      margin-right: 0;
    }

    .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 {
      border-top: 0 solid transparent;
    }

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

    .e-img-uploadwrap.e-droparea .e-upload,
    .e-aud-uploadwrap.e-droparea .e-upload,
    .e-vid-uploadwrap.e-droparea .e-upload {
      border: 0 solid transparent;
      float: none;
    }

    .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
      margin-right: $rte-img-upload-abort-icon-btn-margin-right;
      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 {
      display: block;
      height: $rte-droparea-browsebtn-height;
      margin: 0 auto 10px;
      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 {
      display: none;
    }

    .e-dialog .e-img-uploadwrap.e-droparea,
    .e-dialog .e-aud-uploadwrap.e-droparea,
    .e-dialog .e-vid-uploadwrap.e-droparea {
      line-height: $rte-droparea-line-height;
      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 {
      display: inline-block;
      line-height: normal;
    }

    .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 {
      line-height: 4;
    }

    .e-rte-inline-dropdown ul {
      max-height: 200px;
      overflow-y: auto;
    }

    .e-rte-dropdown-popup.e-rte-dropdown-items ul {
      max-height: 280px;
      overflow-y: auto;
    }

    .e-dropdown-btn.e-rte-backgroundcolor-dropdown,
    .e-dropdown-btn.e-rte-fontcolor-dropdown,
    .e-dropdown-btn.e-rte-numberformatlist-dropdown,
    .e-dropdown-btn.e-rte-bulletformatlist-dropdown {
      line-height: $rte-inline-dropdown-line-height;
    }

    .e-rte-table-popup.e-popup.e-popup-open {
      border-radius: $rte-table-popup-bdr-radius;
      box-shadow: $rte-table-popup-box;
      font-size: 14px;
      font-weight: normal;
      min-width: 120px;
      overflow: hidden;
      padding: $rte-table-popup-padding;
      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: 100%;
    }

    .e-rte-edit-table .e-rte-field {
      padding-top: $rte-insert-dialog-label-padding-top;
    }

    .e-rte-edit-table .e-rte-field:first-child {
      padding-top: 0;
    }

    .e-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: 1px double $rte-table-select-border-color;
      height: inherit;
    }

    span.e-table-box {
      cursor: nwse-resize;
      display: block;
      height: 10px;
      position: absolute;
      width: 10px;

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

    span.e-table-box.e-rmob {
      height: 14px;
      width: 14px;
    }

    .e-upload .e-upload-files .e-upload-file-list .e-file-container {
      margin-right: 50px;
    }

    .e-rte-upload-popup {
      width: 250px;
    }

    .e-rte-dialog-upload .e-upload-files {
      border-top: 0;
    }

    .e-rte-dialog-upload .e-upload-files .e-upload-file-list {
      border-bottom: 0;
    }

    .e-rte-emojipicker-popup.e-popup.e-popup-open {
      border: $rte-emoji-pop-border;
      min-width: 120px;
      height: 330px;
      width: 308px;

      .e-toolbar .e-toolbar-item .e-tbar-btn {
        padding: 7px 3px;
        border-radius: 4px;
        
        @if $skin-name =='bootstrap' or $skin-name =='botstrap-dark' {
          &:hover,
          &:focus{
            padding: 7px 3px;
          }
        }

        @if $skin-name =='material' or $skin-name =='material-dark' {
          padding: 0 6px;
        }

        .e-tbar-btn-text {
          @if $skin-name =='fluent2' {
            font-size: 16px;
          }
          @else {
            font-size: 24px;
          }
          padding: 0;
        }
      }

      .e-input-group.e-control-wrapper {
        margin: 10px;
        width: 94%;

        .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: 10px;
        height: $rte-emoji-btn-height;
        overflow: auto;
        padding: 10px;

        .e-rte-emojipicker-group .e-rte-emojipickerbtn-group {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
          gap: 6px;

          .e-btn.e-control {
            display: inline-block;
            box-shadow: none;
            padding: 6px 0;
            width: $rte-emoji-grp-btn-width;
            height: $rte-emoji-grp-btn-height;
            border: none;
            line-height: $rte-emoji-grp-btn-line-height;
            @if $skin-name =='fluent2' {
              font-size: 16px;
            }
            @else {
              font-size: 24px;
            }
          }
        }

        .e-rte-emojisearch-btn {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
          gap: 6px;
          height: 0;

          .e-btn.e-control {
            display: inline-block;
            box-shadow: none;
            font-size: 24px;
            padding: 6px 0;
            width: 40px;
            height: 40px;
            border: none;
            line-height: $rte-emoji-grp-btn-line-height;
          }
        }

        .e-rte-emojipicker-group .e-rte-emojipicker-name {
          font-weight: $rte-emoji-headname-font-weight;
          font-size: 14px;
        }

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

      & .e-switch-ctrl-btn {
        padding: 5px;
      }
    }
  }

  .e-rte-quick-popup {
    border-radius: 2px;
    overflow: hidden;

    .e-rte-quick-toolbar {
      border-radius: 2px;
      min-height: 42px;

      .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
        white-space: nowrap;
        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) {
        border-radius: 2px;
        margin: $rte-quick-toolbar-item-margin;
        min-height: 42px;

        .e-toolbar-item.e-rte-horizontal-separator,
        .e-toolbar-item.e-separator.e-multirow-separator.e-rte-horizontal-separator {
          display: block;
          height: 1px;
          margin: 0;
          min-height: 1px;
        }

        .e-toolbar-item {
          margin: $rte-toolbar-item-frist-last-child-margin;
          min-height: 42px;

          &:first-child,
          &:last-child {
            margin: 0;
          }

          .e-tbar-btn:not(.e-rte-dropdown-btn) {
            line-height: $rte-qt-item-btn-line-height;
          }

          .e-tbar-btn:not(.e-rte-dropdown-btn) .e-icons {
            min-width: $rte-quick-item-icon-min-width;
          }
        }

        .e-toolbar-item .e-btn,
        .e-toolbar-item .e-btn:hover {
          min-height: $rte-quick-item-btn-height;
          min-width: $rte-quick-item-btn-width;
          padding: $rte-quick-item-padding;
          @if $skin-name == 'FluentUI' {
            padding-left: $rte-quick-item-padding-left;
            padding-right: $rte-quick-item-padding-right;
          }
        }
      }

      .e-tbar-btn {
        .e-icons.e-btn-icon:not(.e-caret) {
          font-size: $rte-toolbar-icon-size;
        }
      }

      .e-background-color.e-icons::before {
        display: inline;
      }

      .e-rte-fontcolor-dropdown .e-btn-icon.e-caret,
      .e-rte-backgroundcolor-dropdown .e-btn-icon.e-caret,
      .e-rte-numberformatlist-dropdown .e-btn-icon.e-caret,
      .e-rte-bulletformatlist-dropdown .e-btn-icon.e-caret {
        font-size: 10px;
      }
      &.e-rte-toolbar.e-toolbar {
        box-sizing: border-box;
      }
    }

    .e-rte-dropdown-btn.e-tbar-btn {
      line-height: $rte-quick-drop-btn-line-height;
      margin: $rte-quick-drop-btn-margin;
      padding: $rte-quick-drop-btn-padding;

      .e-rte-dropdown-btn-text {
        font-weight: $font-weight;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .e-order-list.e-icons,
      .e-unorder-list.e-icons,
      .e-icons:not(.e-caret) {
        font-size: 14px;
      }

      .e-caret {
        font-size: $rte-quick-drop-btn-caret-font-size;
        width: 12px;
      }
    }

    &.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-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item {
    button.e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
    button.e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
    button.e-rte-numberformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
    button.e-rte-bulletformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control {
      @if $skin-name == 'FluentUI' {
        .e-btn-icon.e-icons.e-caret {
          padding-top: 0;
        }
      }
    }
  }

  .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item,
  .e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item,
  .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item,
  .e-rte-toolbar.e-toolbar .e-toolbar-extended .e-toolbar-item {

    .e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
    .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
    .e-rte-numberformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
    .e-rte-bulletformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control {
      display: flex;
      padding-left: $rte-colorpicker-parent-padding;
      padding-right: $rte-colorpicker-parent-padding;
      @if $skin-name == 'FluentUI' {
        padding-top: $rte-colorpicker-parent-padding-top;
      }

      &:hover,
      &:active,
      &.e-active,
      &.e-active:hover {
        padding-left: $rte-colorpicker-parent-padding-hover;
        padding-right: $rte-colorpicker-parent-padding-hover;
        @if $skin-name == 'FluentUI' {
          padding-top: $rte-colorpicker-parent-padding-hover-top;
        }
      }

      .e-rte-color-content,
      .e-rte-list-primary-content {
        position: relative;
        vertical-align: middle;
        width: $rte-font-icon-width;
      }

      .e-rte-color-content {
        .e-rte-elements {
          border-bottom-style: solid;
          border-bottom-width: 3px;
          padding-bottom: 1px;
        }
      }

      .e-rte-list-primary-content .e-order-list,
      &.e-active .e-rte-list-primary-content .e-order-list,
      .e-rte-list-primary-content .e-unorder-list,
      &.e-active .e-rte-list-primary-content .e-unorder-list {
        line-height: $rte-split-btn-active-color-icon-line-height;
      }

      .e-rte-color-content::after {
        content: '';
        height: 100%;
        position: absolute;
        right: 0;
        width: $rte-split-btn-bar-size;
      }

      .e-icons.e-btn-icon {
        display: flex;
        flex-direction: $rte-list-btn-flex;
        justify-content: center;
        line-height: $rte-list-btn-line-height;
        min-width: $rte-font-arrow-width;
        text-align: center;
        width: $rte-font-arrow-width;
      }

      @if $skin-name == 'bootstrap5' {

        .e-icons.e-btn-icon.e-caret:not(.e-toolbar-pop) {
          padding-left: 0;
          padding-right: 0;
        }
      }
    }

    .e-dropdown-btn.e-tbar-btn .e-icons.e-btn-icon.e-caret {
      font-size: $rte-dropdown-caret-icon-size;

      @if $skin-name == 'bootstrap5' {
        &:not(.e-toolbar-pop) {
          font-size: 12px;
        }
      }
    }
    @if $skin-name == 'bootstrap5' {
      .e-dropdown-btn.e-alignment-tbar-btn .e-btn-icon.e-caret {
        min-width: $rte-align-caret-icon-min-width;
      }
    }

    @if $skin-name == 'FluentUI' {
      .e-dropdown-btn:focus,
      .e-dropdown-btn.e-btn:focus {
        box-shadow: none;
      }
    }
  }

  .e-rte-inline-dropdown .e-rte-color-content .e-rte-elements {
    border-bottom-style: solid;
    border-bottom-width: 3px;
    line-height: $rte-font-icon-line-height;
    padding-bottom: 1px;
  }

  .e-popup-modal.e-popup.e-popup-open {
    display: inline-flex;
  }

  .e-rte-modal-popup.e-popup-container.e-center {
    justify-content: center;
  }

  .e-rte-modal-popup.e-popup-container {
    align-items: center;
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
  }

  .e-popup-overlay {
    height: 100%;
    left: 0;
    opacity: .5;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .e-table-rhelper {
    cursor: col-resize;
    opacity: .87;
    position: absolute;
  }

  .e-table-rhelper.e-column-helper {
    width: 1px;
  }

  .e-table-rhelper.e-row-helper {
    height: 1px;
  }

  .e-reicon::before {
    border-bottom: 6px solid transparent;
    border-right: 6px solid;
    border-top: 6px solid transparent;
    content: '';
    display: block;
    height: 0;
    position: absolute;
    right: 4px;
    top: 4px;
    width: 20px;
  }

  .e-reicon::after {
    border-bottom: 6px solid transparent;
    border-left: 6px solid;
    border-top: 6px solid transparent;
    content: '';
    display: block;
    height: 0;
    left: 4px;
    position: absolute;
    top: 4px;
    width: 20px;
    z-index: 3;
  }

  .e-row-helper.e-reicon::after {
    top: 10px;
    transform: rotate(90deg);
  }

  .e-row-helper.e-reicon::before {
    left: 4px;
    top: -20px;
    transform: rotate(90deg);
  }

  .e-rte-overflow {
    overflow: hidden;
  }

  .e-dialog.e-rte-dialog-minheight {
    min-height: 296px;
    @if $skin-name == 'FluentUI' or $skin-name =='fluent2' {
      min-height: 308px;
    }
  }

  .e-content-placeholder.e-richtexteditor.e-placeholder-richtexteditor {
    background-size: 700px 190px;
    min-height: 190px;
  }

  .e-rte-table.e-rte-table-border {
    border: 1px solid $rte-table-border-color;
    border-collapse: separate;
  }

  .e-rte-img-dialog.e-dialog.e-device.e-dlg-modal,
  .e-rte-audio-dialog.e-dialog.e-device.e-dlg-modal,
  .e-rte-video-dialog.e-dialog.e-device.e-dlg-modal {
    .e-img-uploadwrap.e-droparea,
    .e-aud-uploadwrap.e-droparea,
    .e-vid-uploadwrap.e-droparea {
      line-height: 10;
      min-height: 50px;
      position: relative;

      .e-browsebtn {
        display: block;
        height: 36px;
        margin: 0 auto 10px;
        padding: 0 18px;
        position: relative;
        top: 6px;
        @if $skin-name == 'FluentUI' {
          outline: none;
        }
      }

      .e-upload {
        border: 0 solid transparent;
        float: none;
      }

      .e-file-select-wrap {
        display: none;
      }
    }

    .e-linkheader {
      font-family: $rte-font-family;
      font-size: $rte-big-insert-dialog-font-size;
      opacity: .87;
      padding-bottom: $rte-insert-dialog-label-padding-bottom;
      padding-top: $rte-insert-dialog-label-padding-top;
    }
  }

  .e-rte-file-manager-dialog {

    .e-rte-label {
      padding-bottom: 8px;
      padding-top: 15px;

      label {
        font-size: 15px;
        opacity: .87;
      }
    }
  }

  .e-dialog .e-img-uploadwrap .e-droptext,
  .e-dialog .e-aud-uploadwrap .e-droptext,
  .e-dialog .e-vid-uploadwrap .e-droptext,
  .e-dialog.e-device .e-vid-uploadwrap .e-droptext  {
    border: dashed 2px $rte-upload-drag-border-clr;
    border-radius: 4px;
    color: $rte-drop-text-clr;
    font-family: $rte-font-family;
    font-size: 14px;
    height: $rte-drop-text-height;
    margin: 0 auto;
    text-align: center;
    width: auto;
    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 {
    margin: 0 auto;
    width: $rte-drop-text-mobile-width;
  }
  .e-dialog.e-device .e-video-url-wrap .e-radio-wrapper {
    padding: 8px 4px;
  }

  .e-rte-text-popup .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn,
  .e-rte-inline-popup .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn {
    .e-rte-dropdown-btn-text,
    .e-background-color,
    .e-rte-font-color {
      font-size: $dropdown-btn-font-size;
    }
  }

  // Blazor styles start
  .e-rte-upload-popup.e-dialog .e-file-select-wrap {
    display: none;
  }

  .e-rte-upload-popup.e-dialog .e-dlg-content {
    overflow: hidden;
    padding: 0;
  }

  .e-hide.e-rte-quick-popup-hide {
    border: 0;
    position: absolute;
  }

  .e-rte-popup-hide {
    display: none;
  }

  .e-rte-hide-visible {
    visibility: hidden;
  }

  .e-rte-table-popup.e-dialog .e-dlg-content {
    padding: 0;
    @if $skin-name == 'FluentUI' {
      margin-bottom: 0;
    }
  }

  @if $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'FluentUI' {
    .e-rte-quick-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
    .e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control:hover,
    .e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control:active,
    .e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control.e-active {
      padding-left: 0;
      padding-right: 0;
    }
  }

  .e-richtexteditor .e-rte-table-popup.e-popup-open.e-dialog .e-rte-tablecell,
  .e-rte-elements.e-rte-table-popup.e-popup-open.e-dialog .e-rte-tablecell {
    @if $skin-name == 'fluent2' {
      margin: 0;
    }
    @else {
      margin: 1px;
    }
  }
  
  .e-rte-elements{
    .e-rte-table-popup.e-popup-open{
      .e-rte-table-row {
        height: 16px;
      }
      .e-insert-table-btn {
        @if $skin-name == 'FluentUI' {
          margin-top: $rte-table-popup-btn-margin-top;
        }
        width: 100%;
      }
      .e-rte-tablecell {
        border: $rte-table-span-border;
        display: inline-block;
        height: 14px;
        margin: 1px;
        overflow: hidden;
        vertical-align: top;
        width: 14px;
      }
    }
    .e-rte-table-popup.e-popup.e-popup-open {
      border-radius: $rte-table-popup-bdr-radius;
      box-shadow: $rte-table-popup-box;
      font-size: 14px;
      font-weight: normal;
      min-width: 120px;
      overflow: hidden;
      padding: $rte-table-popup-padding;
    }
    &.e-dropdown-popup.e-popup.e-font-size-tbar-btn.e-popup-open {
      width: 95px;
    }
  }
  
  .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 {
      display: inline-block;
      line-height: normal;
    }
    .e-img-uploadwrap.e-droparea,
    .e-aud-uploadwrap.e-droparea,
    .e-vid-uploadwrap.e-droparea {
      line-height: $rte-droparea-line-height;
      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 {
      display: block;
      height: $rte-droparea-browsebtn-height;
      margin: 0 auto 10px;
      padding: $rte-droparea-browsebtn-padding;
      position: relative;
      @if $skin-name == 'FluentUI' {
        outline: none;
      }
    }
  }
  .e-transparent.e-rte-elements.e-tbar-btn.e-rte-fontcolor-dropdown,
  .e-transparent.e-rte-elements.e-tbar-btn.e-rte-backgroundcolor-dropdown {
    visibility: hidden;
  }
  // Blazor styles end

  .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: auto;
      z-index: 10;
      white-space: nowrap;
    }
    .e-toolbar .e-toolbar-pop.e-toolbar-extended {
      position: relative;
      width: 100%;
      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-rte-elements.e-rte-quick-popup .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
      min-width: 24px;
    }
    .e-richtexteditor .e-toolbar .e-hor-nav{
      min-height: 39px;
    }

    .e-richtexteditor {
      .e-toolbar.e-extended-toolbar .e-toolbar-extended {
        .e-toolbar-item.e-active .e-tbar-btn {
          border: $rte-tb-item-active-border;
        }
      }
    }
  }

  @if $skin-name == 'fabric-dark' {
    .e-richtexteditor {
      .e-toolbar .e-hor-nav{
        min-height: 42px;
      }
    }
  }

  @if $skin-name == 'bootstrap-dark'{
    .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover{
      border: 1px solid $grey-white;
    }
  
    .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn{
      border: 1px solid transparent;
    }
  }

  @if $skin-name == 'bootstrap5' {
    .e-rte-elements.e-rte-quick-popup .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
      min-width: 24px;
    }

    .e-richtexteditor .e-toolbar .e-insert-table-btn.e-btn .e-icons {
      padding-bottom: 0;
    }
  }

  @if $skin-name == 'Material3' {
    .e-richtexteditor .e-rte-table-popup .e-insert-table-btn {
      font-weight: $font-weight;
      border: 1px solid rgba($info-outline-border);
      border-radius: 20px;
    }
    .e-dialog .e-dlg-header-content + .e-dlg-content{
      padding-top: 0;
    }
    .e-rte-link-dialog .e-dlg-content{
      padding: 7px 20px;
    }
    .e-toolbar-wrapper .e-toolbar .e-toolbar-item:not(.e-separator) {
      padding: 8px 4px;
    }
    .e-rte-quick-popup .e-rte-toolbar.e-rte-quick-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
    .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {
      margin: 0;
    }
    .e-rte-text-popup .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn,
    .e-rte-inline-popup .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn {
      .e-rte-dropdown-btn-text,
      .e-background-color,
      .e-rte-font-color {
        font-size: $dropdown-btn-font-size;
      }
    }
    .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn {
      .e-background-color,
      .e-rte-font-color{
        font-size: 16px;
      }
    }
  }

  @if $skin-name == 'fluent2' {
    .e-richtexteditor {
      .e-toolbar {
        border: 0;
      }
      .e-toolbar .e-hor-nav{
        min-height: 40px;
      }
      .e-toolbar .e-toolbar-pop {
        border: 0;
      }
      .e-dialog {
        .e-radio + label {
          margin: 0;
        }
      }
    }
    .e-rte-elements .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons.e-btn-icon {
      min-width: 16px;
    }
    .e-rte-container{
      border-radius: 4px;
    }
    .e-richtexteditor{
      border-radius: 4px;
      .e-toolbar {
        border-radius: 4px 4px 0 0;
      }
      .e-toolbar .e-toolbar-items {
        border-radius: 4px 4px 0 0;
      }
      .e-toolbar .e-hor-nav {
        border-radius: 0 4px 0 0;
      }
      .e-rte-content {
        border-radius: 0 0 4px 4px;
      }
    }
    .e-richtexteditor .e-toolbar-wrapper{
      border-radius: 4px 4px 0 0;
    }
  }

  /* Slash Menu Styles */
  .e-rte-elements.e-slash-menu {
    .e-rte-quotes::before {
      content: open-quote;
      font-size: 30px;
      line-height: 20px;
    }
    
    .e-rte-paragraph::before {
      content: 'T';
      font-size: 15px;
    }
    
    .e-rte-h1::before {
      content: 'H1';
      font-size: 13px;
    }
    
    .e-rte-h2::before {
      content: 'H2';
      font-size: 13px;
    }
    
    .e-rte-h3::before {
      content: 'H3';
      font-size: 13px;
    }
    
    .e-rte-h4::before {
      content: 'H4';
      font-size: 13px;
    }
    
    .e-rte-slash-menu-item-text {
      font-size: 14px;
      display: block;
      line-height: 20px;
      padding: 5px 0 1px;
    }
    
    .e-rte-slash-menu-item-description {
      display: block;
      line-height: 20px;
      font-size: 11px;
      padding: 1px 0 5px;
    }
    
    .e-slash-menu-icon {
      line-height: 0;
      display: inline-block;
      width: 50px;
      font-family: 'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', sans-serif;
    }
  }
}


@include export-module('richtexteditor-theme') {

  /*! tab layout */

  .e-rte-container {
    border: 1px solid $rte-border-color;
  }

  .e-toolbar-wrapper,
  .e-toolbar-container  {
    border-bottom: 1px solid $rte-border-color;
  }

  iframe.e-rte-content {
    border: none;
  }

  .e-richtexteditor {
    color: $rte-content-color;
    background: $rte-content-bg;

    .e-rte-toolbar .e-toolbar-item.e-active{
      .e-tbar-btn,
      .e-tbar-btn:focus {
        background: $rte-tb-item-active-bg;
        border: $rte-tb-item-active-border;
  
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
          border: 0;
        }
      }
    }

    .e-toolbar-item.e-active {
      .e-tbar-btn .e-icons,
      .e-tbar-btn:focus .e-icons {
        color: $rte-tb-active-font-color;
      }
    }
    
    .e-toolbar-item {
      @if $skin-name == 'bootstrap5' {
        .e-tbar-btn:hover .e-icons {
          color: $rte-tb-hover-font-color;
        }
      }

      @if $skin-name != 'highcontrast' {
        &.e-overlay .e-tbar-btn .e-icons {
          color: $rte-ext-tbar-overlay-icons-color;
        }
      }
    }

    .e-dropdown-btn.e-active {
      background: $rte-drop-btn-active-bg;
      border-color: $rte-drop-btn-active-border-color;
    }

    @if $skin-name == 'bootstrap5' {
      .e-tbar-btn:hover .e-rte-dropdown-btn-text {
        color: $rte-tb-hover-font-color;
      }
    }
    
    .e-rte-toolbar {
      .e-rte-backgroundcolor-dropdown,
      .e-rte-fontcolor-dropdown,
      .e-rte-numberformatlist-dropdown,
      .e-rte-bulletformatlist-dropdown {
        &:hover {
          background: $rte-split-btn-hover-bg;
        }
      }
    }

    .e-toolbar-item {
      .e-rte-backgroundcolor-dropdown,
      .e-rte-fontcolor-dropdown,
      .e-rte-numberformatlist-dropdown,
      .e-rte-bulletformatlist-dropdown {
        &.e-active {
          background: $rte-split-btn-active-bg;
          border: $rte-split-btn-active-border;
        }
      }
    }

    .e-rte-toolbar {

      .e-toolbar-item {

        @if $skin-name != 'highcontrast' {
          .e-icons {
            color: $rte-icons-color;
          }
        }

        .e-dropdown-btn.e-active {
          .e-icons,
          .e-rte-dropdown-btn-text {
            color: $rte-drop-btn-active-color;
          }
        }

        .e-tbar-btn:hover {
          @if $theme-name == 'bootstrap5.3' {
            color: $rte-drop-btn-active-color;
          }
        }
      }

      .e-toolbar-extended {

        @if $skin-name != 'highcontrast' {
          .e-toolbar-item .e-tbar-btn .e-icons {
            color: $rte-icons-color;
          }
        }
        .e-toolbar-item .e-tbar-btn:hover .e-icons {
          color: $rte-hover-icons-color;
        }
        .e-toolbar-item.e-active .e-tbar-btn .e-icons {
          color: $rte-tb-active-font-color;
        }

        @if $skin-name != 'highcontrast' {
          .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
            color: $rte-ext-tbar-overlay-icons-color;
          }
        }

        .e-toolbar-item .e-dropdown-btn.e-active {
          background: $rte-drop-btn-active-bg;
        }

        .e-toolbar-item .e-tbar-btn:hover {
          @if $theme-name == 'bootstrap5.3' {
            color: $rte-drop-btn-active-color;
          }
        }

        @if $skin-name == 'bootstrap5' {
          .e-toolbar-item .e-tbar-btn:focus,
          .e-toolbar-item .e-tbar-btn:hover {
            border-radius: 4px;
          }
        }
      }
    }
    .e-toolbar-wrapper {
      background: $rte-tbar-default-bg;
    }

    img.e-img-focus::selection,
    audio.e-audio-focus::selection,
    .e-video-focus::selection {
      background: transparent;
      color: transparent;
    }
    @if $skin-name == 'Material3'  or $skin-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
      ::selection {
        color: $rte-selection-color;
        background: $rte-selection-bg;
      }
    }

    .e-rte-content,
    .e-source-content {
      background: $rte-content-bg;
      color: $rte-content-color;

      .e-content blockquote {
        border-left: $rte-content-blockquote-border-left-color;
      }

      .e-content .e-img-focus:not(.e-resize),
      .e-content .e-video-focus:not(.e-resize) {
        border: $rte-img-border;
      }

      .e-content a {
        color: $rte-anchor-color;
      }
    }

    &.e-rtl {
      .e-rte-content .e-content blockquote {
        border-left: 0;
        border-right: $rte-content-blockquote-border-left-color;
      }
    }

    .e-input.e-rte-linkurl.e-error,
    .e-input.e-img-link.e-error {
      color: $rte-link-valid-color;
    }

    &.e-rte-full-screen {
      background: $rte-full-screen-bg;
    }

    @if $skin-name == 'FluentUI' {
      .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn{
        border: 1px solid transparent;
        &:hover{
          border: 1px solid transparent;
        }
      }
      .e-toolbar .e-toolbar-item .e-tbar-btn{
        border: 1px solid transparent;
        &:hover{
          border: 1px solid transparent;
        }
      }
    }
  }
  @if $skin-name == 'bootstrap-dark' {
    .e-toolbar-extended .e-toolbar-item:not(.e-active) .e-tbar-btn{
      border: 1px solid transparent;
    }
    .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item {
      .e-rte-backgroundcolor-dropdown:hover,
      .e-rte-fontcolor-dropdown:hover,
      .e-rte-numberformatlist-dropdown:hover,
      .e-rte-bulletformatlist-dropdown:hover {
        background: none;
      }
    }
  }

  @if $skin-name == 'highcontrast' {
    .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item {
      .e-rte-backgroundcolor-dropdown:hover,
      .e-rte-fontcolor-dropdown:hover,
      .e-rte-numberformatlist-dropdown:hover,
      .e-rte-bulletformatlist-dropdown:hover {
        background: inherit;
      }
    }
  }
 
  .e-rte-inline-popup,
  .e-richtexteditor {
    .e-rte-backgroundcolor-dropdown,
    .e-rte-fontcolor-dropdown,
    .e-rte-numberformatlist-dropdown,
    .e-rte-bulletformatlist-dropdown {

      &:hover .e-rte-color-content::after {
        background: $rte-split-btn-bar-bg;
      }

      &:active:hover {

        .e-icons {
          color: $rte-split-btn-color;
        }

        @if $skin-name == 'bootstrap5' or $skin-name == 'tailwind' {
          .e-icons {
            color: $rte-tb-hover-font-color;
          }
        }

        .e-caret:active.e-icons,
        .e-rte-color-content:active .e-icons,
        .e-rte-list-primary-content:active .e-icons {
          color: $rte-split-btn-active-color;
        }
      }
      
      &:hover {

        .e-rte-color-content,
        .e-rte-list-primary-content {

          &:hover {
            @if $theme-name == 'fluent2-highcontrast' {
              background: $rte-split-btn-span-active-bg;
            }
            @else {
              background: $rte-split-btn-span-hover-bg;
            }
          }

          &:focus {
            background: $rte-split-btn-span-focus-bg;
          }

          &:active {
            background: $rte-split-btn-span-active-bg;
          }
        }

        .e-caret {

          &:hover {
            @if $theme-name == 'fluent2-highcontrast' {
              background: $rte-split-btn-span-active-bg;
            }
            @else {
              background: $rte-split-btn-span-hover-bg;
            }
          }

          &:focus {
            background: $rte-split-btn-span-focus-bg;
          }

          &:active {
            background: $rte-split-btn-span-active-bg;
          }
        }
      }

      &.e-active {
        background: $rte-split-btn-active-bg;
        border: $rte-split-btn-active-border;

        .e-rte-color-content::after {
          background: $rte-split-btn-active-bar-bg;
        }

        &:hover .e-caret:hover,
        &:hover .e-rte-color-content:hover,
        &:hover .e-rte-list-primary-content:hover {
          background: transparent;
        }

        .e-icons,
        &:active .e-icons {
          color: $rte-split-btn-active-color;
        }
      }
    }
  }
    
  .e-rte-quick-popup {
    border: $rte-quick-pop-border;
    border-radius: 2px;
    box-shadow: $rte-quick-pop-shadow;

    .e-rte-quick-toolbar {
      background: $rte-quick-pop-bg;
      border: $rte-quick-tb-border;

      .e-toolbar-items {
        background: $rte-quick-pop-bg;

        .e-rte-backgroundcolor-dropdown {
          .e-rte-color-content{
            padding-top: $rte-dropdown-btn-color-content-padding;
            height: $rte-dropdown-btn-color-content-height;
            @if $skin-name == 'FluentUI' {
              display: flex;
              align-items: center;
              justify-content: center;
            }
            &:hover {
              @if $theme-name == 'fluent2-highcontrast' {
                background: $rte-split-btn-span-active-bg;
              }
              @else {
                background: $rte-split-btn-span-hover-bg;
              }
            }
          }

          .e-caret {
            &:hover {
              @if $theme-name == 'fluent2-highcontrast' {
                background: $rte-split-btn-span-active-bg;
              }
              @else {
                background: $rte-split-btn-span-hover-bg;
              }
            }
          }
          &.e-tbar-btn:hover {
            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'highcontrast' {
              background: $rte-split-btn-hover-bg;
            }
            @if $skin-name =='bootstrap-dark'{
              background: $rte-tbar-default-bg;
            }
          }
        }

        .e-separator {
          border: .5px solid $rte-quick-vr-line-color;
        }

        .e-tbar-btn {
          background: $rte-quick-pop-bg;
          border: $rte-quick-item-border;
        }

        .e-tbar-btn:hover {
          background: $rte-quick-tb-btn-hover;
          border-color: $rte-quick-item-hover-border-color;
        }

        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          .e-rte-dropdown-btn-text {
            color: $rte-icons-color;
          }

          .e-tbar-btn:hover .e-rte-dropdown-btn-text {
            color: $rte-quick-item-active-font-color;
          }
        }
        .e-tbar-btn:focus {
          background: $rte-quick-pop-item-focus-bg;
        }

        .e-tbar-btn:active {
          background: $rte-quick-item-active-bg;
          border-color: $rte-quick-item-active-border-color;

          .e-icons {
            color: $rte-quick-item-active-font-color;
          }
        }

        .e-toolbar-item.e-active .e-tbar-btn,
        .e-toolbar-item.e-active .e-tbar-btn:focus {
          background: $rte-tb-item-active-bg;
          border: $rte-tb-item-active-border;
        }

        .e-toolbar-item.e-active .e-tbar-btn .e-icons,
        .e-toolbar-item.e-active .e-tbar-btn:focus .e-icons {
          color: $rte-tb-active-font-color;
        }

        .e-icons {
          color: $rte-icons-color;
        }

        @if $skin-name == 'bootstrap5' {
          .e-tbar-btn:hover .e-icons {
            color: $rte-tb-hover-font-color;
          }

          .e-tbar-btn:focus .e-icons {
            color: $primary-text-focus;
          }
        }
      }

      .e-toolbar-extended {

        .e-toolbar-item .e-tbar-btn .e-icons {
          color: $rte-icons-color;
        }
      }
    }

    .e-rte-dropdown-btn {
      background: $rte-quick-pop-bg;
      border-color: $rte-quick-drop-btn-border-color;

      &:focus,
      &:hover {
        background: $rte-quick-tb-btn-hover;
      }

      &:hover {
        border-color: $rte-quick-drop-btn-hover-border-color;

        @if $skin-name == 'highcontrast' {
          border-width: $rte-2px-border-size;
        }
      }
    }
    .e-rte-quick-toolbar .e-toolbar-items {
      .e-rte-fontcolor-dropdown .e-rte-color-content:hover,
      .e-rte-numberformatlist-dropdown .e-rte-list-primary-content:hover,
      .e-rte-bulletformatlist-dropdown .e-rte-list-primary-content:hover {
        background: $rte-split-btn-span-hover-bg;
      }
    }
    .e-rte-quick-toolbar .e-toolbar-items {
      .e-rte-fontcolor-dropdown .e-caret:hover,
      .e-rte-numberformatlist-dropdown .e-caret:hover,
      .e-rte-bulletformatlist-dropdown .e-caret:hover {
        background: $rte-split-btn-span-hover-bg;
      }
    }
  }

  .e-linkheader {
    color: $rte-img-header-clr;
  }

  .e-rte-img-popup.e-popup {
    background: $rte-full-screen-bg;
    border: $rte-img-popup-border;
    box-shadow: $rte-img-popup-box-shadow;
    color: $rte-img-popup-color;
    padding: 10px;
  }

  .e-rte-content .e-content img:not(.e-resize) {
    z-index: 1000;
  }

  span.e-rte-imageboxmark,
  span.e-rte-videoboxmark {
    background: $rte-img-resize-back-color;
    border: 1px solid $rte-img-resize-color;
    display: block;
    height: 10px;
    position: absolute;
    width: 10px;
    z-index: 1000;
  }

  .e-mob-rte span.e-rte-imageboxmark,
  .e-mob-rte span.e-rte-videoboxmark {
    background: $rte-img-resize-color;
    border: 1px solid $rte-img-resize-back-color;
    border-radius: 15px;
    height: 20px;
    width: 20px;
  }

  .e-mob-rte.e-mob-span span.e-rte-imageboxmark,
  .e-mob-rte.e-mob-span span.e-rte-videoboxmark {
    background: $rte-img-resize-back-color;
    border: 1px solid $rte-img-resize-color;
  }

  .e-rte-content .e-content img.e-resize,
  .e-rte-content .e-content video.e-resize {
    z-index: 1000;
  }

  #{if(&, '&', '*')}.e-disabled {
    user-select: none;
    .e-rte-toolbar .e-toolbar-item {
      cursor: default;
      & .e-tbar-btn.e-icon-btn,
      & .e-dropdown-btn.e-btn,
      & .e-colorpicker-wrapper .e-btn {
        &:hover,
        &:active,
        &:focus {
          background: transparent;
          cursor: default;
        }
      }
    }
  }

  .e-dropdown-popup {
    & ul {
      & .e-item.e-active {
        background: $rte-dropdown-selection-bgcolor;
        color: $rte-dropdown-selection-color;
      }
    }
  }

  .e-popup-overlay {
    background-color: $rte-overlay-color;
  }

  .e-rte-toolbar .e-toolbar-item.e-overlay .e-dropdown-btn {
    color: $rte-ext-tbar-overlay-dropdown-color;
  }

  .e-rte-table-popup.e-popup.e-popup-open {
    background-color: $rte-content-bg;
    color: $rte-item-color;
  }

  .e-richtexteditor .e-rte-toolbar .e-hor-nav:hover{
    border: solid rgba(0, 0, 0, .12);
    border-width: $rte-toolbar-hor-nav-border-width;
    padding-left: $rte-tb-expended-hover-padding-left;
  }

  @if $skin-name == 'bootstrap5' {
    .e-rte-table-popup.e-popup.e-popup-open {
      background-color: $rte-table-popup-bg;
    }
  }

  .e-rte-table-popup .e-span-border {
    @if $skin-name != 'Material3' {
      border: 1px solid $rte-border-color;
    }
    display: block;
    margin-bottom: 8px;
    margin-top: 12px;
  }

  .e-rte-table-popup .e-rte-popup-header {
    color: $rte-table-header-color;
    font-family: $rte-font-family;
    font-size: 14px;
    text-align: center;
  }

  .e-rte-table-popup.e-popup-open .e-rte-tablecell.e-default {
    background-color: $rte-table-span-bg-color;
  }

  .e-rte-table-popup.e-popup-open .e-rte-tablecell.e-active {
    background-color: $rte-table-span-active-bg-color;
    border: 1px solid $rte-table-span-active-border-color;
  }

  .e-rte-table.e-alternate-border tbody tr:nth-child(2n+0) {
    background: $rte-table-alternate-color;
    @if $skin-name == 'highcontrast' {
      color: $rte-img-popup-color;
    }
  }

  .e-rte-table th {
    background: $rte-table-header-bg;
    @if $skin-name == 'highcontrast' {
      color: $rte-table-header-text-color;
    }
  }

  .e-rte-table-popup.e-popup.e-popup-open {
    background-color: $rte-table-popup-bg;
    color: $rte-table-popup-color;
  }

  span.e-table-box {
    background-color: $rte-table-resize-back-color;
    border: 1px solid $rte-table-border-color;
  }

  span.e-table-box.e-rbox-select {
    background-color: $rte-table-border-color;
    border: 1px solid $rte-table-border-color;
  }

  .e-table-rhelper {
    background-color: $rte-table-span-active-border-color;
  }

  .e-rte-dialog-upload.e-upload.e-lib.e-keyboard {
    background: $rte-content-bg;
  }

  .e-rte-inline-popup .e-rte-quick-toolbar.e-rte-toolbar .e-toolbar-items .e-toolbar-item {
    &.e-active .e-tbar-btn .e-icons,
    & .e-tbar-btn:active .e-icons,
    & .e-tbar-btn:focus .e-icons,
    & .e-tbar-btn:hover .e-icons {
      color: $rte-quick-item-active-font-color;
    }
    @if $skin-name == 'bootstrap5' {
      & .e-tbar-btn:hover {
        color: $rte-quick-item-active-font-color;
      }
    }
  }
  
  .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-active .e-icons {
    @if $theme-name == 'fluent2-highcontrast' {
      color: $rte-drop-btn-active-color;
    }
    @else {
      color: $rte-tlbar-expand-active;
    }
  }

  .e-rte-emojipicker-popup.e-popup.e-popup-open {
    background: $rte-emoji-pop-background;
    box-shadow: $rte-emoji-pop-box-shadow;
    border: $rte-emoji-pop-border;

    @if $skin-name =='bootstrap5' or $skin-name =='botstrap5-dark' or $skin-name =='bootstrap' or $skin-name =='bootstrap-dark' or $skin-name =='bootstrap4' {
      filter: drop-shadow(0 0 6px rgba(0, 0, 0, .25));
    }
    
    @if $skin-name =='bootstrap5' or $skin-name =='botstrap5-dark' or $skin-name =='bootstrap4' {
      .e-toolbar .e-toolbar-item .e-tbar-btn.e-selected .e-icons {
        color: $rte-emoji-tbar-btn-selected-font-color;
      }
    }

    .e-toolbar .e-toolbar-item .e-tbar-btn {
      background: $rte-emoji-tbar-btn-bg;

      @if $skin-name =='bootstrap5' {
        &:focus{
          background: $rte-tbar-default-bg;
        }
      }
      &.e-selected {
        background: $rte-emoji-tbar-btn-select-bg;
      }
    }

    .e-toolbar .e-toolbar-item .e-tbar-btn:hover {
      background: $rte-emoji-tbar-btn-hover;
    }

    .e-rte-emojipicker-toolbar {
      background: transparent;
      border: none;
      box-shadow: none;

      & .e-toolbar-items {
        background: transparent;

        & .e-scroll-nav {
          border: none;
        }
      }
    }

    .e-rte-emojipicker-btn {
      .e-rte-emojipicker-group .e-rte-emojipickerbtn-group {
        .e-btn.e-control {
          @if $skin-name =='bootstrap4' {
            color: inherit;
          }

          &:not(:hover):not(:focus):not(:active) {
            background: transparent;
          }
        }
      }

      .e-rte-emojisearch-btn {
        .e-btn.e-control {
          @if $skin-name =='bootstrap4' {
            color: inherit;
          }

          &:not(:hover):not(:focus):not(:active) {
            background: transparent;
          }
        }
      }
      .e-rte-emojipicker-group .e-rte-emojipicker-name {
        color: $rte-emoji-headname-color;
      }
    }
  }
  @if $skin-name == 'tailwind' {
    .e-richtexteditor .e-rte-toolbar .e-toolbar-extended {
      background: $rte-extended-toolbar-background;
    }

    .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn .e-icons {
      color: $rte-icons-color;
    }

    .e-richtexteditor {
      .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
        color: $icon-color-disabled;
      }
    }

    .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
      border-radius: 4px;
    }

    .e-richtexteditor .e-toolbar .e-tbar-btn {
      border: 1px solid $transparent;
    }

    .e-richtexteditor .e-toolbar .e-tbar-btn:hover {
      background: $rte-tb-hover-bg-color;
      border: 1px solid $rte-quick-item-hover-border-color;
    }

    .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
      background: $rte-tb-hover-bg-color;
      border: 1px solid $rte-quick-item-hover-border-color;
    }

    .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn{
      border: 1px solid $transparent;
    }

    .e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
      border: 1px solid $transparent;
    }
  }

  @if $skin-name == 'bootstrap5' {
    .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:active {
      background: $rte-tb-item-active-bg;
      border-radius: 4px;
    }

    .e-richtexteditor .e-toolbar .e-insert-table-btn.e-btn:hover .e-icons {
      color: $rte-tb-hover-font-color;
    }
    .e-rte-dropdown-popup .e-active.e-item .e-menu-icon {
      color: $white;
    }
  }

  @if $skin-name == 'Material3' {
    .e-richtexteditor .e-rte-table-popup .e-insert-table-btn {
      color: $rte-content-color;
    }
  }

  @if $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' {
    .e-richtexteditor .e-toolbar,
    .e-richtexteditor .e-toolbar .e-toolbar-pop{
      border: none;
    }
  }

  @if $skin-name == 'fluent2' {
    .e-richtexteditor .e-toolbar {
      box-shadow: none;
    }
    .e-rte-emojipickerbtn-group .e-btn:hover {
      background: $rte-emoji-tbar-btn-hover;
    }
  }

  // Blazor styles start

  @if $skin-name == 'bootstrap5' or $skin-name == 'tailwind' {
    .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn:active .e-icons,
    .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn:active .e-rte-dropdown-btn-text,
    .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn:focus .e-rte-dropdown-btn-text,
    .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-items .e-icon-button:focus .e-icons {
      color: $rte-quick-item-active-font-color;
    }
  }

  .e-rte-img-dialog .e-rte-upload-progress {
    color: $rte-dialog-upload-status-progress;  /* stylelint-disable-line declaration-no-important */
  }
  // Blazor styles end
}


/*! component's theme wise override definitions and variables */
@include export-module('richtexteditor-material-icons') {

  /*! richtexteditor icons */

  .e-toolbar-wrapper,
  .e-toolbar-container,
  .e-rte-toolbar,
  .e-rte-dropdown-popup {

    .e-blockquote::before {
      content: '\e8f5';
    }
    .e-alignments::before {
      content: '\e7b8';
    }

    .e-justify-left::before {
      content: '\e7b8';
    }

    .e-justify-center::before {
      content: '\e813';
    }

    .e-justify-right::before {
      content: '\e719';
    }

    .e-justify-full::before {
      content: '\e721';
    }

    .e-font-name::before {
      content: '\e76f';
    }

    .e-rte-font-color::before {
      content: '\e79f';
    }

    .e-background-color::before {
      content: '\e783';
    }

    .e-bold::before {
      content: '\e737';
    }

    .e-italic::before {
      content: '\e75a';
    }

    .e-underline::before {
      content: '\e82f';
    }

    .e-strike-through::before {
      content: '\e758';
    }

    .e-clear-format::before {
      content: '\e803';
    }

    .e-clear-all::before {
      content: '\e7cc';
    }

    .e-cut::before {
      content: '\e7fb';
    }

    .e-copy::before {
      content: '\e77c';
    }

    .e-paste::before {
      content: '\e70b';
    }

    .e-unorder-list::before {
      content: '\e77e';
    }

    .e-order-list::before {
      content: '\e7cb';
    }

    .e-indent::before {
      content: '\e810';
    }

    .e-outdent::before {
      content: '\e72a';
    }

    .e-undo::before {
      content: '\e713';
    }

    .e-redo::before {
      content: '\e755';
    }

    .e-super-script::before {
      content: '\e7a7';
    }

    .e-sub-script::before {
      content: '\e80a';
    }

    .e-create-link::before {
      content: '\e757';
    }

    .e-open-link::before {
      content: '\e77a';
    }

    .e-edit-link::before {
      content: '\e722';
    }

    .e-remove-link::before {
      content: '\e80c';
    }

    .e-image::before {
      content: '\e786';
    }

    .e-audio::before {
      content: '\e894';
    }

    .e-video::before {
      content: '\e895';
    }

    .e-replace::before {
      content: '\e710';
    }

    .e-audio-replace::before,
    .e-video-replace::before {
      content: '\e772';
    }

    .e-align::before {
      content: '\e7b8';
    }

    .e-caption::before {
      content: '\e8e2';
    }

    .e-remove::before,
    .e-audio-remove::before,
    .e-video-remove::before {
      content: '\e820';
    }

    .e-insert-link::before {
      content: '\e757';
    }

    .e-display::before,
    .e-audio-display::before,
    .e-video-display::before {
      content: '\e7b7';
    }

    .e-alt-text::before {
      content: '\e769';
    }

    .e-img-dimension::before,
    .e-video-dimension::before {
      content: '\e879';
    }

    .e-maximize::before {
      content: '\e81c';
    }

    .e-minimize::before {
      content: '\e7b0';
    }

    .e-zoom-in::before {
      content: '\e795';
    }

    .e-zoom-out::before {
      content: '\e825';
    }

    .e-lower-case::before {
      content: '\e746';
    }

    .e-upper-case::before {
      content: '\e793';
    }

    .e-print::before {
      content: '\e75d';
    }

    .e-formats::before {
      content: '\e844';
    }

    .e-source-code::before {
      content: '\e80e';
    }

    .e-preview::before {
      content: '\e7de';
    }

    .e-view-side::before {
      content: '\e82b';
    }

    .e-inline-code::before {
      content: '\e831';
    }

    .e-preformat-code::before {
      content: '\e90f';
    }

    .e-table-header::before {
      content: '\e8f4';
    }

    .e-table-remove::before {
      content: '\e811';
    }

    .e-table-rows::before {
      content: '\e77f';
    }

    .e-table-columns::before {
      content: '\e841';
    }

    .e-table-cell-ver-align::before {
      content: '\e74f';
    }

    .e-table-edit-properties::before {
      content: '\e730';
    }

    .e-create-table::before {
      content: '\e83f';
    }

    .e-align-bottom::before {
      content: '\e7a0';
    }

    .e-align-middle::before {
      content: '\e74f';
    }

    .e-align-top::before {
      content: '\e707';
    }

    .e-insert-column-left::before {
      content: '\e78b';
    }

    .e-insert-column-right::before {
      content: '\e70e';
    }

    .e-delete-column::before {
      content: '\e714';
    }

    .e-insert-row-before::before {
      content: '\e836';
    }

    .e-insert-row-after::before {
      content: '\e801';
    }

    .e-delete-row::before {
      content: '\e7f2';
    }

    .e-style::before {
      content: '\e76e';
    }

    .e-rte-file-manager::before {
      content: '\e83c';
    }

    .e-rte-format-painter::before {
      content: '\e8bd';
    }

    .e-rte-export-pdf::before {
      content: '\e8fb';
    }

    .e-rte-import-doc::before {
      content: '\e8fc';
    }

    .e-rte-export-doc::before {
      content: '\e8fd';
    }
  }

  .e-richtexteditor {
    .e-south-east::before,
    .e-south-west::before {
      content: '\e761';
    }
  }

  .e-rtl {
    .e-rte-toolbar,
    .e-rte-dropdown-popup {
      .e-unorder-list::before {
        content: '\e8c4';
      }
  
      .e-order-list::before {
        content: '\e8c5';
      }
  
      .e-indent::before {
        content: '\e8c6';
      }
  
      .e-outdent::before {
        content: '\e8c7';
      }
    }
  }
  
  .e-cell-merge::before {
    content: '\e83a';
  }

  .e-cell-horizontal-split::before {
    content: '\e7a4';
  }

  .e-cell-vertical-split::before {
    content: '\e732';
  }

  .e-table-cell::before {
    content: '\e7c2';
  }

  .e-rte-cursor-brush {
    cursor: $rte-format-painter-cursor;
  }
}

.e-bigger .e-richtexteditor,
.e-richtexteditor.e-bigger {

  .e-rte-toolbar {
    .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
      margin-left: $rte-big-tb-items-margin-left;
    }
  }

  .e-rte-toolbar {
    .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-item:first-child {
      margin-left: 0;
    }
  }

  @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
    .e-rte-toolbar .e-toolbar-item .e-dropdown-btn .e-dropdown-btn {
      font-size: $dropdown-btn-big-font-size;
    }
  }

  &.e-rtl .e-rte-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
    margin-left: 0;
    margin-right: $rte-big-tb-items-margin-left;
  }

  .e-rte-toolbar,
  .e-rte-toolbar.e-toolbar.e-extended-toolbar {

    .e-toolbar-extended {
      padding-left: $rte-big-tb-items-padding-left;
    }

    .e-toolbar-items,
    .e-toolbar-extended {

      .e-toolbar-item .e-tbar-btn .e-order-list.e-icons,
      .e-toolbar-item .e-tbar-btn .e-unorder-list.e-icons,
      .e-toolbar-item .e-tbar-btn .e-icons.e-btn-icon:not(.e-caret) {
        font-size: $rte-toolbar-big-icon-size;
      }

      .e-toolbar-item .e-rte-font-color .e-selected-color.e-icons::before,
      .e-toolbar-item .e-background-color .e-selected-color.e-icons::before {
        top: -20px;
      }

      .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-dropdown-btn.e-rte-dropdown-btn {
        padding-left: $rte-big-drop-btn-padding-left;
        padding-right: $rte-big-drop-btn-padding-right;
      }

      .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-rte-dropdown-btn.e-dropdown-btn:hover,
      .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-rte-dropdown-btn.e-dropdown-btn:focus,
      .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-rte-dropdown-btn.e-dropdown-btn:active {
        padding-left: $rte-big-drop-btn-action-padding-left;
        padding-right: $rte-big-drop-btn-action-padding-right;
      }

      .e-toolbar-item.e-active .e-tbar-btn.e-btn {
        padding: $rte-big-active-tb-item-btn-padding;
        @if $skin-name == 'FluentUI' {
          border-radius: 0;
        }
      }
      .e-dropdown-btn .e-rte-color-content {
        padding-top: $rte-big-dropdown-btn-color-content-padding;
        height: $rte-big-dropdown-btn-color-content-height;
      }
    }

    @if $skin-name == 'bootstrap5' {
      .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
        padding: 0 8px;
      }
    }
  }

  &.e-rte-full-screen {

    iframe {
      height: calc(100% - 56px);
    }

    .e-rte-edit-table {
      max-height: $rte-big-table-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-rte-edit-table-prop-dialog {
      max-height: $rte-big-edit-table-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-rte-link-dialog {
      max-height: $rte-big-link-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-rte-img-dialog {
      min-height: $rte-big-img-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-rte-img-link-dialog {
      max-height: $rte-big-img-link-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-rte-img-size-dialog {
      max-height: $rte-big-img-size-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-rte-img-alt-dialog {
      min-height: $rte-big-img-alt-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-rte-toolbar,
  .e-rte-toolbar.e-toolbar.e-extended-toolbar {
    .e-toolbar-items,
    .e-toolbar-extended {
      .e-toolbar-item {
        .e-rte-numberformatlist-dropdown .e-rte-list-primary-content,
        .e-rte-bulletformatlist-dropdown .e-rte-list-primary-content {
          line-height: $rte-big-formatlists-dropdown-line-height;
          @if $skin-name == 'FluentUI' {
            padding: 5.5px;
          }
        }
      }
    }
  }
  .e-dialog.e-rte-dialog-minheight {
    min-height: 324px;
    @if $skin-name == 'FluentUI' {
      min-height: 350px;
    }
  }
  .e-rte-content .e-content {
    font-size: $rte-big-content-font-size;
  }

  .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control{
    padding: $rte-big-toolbar-expaned-padding;
    &:hover {
      padding: $rte-big-toolbar-expaned-padding;
    }
  }
  .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
    margin-right: $rte-big-img-upload-abort-icon-btn-margin-right;
    margin-top: $rte-big-img-upload-abort-icon-btn-margin-top;
    padding: $rte-big-img-upload-abort-icon-btn-padding;
  }
  .e-rte-dropdown-popup.e-rte-dropdown-items ul {
    max-height: 360px;
    overflow-y: auto;
  }

  .e-dialog .e-img-uploadwrap .e-droptext,
  .e-dialog .e-aud-uploadwrap .e-droptext,
  .e-dialog .e-vid-uploadwrap .e-droptext {
    height: $rte-big-drop-text-height;
  }

  @if $skin-name == 'tailwind' {
    .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn,
    .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control {
      padding: 0 8px;
    }
    .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
      padding: 0 8px;
    }
  }
}

.e-bigger {
  .e-rte-quick-popup{
    .e-rte-quick-toolbar {
      min-height: 48px;

      .e-toolbar-items .e-rte-backgroundcolor-dropdown {
        .e-rte-color-content,
        .e-caret {
          height: $rte-big-dropdown-btn-color-content-height;

          &:hover {
            height: $rte-big-dropdown-btn-color-content-height;
          }
        }
      }

      .e-toolbar-items:not(.e-tbar-pos) {
        margin: $rte-big-quick-toolbar-items-margin;
        min-height: 48px;

        .e-toolbar-item:not(.e-separator) {
          margin: $rte-big-quick-toolbar-item-margin;
          min-height: 48px;
          min-width: 36px;
          padding: $rte-big-quick-toolbar-item-btn-padding;
        }

        .e-toolbar-item .e-tbar-btn:not(.e-rte-dropdown-btn) {
          line-height: $rte-big-quick-item-line-height;
        }

        .e-toolbar-item .e-btn,
        .e-toolbar-item .e-btn:hover {
          min-height: $rte-big-quick-item-btn-height;
          min-width: $rte-big-quick-item-btn-width;
          padding: $rte-big-quick-item-padding;
          @if $skin-name == 'FluentUI' {
            padding-left: $rte-quick-item-padding-left;
            padding-right: $rte-quick-item-padding-right;
          }
        }

        .e-toolbar-item:first-child,
        .e-toolbar-item:last-child {
          margin: $rte-big-toolbar-item-frist-last-child-margin;
        }

        .e-toolbar-item .e-tbar-btn.e-btn.e-control {
          height: $rte-big-quick-tbar-item-min-height;
          line-height: $rte-big-quick-tbar-item-min-height;
          margin: 0;
          min-height: $rte-big-quick-tbar-item-min-height;
          min-width: $rte-big-quick-tbar-item-min-width;
        }

        .e-toolbar-item .e-tbar-btn .e-order-list.e-icons,
        .e-toolbar-item .e-tbar-btn .e-unorder-list.e-icons,
        .e-toolbar-item .e-tbar-btn .e-icons.e-btn-icon:not(.e-caret) {
          font-size: $rte-toolbar-big-icon-size;
        }
      }
    }
    .e-rte-dropdown-btn.e-tbar-btn {
      line-height: $rte-big-quick-drop-btn-line-height;
      margin: $rte-big-quick-drop-btn-margin;
      padding: $rte-big-quick-drop-btn-padding;

      .e-order-list.e-icons,
      .e-unorder-list.e-icons,
      .e-icons:not(.e-caret) {
        font-size: $rte-toolbar-icon-size;
      }

      .e-caret {
        font-size: $rte-big-quick-drop-btn-caret-font-size;
        width: 20px;
      }
    }
  }
  .e-rte-emojipicker-popup.e-popup.e-popup-open {
    min-width: 120px;
    height: 337px;
    width: 335px;

    .e-toolbar .e-toolbar-item .e-tbar-btn {
      border-radius: 4px;
      padding: 0;
      @if $skin-name =='material' or $skin-name =='material-dark' {
        padding: 3px 7px;
      }
      @else {
        padding: 2px 5px;
      }
      
      &:hover {
        padding: 0;
      }

      &:active {
        padding: 0;
      }

      .e-tbar-btn-text {
        @if $skin-name =='fluent2' {
          font-size: 18px;
        }
        @else {
          font-size: 26px;
        }
        padding: 9px 5px;
      }
    }

    .e-rte-emojipicker-btn {
      gap: 10px;
      height: $rte-big-emoji-btn-height;
      padding: 12px;

      .e-rte-emojipicker-group .e-rte-emojipickerbtn-group {
        gap: 8px;

        .e-btn.e-control {
          padding: 8px 0;
          width: 42px;
          height: 42px;
          line-height: 0;
          @if $skin-name =='fluent2' {
            font-size: 18px;
          }
          @else {
            font-size: 26px;
          }
        }
      }

      .e-rte-emojisearch-btn {
        gap: 6px;

        .e-btn.e-control {
          font-size: 26px;
          padding: 8px 0;
          width: 40px;
          height: 40px;
          border: none;
          line-height: 0;
        }
      }

      .e-rte-emojipicker-group .e-rte-emojipicker-name {
        font-weight: 500;
        font-size: 16px;
      }
    }
  }
  .e-rte-dropdown-popup {
    ul {
      min-width: 84px;
    }
  }
  .e-rte-quick-popup.e-rte-inline-popup {
    .e-rte-quick-toolbar {
      .e-toolbar-items:not(.e-tbar-pos) {
        .e-toolbar-item:not(.e-separator).e-rte-inline-template {
          min-width: $rte-big-inline-tmp-min-width;
        }

        .e-toolbar-item:not(.e-separator).e-rte-inline-size-template {
          min-width: $rte-big-inline-tmp-size-min-width;
        }

        .e-toolbar-item:not(.e-separator).e-rte-inline-color-template {
          min-width: $rte-big-inline-tmp-color-min-width;
        }
      }
    }
  }
  .e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item {
    button.e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
    button.e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
    button.e-rte-numberformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
    button.e-rte-bulletformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control {
      @if $skin-name == 'FluentUI' {
        .e-btn-icon.e-icons.e-caret {
          padding-top: 0;
        }
      }
    }
  }

  .e-rte-edit-table .e-rte-field {
    padding-top: $rte-big-insert-dialog-label-padding-top;
  }
  
  .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item,
  .e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item,
  .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item,
  .e-rte-toolbar.e-toolbar .e-toolbar-extended .e-toolbar-item {
    .e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
    .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
    .e-rte-numberformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
    .e-rte-bulletformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control {
      .e-icons.e-btn-icon {
        min-width: $rte-font-arrow-touch-width;
        padding-left: 0;
        padding-right: 0;
        width: $rte-font-arrow-touch-width;
      }

      &:hover,
      &:focus,
      &:active {
        padding-left: $rte-big-color-list-span-common-padding-left-right;
        padding-right: $rte-big-color-list-span-common-padding-left-right;
      }

      .e-rte-list-primary-content .e-order-list,
      &.e-active .e-rte-list-primary-content .e-order-list,
      .e-rte-list-primary-content .e-unorder-list,
      &.e-active .e-rte-list-primary-content .e-unorder-list {
        line-height: $rte-big-split-btn-active-color-icon-line-height;
      }
    }

    .e-dropdown-btn .e-caret {
      font-size: $rte-big-dropdown-caret-icon-size;

      @if $skin-name == 'bootstrap5' {
        &.e-btn-icon:not(.e-toolbar-pop) {
          font-size: 14px;
        }
      }
    }
  }
  .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item,
  .e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item,
  .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item,
  .e-rte-toolbar.e-toolbar .e-toolbar-extended .e-toolbar-item {

    .e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
    .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
    .e-rte-numberformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
    .e-rte-bulletformatlist-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control {
      .e-icons.e-btn-icon {
        line-height: $rte-big-list-btn-line-height;
      }
    }
  }
  .e-richtexteditor{
    .e-rte-toolbar{
      .e-tbar-btn.e-dropdown-btn.e-rte-backgroundcolor-dropdown,
      .e-tbar-btn.e-dropdown-btn.e-rte-fontcolor-dropdown,
      .e-tbar-btn.e-dropdown-btn.e-rte-numberformatlist-dropdown,
      .e-tbar-btn.e-dropdown-btn.e-rte-bulletformatlist-dropdown {
        line-height: $rte-big-inline-dropdown-line-height;
      }
      .e-toolbar-item .e-tbar-btn.e-btn .e-icons {
        font-size: $rte-toolbar-big-icon-size;
      }
    }
    .e-rte-toolbar,
    .e-rte-toolbar.e-toolbar.e-extended-toolbar {
      .e-toolbar-items,
      .e-toolbar-extended {
        .e-toolbar-item {
          .e-background-color.e-icons::before {
            display: inline;
            font-size: $rte-big-background-color-icon-fontsize;
          }
        }
      }
    }
  }
  .e-rte-table-popup.e-popup-open{
    .e-rte-tablecell {
      height: $rte-big-tablecell-height;
      width: $rte-big-tablecell-width;
    }
    .e-rte-table-row {
      height: $rte-big-table-row-height;
    }
  }
  .e-content-placeholder.e-richtexteditor.e-placeholder-richtexteditor,
  &.e-content-placeholder.e-richtexteditor.e-placeholder-richtexteditor {
    background-size: 700px 190px;
    min-height: 190px;
  }

  .e-rte-backgroundcolor-colorpicker,
  .e-rte-fontcolor-colorpicker {
    & .e-color-palette.e-container {
      & .e-custom-palette .e-palette {
        padding: 0;
      }
  
      & .e-switch-ctrl-btn {
        padding: 5px;
      }
    }
  }

  .e-rte-text-popup .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn,
  .e-rte-inline-popup .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn {
    .e-rte-dropdown-btn-text,
    .e-background-color,
    .e-rte-font-color {
      @if $skin-name =='FluentUI' or $skin-name =='tailwind' {
        font-size: 18px;
      }
      @else {
        font-size: 16px;
      }
    }
  }
}
  
// Skin Base Styles
@if $skin-name == 'tailwind' {
  .e-bigger .e-richtexteditor .e-toolbar .e-hor-nav{
    min-height: 50px;
  }
}
@if $skin-name == 'fabric-dark' {
  .e-bigger .e-richtexteditor .e-rte-toolbar.e-toolbar .e-hor-nav{
    min-height: 50px;
  }
}
@if $skin-name == 'bootstrap' {
  .e-bigger .e-richtexteditor .e-rte-toolbar.e-toolbar .e-hor-nav{
    min-height: 50px;
  }
}
@if $skin-name == 'bootstrap5' {
  .e-bigger .e-richtexteditor .e-rte-toolbar.e-toolbar .e-hor-nav{
    min-height: 46px;
  }
}
@if $skin-name == 'Material3' {
  .e-bigger .e-richtexteditor,
  .e-richtexteditor.e-bigger {
    .e-dialog {
      border-radius: 16px;
    }
  }

  .e-bigger .e-toolbar .e-toolbar-item:not(.e-separator) {
    padding: 8px 4px;
  }

  .e-bigger e-rte-text-popup .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn .e-icons {
    font-size: 20px;
  }

  .e-bigger {
    .e-rte-text-popup .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn,
    .e-rte-inline-popup .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn {
      .e-rte-dropdown-btn-text,
      .e-background-color,
      .e-rte-font-color {
        font-size: 18px;
      }
    }
  }

  .e-bigger {
    .e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn {
      .e-background-color,
      .e-rte-font-color{
        font-size: 18px;
      }
    }
    .e-rte-container{
      border-radius: 4px;
    }
    .e-richtexteditor{
      border-radius: 4px;
      .e-toolbar {
        border-radius: 4px 4px 0 0;
      }
      .e-toolbar .e-toolbar-items {
        border-radius: 4px 4px 0 0;
      }
      .e-toolbar .e-hor-nav {
        border-radius: 0 4px 0 0;
      }
      .e-rte-content {
        border-radius: 0 0 4px 4px;
      }
    }
    .e-richtexteditor .e-toolbar-wrapper{
      border-radius: 4px 4px 0 0;
    }
  }
}
@if $skin-name == 'fluent2' {
  .e-bigger .e-richtexteditor {
    .e-toolbar .e-hor-nav{
      min-height: 48px;
    }
    .e-btn {
      padding: 4px 16px;
    }
  }
}

//Layout styles
@if $skin-name == 'tailwind' {
  .e-bigger .e-richtexteditor {
    .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-overlay .e-tbar-btn .e-icons {
      color: $icon-color-disabled;
    }
  }
}
@if $skin-name == 'Material3' {
  .e-bigger .e-richtexteditor.e-rte-tb-expand {
    border-radius: 8px;
  }
  .e-bigger .e-richtexteditor .e-toolbar-wrapper {
    border-top-left-radius: $rte-border-top-left-radius;
    border-top-right-radius: $rte-border-top-right-radius;
  }
  .e-bigger .e-richtexteditor.e-rte-tb-expand .e-rte-toolbar.e-extended-toolbar,
  .e-bigger .e-richtexteditor.e-rte-tb-expand .e-rte-toolbar .e-toolbar-extended {
    border-top-left-radius: $rte-border-top-left-radius;
    border-top-right-radius: $rte-border-top-right-radius;
  }
  .e-bigger .e-rte-toolbar .e-toolbar-items {
    border-top-left-radius: $rte-border-top-left-radius;
  }
  .e-bigger .e-rte-toolbar .e-hor-nav {
    border-top-right-radius: $rte-border-top-right-radius;
  }
  .e-bigger .e-rtl .e-rte-toolbar .e-hor-nav {
    border-top-left-radius: $rte-border-top-left-radius;
    border-top-right-radius: 0;
  }
  .e-bigger .e-rtl .e-rte-toolbar .e-toolbar-items {
    border-top-right-radius: $rte-border-top-right-radius;
  }
}