@use 'sass:color';

//Layout Variables Start
// $skin-name: 'tailwind';
$rte-border-size: 1px !default;
$rte-2px-border-size: 2px !default;
$rte-border-type: solid !default;
$rte-list-btn-flex: column !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-big-quick-item-btn-height: 38px !default;
$rte-big-quick-item-padding: 8px !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-base !default;
$rte-toolbar-big-icon-size: $text-lg !default;
$rte-tb-items-margin-left: 7px !default;
$rte-active-tb-item-btn-padding: 0 5px !default;
$rte-split-btn-active-color-icon-line-height: 30px !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-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-active-hover: 0 !default;
$rte-font-icon-width: 30px !default;
$rte-font-arrow-width: 18px !default;
$rte-font-arrow-touch-width: 20px !default;
$rte-placeholder-line-height: $leading-normal !default;
$rte-big-active-tb-item-btn-padding: 0 8px !default;
$rte-table-popup-padding: 10px !default;
$rte-table-popup-min-height: 153px !default;
$rte-table-popup-border: 1px solid $border-light !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-big-content-font-size: 16px !default;
$rte-big-dialog-min-height: 350px !default;
$rte-content-font-size:  $text-sm !default;
$rte-dropdown-caret-icon-size: $text-xs !default;
$rte-big-dropdown-caret-icon-size: $text-sm !default;
$font-weight: $font-weight-normal !default;
$rte-resize-handler-margin-bottom: 3px;
$rte-resize-handler-margin-right: 3px;
$rte-resize-handler-position: 0;
$rte-inline-tmp-min-width: 55px;
$rte-inline-tmp-size-min-width: 66px;
$rte-inline-tmp-color-min-width: 55px;
$rte-big-color-list-span-common-padding-left-right: 0;
$rte-default-character-count-opacity: 1;
$rte-droparea-browsebtn-height: 32px;
$rte-droparea-browsebtn-padding: 0 12px;
$rte-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: 16px;
$rte-big-tablecell-height: 16px;
$rte-big-tablecell-width: 16px;
$rte-toolbar-item-frist-last-child-margin: 0;
$rte-toolbar-expaned-padding: 0 5px;
$rte-big-toolbar-expaned-padding: 0 8px;
$rte-toolbar-expaned-padding-hover: 0 5px;
$rte-big-formatlists-dropdown-line-height: 40px;
$rte-qt-item-btn-line-height: 32px;

//Layout Variables End

//Theme Variables Start
$rte-border-color: $grey-88 !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-hover-icons-color: $toolbar-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: $toolbar-icon-color !default;
$rte-quick-item-hover-border-color: $transparent !default;
$rte-quick-item-active-border-color: $secondary-border-color-pressed !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-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: $toolbar-icon-color !default;
$rte-tb-item-active-border:  0 !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: $content-text-color-pressed !default;
$rte-split-btn-active-hover-font-color: $icon-color !default;
$rte-tb-hover-font-color: $icon-color !default;
$rte-split-btn-hover-bg: $content-bg-color-hover !default;
$rte-split-btn-span-hover-bg: $content-bg-color-alt3 !default;
$rte-split-btn-focus-bg: $content-bg-color-focus !default;
$rte-btn-active-bg: $content-bg-color-pressed !default;
$rte-split-btn-active-color-icon-line-height: 30px !default;
$rte-default-btn-bg: $content-bg-color-alt1 !default;
$rte-split-btn-height: 32px !default;
$rte-big-split-btn-height: 40px !default;
$rte-hover-btn-border-color: $icon-color !default;
$rte-active-btn-icons-color: $toolbar-icon-color !default;
$rte-default-icon-color: $icon-color !default;
$rte-icon-color: $toolbar-icon-color !default;
$rte-hover-split-btn-border: 1px solid transparent !default;
$rte-split-btn-border: 1px solid transparent !default;
$rte-button-focus-box-shadow: $keyboard-focus !default;
$rte-dropdown-color: $content-text-color !default;
$rte-dropdown-transition-color: $toolbar-icon-color !default;
$rte-color-picker-line-height: 1 !default;
$rte-popup-item-min-height: 32px !default;
$rte-big-popup-item-min-height: 40px !default;
$rte-popup-bg: $content-bg-color-alt1 !default;

$rte-link-valid-color: $danger !default;
$rte-upload-drag-border-clr: $border !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 !default;
$rte-warning-character-count-color: $warning !default;
$rte-error-character-count-color: $danger !default;
$rte-img-border: solid 2px $border-dark !default;
$rte-font-family: $font-family !default;
$rte-content-color: $content-text-color !default;
$rte-content-blockquote-border-left-color: solid 2px $content-text-color !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-text-color-disabled !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 !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-md !default;
$rte-table-border-color: $border-light !default;
$rte-table-alternate-color: $content-bg-color-alt3 !default;
$rte-table-header-bg: $holiday-bg-color !default;
$rte-toolbar-hor-nav-border-width: 0 !default;
$rte-extended-toolbar-items-padding: 0;
$rte-table-multicell-select-bg-color: rgba(15, 108, 189, .1) !default;
$rte-pre-bg-color: $content-bg-color-alt2 !default;
$rte-code-background: rgba(157, 157, 157, .15) !default;
$rte-code-color: rgba(237, 72, 76) !default;

//Theme Variables End

$rte-tb-hover-bg-color: $content-bg-color-hover !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-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-quick-popup-border: 1px solid $flyout-border !default;
$rte-quick-popup-outer-margin: 3px 7px !default;
$rte-quick-popup-inner-padding: 0 !default;
$rte-quick-big-popup-outer-margin: 3px 9px !default;
$rte-quick-big-popup-inner-padding: 0 !default;
$rte-quick-popup-bg-color: $flyout-bg-color !default;
$rte-quick-popup-box-shadow: $shadow-md !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-tb-expended-min-height: 48px !default;
$rte-big-tb-expended-min-height: 56px !default;
$rte-tb-expended-padding-left: 1px !default;
$rte-tb-expended-hover-padding-left: 0 !default;
$rte-toolbar-expaned-minwidth: 22px !default;
$rte-selection-color: $white !default;
$rte-selection-bg: $brand-80 !default;
$rte-content-pre-background: inherit;
$rte-selection-color: $primary-text-color !default;
$rte-selection-bg: $primary !default;
$rte-insert-icon-color: $primary !default;
$rte-emoji-pop-background: $flyout-bg-color;
$rte-emoji-pop-box-shadow: $shadow-md;
$rte-emoji-pop-border:1px solid $border-light;
$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-height: 32px;
$rte-emoji-grp-btn-width: 32px;
$rte-emoji-headname-font-weight: 400;
$rte-emoji-headname-color:$content-text-color-alt2;
$rte-big-emoji-btn-height: 254px;

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

$rte-img-upload-abort-icon-btn-margin-top: 0;
$rte-big-img-upload-abort-icon-btn-margin-top: -4px;
$rte-big-img-upload-abort-icon-btn-padding: 18px;
$rte-dialog-upload-status-progress: $info;
$rte-code-block-label-font-weight: 600 !default;
$rte-code-block-label-font-family: Segoe UI !default;
$rte-code-block-label-line-height: 16px !default;
$rte-code-block-font-family: Space Mono !default;
$rte-code-block-font-weight: 400 !default;
$rte-code-block-line-height: 20px !default;
$rte-hr-border: 2px solid rgba(176, 179, 184, 1) !default;
$rte-hr-outline: rgba(0, 120, 214, 1) !default;

$rte-quick-toolbar-tip-pointer-border: $flyout-border !default;
$rte-quick-toolbar-tip-pointer-content: $flyout-bg-color !default;

/* stylelint-disable */
.e-rte-quick-popup {
    border-radius: $radius-6 !important;
    .e-rte-quick-toolbar {
      border-radius: $radius-6 !important;
    }
}

$rte-popup-padding: 0 9.51px !default;
$rte-popup-item-padding: 4px 0 !default;

$rte-checklist-checked-bg-color: $primary !default;
$rte-checklist-checked-border-color: 1px solid var(--Foreground-color-primary, rgba(15, 108, 189, 1)) !default;
$rte-checklist-checked-checkmark-color: $primary-text-color !default;
$rte-checklist-checkbox-border: 1px solid var(--Border-color-border-alt, rgba(97, 97, 97, 1));

$rte-ai-assistant-btn-disabled: $icon-color-disabled !default;
$rte-ai-assistant-box-shadow: $shadow-lg !default;

$rte-toolbar-item-hov-bg-color: $content-bg-color-hover;

//Start of Typography Variables Implementation
//font-size
$rte-pre-before-content-font-size: 12px !default;
$rte-default-character-count-font-size: 14px !default;
$rte-drop-text-font-size: 14px !default;
$rte-emoji-headname-font-size: 14px !default;
$rte-table-header-font-size: 14px !default;
$rte-popup-open-font-size: 14px !default;
$rte-pre-font-size: 14px !default;
$rte-slash-menu-item-text-font-size: 14px !default;
$rte-big-emoji-popup-small-font-size: 16px !default;
$rte-big-emoji-picker-name-font-size: 16px !default;
$rte-big-emoji-btn-group-small-font-size: 16px !default;
$rte-emoji-pop-tbar-btn-small-font-size: 16px !default;
$rte-emoji-grp-btn-small-font-size: 16px !default;
$rte-emoji-pop-tbar-btn-large-font-size: 24px !default;
$rte-emoji-grp-btn-large-font-size: 24px !default;
$rte-emoji-grp-btn-font-size: 24px !default;
$rte-slash-menu-content-font-size: 30px !default;
$rte-slash-menu-para-before-font-size: 15px !default;
$rte-slash-menu-h1-before-font-size: 13px !default;
$rte-slash-menu-h2-before-font-size: 13px !default;
$rte-slash-menu-h3-before-font-size: 13px !default;
$rte-slash-menu-h4-before-font-size: 13px !default;
$rte-slash-menu-item-description-font-size: 12px !default;
$rte-common-content-font-size: 1em !default;
$rte-content-h4-font-size: 1.714em !default;
$rte-content-h5-font-size: 1.428em !default;
$rte-content-h6-font-size: 1.142em !default;
$rte-content-ul-h3-font-size: 1.16em !default;
$rte-content-ul-h4-font-size: 1em !default;
$rte-content-ul-h5-font-size: .83em !default;
$rte-content-ul-h6-font-size: .7em !default;
$rte-filemanager-label-font-size: 15px !default;
$rte-content-h1-font-size: 2.857em !default;
$rte-content-h2-font-size: 2.285em !default;
$rte-content-h3-font-size: 2em !default;
$rte-content-ul-h1-font-size: 2em !default;
$rte-content-ul-h2-font-size: 1.5em !default;
$rte-big-emoji-popup-large-font-size: 26px !default;
$rte-big-emoji-btn-group-large-font-size: 26px !default;
$rte-big-emoji-picker-group-font-size: 26px !default;
$rte-big-content-h1-font-size: 2.857em !default;
$rte-big-content-h2-font-size: 2.285em !default;
$rte-big-content-h3-font-size: 2em !default;
$rte-big-content-h4-font-size: 1.714em !default;
$rte-big-content-h5-font-size: 1.428em !default;
$rte-big-content-h6-font-size: 1.142em !default;
$rte-big-content-ul-h1-font-size: 2em !default;
$rte-big-content-ul-h2-font-size: 1.5em !default;
$rte-big-content-ul-h3-font-size: 1.16em !default;
$rte-big-content-ul-h4-font-size: 1em !default;
$rte-big-content-ul-h5-font-size: .83em !default;
$rte-big-content-ul-h6-font-size: .7em !default;

//font-weight
$rte-slash-menu-content-text-font-weight: 500 !default;
$rte-big-emoji-picker-name-font-weight: 500 !default;
$rte-content-h1-font-weight: 600 !default;
$rte-content-h2-font-weight: 600 !default;
$rte-content-h3-font-weight: 600 !default;
$rte-content-h4-font-weight: 600 !default;
$rte-content-h5-font-weight: 600 !default;
$rte-edit-table-border-label-font-weight: 600 !default;
$rte-content-font-weight: 400 !default;
$rte-lable-font-weight: 400 !default;
$rte-color-picker-font-weight: 400 !default;
$rte-popup-open-font-weight: 400 !default;
$rte-dropdown-btn-font-weight: 400 !default;
$rte-popup-open-font-weight: 400 !default;
$rte-content-strong-b-font-weight: 700 !default;
$rte-content-ul-h1-font-weight: 700 !default;
$rte-content-ul-h2-font-weight: 700 !default;
$rte-content-ul-h3-font-weight: 700 !default;
$rte-content-ul-h4-font-weight: 700 !default;
$rte-content-ul-h5-font-weight: 700 !default;
$rte-content-ul-h6-font-weight: 700 !default;
$rte-content-img-caption-font-weight: 400;

//line-height
$rte-slash-menu-item-text-line-height: 20px !default;
$rte-slash-menu-content-line-height: 20px !default;
$rte-slash-menu-item-description-line-height: 20px !default;
$rte-content-ul-h1-line-height: 40px !default;
$rte-content-ul-h2-line-height: 40px !default;
$rte-content-ul-h1-small-line-height: 24px !default;
$rte-content-ul-h2-small-line-height: 24px !default;
$rte-content-h1-line-height: 1.2 !default;
$rte-content-h5-line-height: 1.2 !default;
$rte-content-h6-line-height: 1.5 !default;
$rte-dialog-word-upload-text-line-height: normal;
$rte-uploadwrap-droparea-upload-text-line-height: normal;
$rte-content-line-height: 1.5 !default;
$rte-content-h2-line-height: 1.2 !default;
$rte-content-h3-line-height: 1.2 !default;
$rte-content-h4-line-height: 1.2 !default;
$rte-srctextarea-line-height: 22px !default;
$rte-inline-dropdown-line-height: 34px !default;
$rte-big-content-height: 1.5 !default;
$rte-big-content-h1-line-height: 1.2 !default;
$rte-big-content-h2-line-height: 1.2 !default;
$rte-big-content-h3-line-height: 1.2 !default;
$rte-big-content-h4-line-height: 1.2 !default;
$rte-big-content-h5-line-height: 1.2 !default;
$rte-big-content-h6-line-height: 1.5 !default;

//border-radius
$rte-content-pre-border-radius: $radius-0 !default;
$rte-emoji-pop-border-radius: $radius-4 !default;
$rte-upload-drag-border-radius: $radius-4 !default;
$rte-big-emojipicker-tbar-btn-border-radius: $radius-4 !default;
$rte-checklist-checkbox-border-radius: $radius-2 !default;
$rte-container-border-radius: $radius-4 !default;
$rte-big-container-border-radius: $radius-4 !default;
$rte-tb-item-active-border-radius: $radius-4 !default;
$rte-border-radius: $radius-4 !default;
$rte-pre-border-radius: $radius-6 !default;
$rte-big-tb-expand-border-radius: $radius-8 !default;
$rte-big-dialog-border-radius: $radius-16 !default;
$rte-insert-table-btn-border-radius: $radius-20 !default;
$rte-toolbar-border-radius: $radius-0 $radius-4 $radius-0 $radius-0 !default;
$rte-toolbar-container-border-radius: $radius-0 $radius-0 $radius-4 $radius-4 !default;
$rte-pre-before-content-border-radius: $radius-0 $radius-0 $radius-4 $radius-4 !default;
$rte-toolbar-wrapper-border-radius: $radius-4 $radius-4 $radius-0 $radius-0 !default;
$rte-big-toolbar-border-radius: $radius-0 $radius-4 $radius-0 $radius-0 !default;
$rte-big-toolbar-container-border-radius: $radius-0 $radius-0 $radius-4 $radius-4 !default;
$rte-big-toolbar-wrapper-border-radius: $radius-4 $radius-4 $radius-0 $radius-0 !default;
$rte-videoboxmark-border-radius: $radius-15 !default;
$rte-quick-popup-border-radius: $radius-4 !default;
$rte-split-btn-border-radius: $radius-4 !default;
$rte-table-popup-border-radius: $radius-6 !default;
$rte-top-left-border-radius: $radius-8 !default;
$rte-top-right-border-radius: $radius-8 !default;

//padding
$rte-content-pre-padding: 0 !default;
$rte-upload-dlg-content-padding: 0 !default;
$rte-table-dlg-content-padding: 0 !default;
$rte-big-toolbar-tbar-btn-hover-padding: 0 !default;
$rte-big-toolbar-tbar-btn-active-padding: 0 !default;
$rte-big-toolbar-tbar-btn-padding: 0 !default;
$rte-emoji-picker-tbar-btn-text-padding: 0 !default;
$rte-video-elem-padding: 0 !default;
$rte-colorpicker-custom-palette-padding: 0 !default;
$rte-container-custom-palette-padding: 0 !default;
$rte-img-wrap-padding: 0 !default;
$rte-media-break-elem-padding: 1px !default;
$rte-media-inline-elem-padding: 1px !default;
$rte-colorpicker-custom-palette-switch-btn-padding: 5px !default;
$rte-video-wrapper-padding: 5px !default;
$rte-content-textarea-padding: 8px !default;
$rte-emoji-btn-padding: 10px !default;
$rte-big-emoji-btn-padding: 12px !default;
$rte-slash-menu-icon-padding: 15px !default;
$rte-placeholder-padding: 16px !default;
$rte-content-src-textarea-padding: 16px !default;
$rte-iframe-content-padding: 16px !default;
$rte-big-emoji-btn-group-padding: 8px 0 !default;
$rte-big-emoji-picker-group-padding: 8px 0 !default;
$rte-big-emoji-popup-padding: 9px 5px !default;
$rte-big-toolbar-tbar-btn-small-padding: 3px 7px !default;
$rte-big-toolbar-tbar-btn-large-padding: 2px 5px !default;
$rte-dlg-modal-browse-btn-padding: 0 18px !default;
$rte-link-dlg-content-padding: 7px 20px !default;
$rte-emoji-picker-tbar-btn-material-padding: 0 6px !default;
$rte-emoji-grp-btn-padding: 6px 0 !default;
$rte-video-url-wrap-padding: 8px 4px !default;
$rte-emoji-grp-btn-control-padding: 6px 0 !default;
$rte-table-padding: 2px 5px !default;
$rte-emoji-picker-tbar-btn-hover-padding: 7px 3px !default;
$rte-emoji-picker-tbar-btn-padding: 7px 3px !default;
$rte-code-block-padding: 20px 16px 16px !default;
$rte-inline-dropdown-ul-padding: 7px 0 !default;
$rte-slash-menu-item-text-padding:  5px 0 1px !default;
$rte-slash-menu-item-description-padding: 1px 0 5px !default;
$rte-code-block-label-padding: 2px 4px !default;
$rte-big-slash-menu-item-description-padding: 1px 0 5px !default;
$rte-big-slash-menu-item-text-padding: 5px 0 1px !default;
$rte-inline-dropdown-li-padding: 0 6.5px !default;
$rte-toolbar-tbar-btn-padding: 0 !default;
$rte-toolbar-tbar-btn-hover-padding: 0 !default;
$rte-toolbar-tbar-btn-icons-padding: 0 !default;
$rte-big-split-tbar-btn-padding: 0 !default;
$rte-big-split-tbar-btn-hover-padding: 0 !default;
$rte-big-split-tbar-btn-icons-padding: 0 !default;

//padding-left
$rte-blockquote-padding-left: 0 !default;
$rte-big-slashmenu-li-padding-left: 0 !default;
$rte-iframe-blockquote-padding-left: 12px !default;
$rte-character-count-padding-left: 30px !default;

//padding-right
$rte-blockquote-padding-right: 12px !default;
$rte-character-count-padding-right: unset !default;

//padding-top
$rte-video-dialog-label-padding-top: 0 !default;
$rte-dlg-header-content-padding-top: 0 !default;
$rte-table-dialog-label-padding-top: 0 !default;
$rte-filemanager-label-padding-top: 15px !default;
$rte-video-url-wrapper-padding-top: 15px !default;
$rte-radio-keep-format-padding-top: 24px !default;
$rte-radio-remove-plain-padding-top: 20px !default;
$rte-link-label-first-child-padding-top: 0 !default;
$rte-img-label-first-child-padding-top: 0 !default;

//padding-bottom
$rte-count-resize-enabled-content-padding-bottom: 0 !default;
$rte-default-character-count-padding-bottom: 2px !default;
$rte-video-url-wrapper-padding-bottom: 5px !default;
$rte-filemanager-label-padding-bottom: 8px !default;

//margin
$rte-table-tablecell-small-margin: 0 !default;
$rte-dialog-radio-small-margin: 0 !default;
$rte-video-elem-margin: 0 !default;
$rte-tbar-btn-small-margin: 0 !default;
$rte-table-gripper-active-bg: $primary !default;
$rte-table-gripper-active-color: $primary-text-color !default;
$rte-table-gripper-hover-bg: $primary-lighter !default;
$rte-table-dlg-content-small-margin: 0 !default;
$rte-content-textarea-margin: 0 !default;
$rte-quick-toolbar-horizontal-separator-margin: 0 !default;
$rte-popup-toolbar-item-margin: 0 !default;
$rte-quick-horizontal-separator-first-margin: 0 !default;
$rte-table-tablecell-large-margin: 1px !default;
$rte-table-open-tablecell-margin: 1px !default;
$rte-emojipicker-input-control-wrapper-margin: 10px !default;
$rte-content-hr-margin: 10px 0 !default;
$rte-content-h1-margin: 10px 0 !default;
$rte-content-h2-margin: 10px 0 !default;
$rte-content-h3-margin: 10px 0 !default;
$rte-content-h4-margin: 10px 0 !default;
$rte-content-h5-margin: 10px 0 !default;
$rte-content-h6-margin: 10px 0 !default;
$rte-content-blockquote-margin: 10px 0 !default;
$rte-content-pre-margin: 0 0 10px !default;
$rte-content-p-margin: 0 0 10px !default;
$rte-ul-menu-icon-margin: 0 6px !default;
$rte-rtl-ul-menu-icon-margin: 0 6px !default;
$rte-img-video-center-margin: 5px auto !default;
$rte-img-video-left-margin: 0 auto !default;
$rte-img-video-right-margin: 0 auto !default;
$rte-drop-text-margin: 0 auto !default;
$rte-drop-text-mobile-margin: 0 auto !default;
$rte-img-caption-margin: 5px auto !default;
$rte-droparea-browsebtn-margin: 0 auto 10px !default;
$rte-dlg-modal-browse-btn-margin: 0 auto 10px !default;
$rte-media-droparea-browsebtn-margin: 0 auto 10px !default;
$rte-li-ul-margin:  10px !default;
$rte-big-quick-toolbar-item-margin: 0 !default;
$rte-media-elem-margin: auto !default;
$rte-content-img-caption-inner-margin: auto !default;
$rte-img-wrap-margin: auto !default;
$rte-img-leftwrap-margin: 5px 5px 5px 0 !default;
$rte-img-rightwrap-margin: 5px 0 5px 5px !default;

//margin-left
$rte-content-blockquote-margin-left: 0 !default;
$rte-toolbar-multirow-margin-left: 0 !default;
$rte-toolbar-item-first-child-margin-left: 0 !default;
$rte-imgleft-margin-left: 0 !default;
$rte-uploadwrap-file-container-margin-left: 0 !default;
$rte-toolbar-poup-extended-margin-left: 0 !default;
$rte-media-inline-elem-margin-left: 5px !default;
$rte-img-video-right-margin-left: 5px !default;
$rte-slash-menu-icon-margin-left: 15px !default;
$rte-imgcenter-margin-left: auto !default;
$rte-imgright-margin-left: auto !default;

//margin-right
$rte-imgright-margin-right: 0 !default;
$rte-toolbar-multirow-margin-right: 0 !default;
$rte-img-caption-imgright-margin-right: 0 !default;
$rte-media-inline-elem-margin-right: 5px !default;
$rte-img-video-left-margin-right: 5px !default;
$rte-default-character-count-margin-right: 15px !default;
$rte-upload-file-container-margin-right: 50px !default;
$rte-imgcenter-margin-right: auto !default;
$rte-imgleft-margin-right: auto !default;
$rte-character-count-last-child-margin-right: 10px !default;
$rte-character-count-rtl-margin-right: auto !default;

//margin-top
$rte-uploadwrap-file-btn-icons-margin-top: 0 !default;
$rte-color-picker-margin-top: 3px !default;
$rte-table-field-margin-top: 4px !default;
$rte-table-element-margin-top: 12px !default;
$rte-table-span-margin-top: 12px !default;
$rte-content-h3-h4-tag-margin-top: .6em !default;
$rte-content-h4-h5-tag-margin-top: .6em !default;
$rte-content-h5-h6-tag-margin-top: .6em !default;
$rte-big-content-h3-h4-tag-margin-top: .6em !default;
$rte-big-content-h4-h5-tag-margin-top: .6em !default;
$rte-big-content-h5-h6-tag-margin-top: .6em !default;
$rte-content-table-margin-top: 10px !default;
$rte-imgleft-margin-top: 5px !default;

//margin-bottom
$rte-tb-bottom-content-margin-bottom: 0 !default;
$rte-content-ul-tag-margin-bottom: 0 !default;
$rte-content-para-pre-block-last-margin-bottom: 0 !default;
$rte-table-span-margin-bottom: 8px !default;
$rte-content-p-margin-bottom: 10px !default;
$rte-content-li-margin-bottom: 10px !default;
$rte-content-table-margin-bottom: 10px !default;
$rte-resize-bar-margin-bottom: 20px !default;
$rte-img-leftwrap-inner-margin-bottom: 5px !default;
$rte-img-rightwrap-inner-margin-bottom: 5px !default;
$rte-img-wrap-img-margin-bottom: 0 !default;

//border
$rte-content-pre-border: 0 !default;
$rte-content-textarea-border: 0 !default;
$rte-content-src-textarea-border: 0 !default;
$rte-media-break-elem-border: 0 !default;
$rte-media-elem-border: 0 !default;
$rte-quick-popup-hide-border: 0 !default;
$rte-hr-small-border: 2px solid rgba(157, 157, 157, .48) !default;
$rte-pre-border: 1px solid rgba(229, 231, 235, 1) !default;
$rte-pre-small-border: 1px solid rgba(40, 47, 60, 1) !default;
$rte-table-select-border: 2px double $rte-table-select-border-color !default;
$rte-table-select-multi-cells-border: 1px double $rte-table-select-border-color !default;
$rte-container-border: 1px solid $rte-border-color !default;
$rte-table-border: 1px solid $rte-table-border-color !default;
$rte-media-droparea-upload-border: 0 solid transparent !default;
$rte-content-table-select-border: 1px double $rte-table-select-border-color !default;
$rte-table-border-table-border: 1px double $rte-table-border-color !default;
$rte-import-word-upload-border: 0 solid transparent !default;
$rte-drop-text-border: 2px dashed $rte-upload-drag-border-clr !default;
$rte-table-span-active-border: 1px solid $rte-table-span-active-border-color !default;
$rte-tb-expended-hover-border: solid rgba(0, 0, 0, .12) !default;
$rte-img-video-boxmark-border: 1px solid $rte-img-resize-color !default;
$rte-mob-img-video-boxmark-border: 1px solid $rte-img-resize-back-color !default;
$rte-direct-span-media-boxmark-border: 1px solid $rte-img-resize-color !default;
$rte-emoji-grp-btn-border: none !default;
$rte-insert-table-btn-border: none !default;
$rte-iframe-content-border: none !default;
$rte-quick-popup-toolbar-border: none !default;
$rte-toolbar-btn-border: none !default;
$rte-toolbar-btn-hover-border: none !default;
$rte-emojipicker-toolbar-border: none !default;
$rte-emojipicker-toolbar-scroll-border: none !default;
$rte-toolbar-pop-border: none !default;

//border-bottom
$rte-dialog-file-list-border-bottom: 0 !default;
$rte-uploadwrap-file-list-border-bottom: 0 solid transparent !default;
$rte-reicon-before-border-bottom: 6px solid transparent !default;
$rte-reicon-after-border-bottom: 6px solid transparent !default;
$rte-toolbar-wrapper-container-border-bottom: 1px solid $rte-border-color !default;

//border-top
$rte-dialog-upload-files-border-top: 0 !default;
$rte-reicon-before-border-top: 6px solid transparent !default;
$rte-reicon-after-border-top: 6px solid transparent !default;
$rte-wrapper-tb-bottom-border-top: 1px solid $rte-border-color !default;
$rte-droparea-files-border-top: 0 solid transparent !default;

//border-left
$rte-content-blockquote-border-left: 0 !default;
$rte-reicon-after-border-left: 6px solid !default;

//border-right
$rte-reicon-before-border-right: 6px solid !default;

//gap
$rte-edit-table-cell-gap: 16px !default;
$rte-emoji-btn-gap: 10px !default;
$rte-emoji-btn-group-gap: 6px !default;
$rte-emoji-search-btn-gap: 6px !default;
$rte-big-emoji-search-btn-gap: 6px !default;
$rte-slashmenu-description-gap: 10px !default;
$rte-big-emoji-btn-gap: 10px !default;
$rte-big-emoji-btn-group-gap: 8px !default;

//height
$rte-content-ul-h1-height: 40px;
$rte-content-ul-h2-height: 40px;
$rte-checklist-checkbox-height: 16px;
$rte-container-height: 100%;
$rte-content-textarea-height: 100%;
$rte-full-screen-height: 100%;
$rte-content-height: 100%;
$rte-table-cell-after-height: 100%;
$rte-srctextarea-height: 100%;
$rte-color-picker-height: auto;
$rte-media-inline-dropdown-height: 34px;
$rte-content-table-select-height: inherit;
$rte-emoji-search-btn-height: 0;
$rte-modal-popup-container-height: 100%;
$rte-popup-overlay-height: 100%;
$rte-reicon-before-height: 0;
$rte-reicon-after-height: 0;
$rte-dlg-modal-browse-btn-mobile-height: 36px;
$rte-toolbar-wrapper-container-height: auto;
$rte-tip-pointer-before-after-height: 0;

//width
$rte-checklist-checkbox-width: 16px;
$rte-container-width: 100%;
$rte-content-textarea-width: 100%;
$rte-full-screen-width: 100%;
$rte-toolbar-multirow-width: 100%;
$rte-content-width: 100%;
$rte-e-content-width: 100%;
$rte-table-cell-after-width: 100%;
$rte-srctextarea-width: 100%;
$rte-color-picker-width: 100%;
$rte-ul-menu-icon-width: auto;
$rte-drop-text-width: auto;
$rte-content-img-caption-inner-width: 100%;
$rte-img-wrap-width: 100%;
$rte-insert-table-btn-width: 100%;
$rte-table-bgcolor-width: 50%;
$rte-modal-popup-container-width: 100%;
$rte-popup-overlay-width: 100%;
$rte-insert-table-btn-width: 100%;
$rte-pop-toolbar-extended-width: 100%;
$rte-tip-pointer-before-after-width: 0;
$rte-emoji-popup-open-width: 310px;
$rte-big-emoji-popup-open-width: 337px;

//min-height
$rte-dialog-min-height: 298px;
$rte-uploadwrap-file-list-min-height: initial;
$rte-quick-toolbar-min-height: auto;
$rte-quick-toolbar-items-not-tbar-pos-min-height: auto;
$rte-quick-toolbar-items-not-tbar-pos-min-width: auto;
$rte-popup-toolbar-item-min-height: auto;
$rte-big-quick-toolbar-min-height: auto;
$rte-big-quick-toolbar-items-not-tbar-pos-min-height: auto;
$rte-big-popup-toolbar-item-min-height: auto;
$rte-expended-nav-min-height: 32px;
$rte-big-expended-nav-min-height: 40px;
$rte-emoji-popup-open-min-height: 330px;
$rte-big-emoji-popup-open-min-height: 337px;

//min-width
$rte-quick-toolbar-min-width: auto;
$rte-popup-toolbar-item-min-width: auto;
$rte-big-quick-toolbar-min-width: auto;
$rte-big-quick-toolbar-items-not-tbar-pos-min-width: auto;
$rte-big-popup-toolbar-item-min-width: auto;
$rte-dropdown-icons-ul-min-width: auto;

//max-width
$rte-media-break-elem-max-width: 100%;
$rte-media-elem-max-width: 100%;
$rte-media-inline-elem-max-width: 100%;
$rte-img-video-center-max-width: 100%;
$rte-img-caption-max-width: 100%;

//max-height
$rte-codeblock-dropdown-popup-max-height: 300px;

//theme-specific
$rte-dialog-fluent-min-height: 308px;
$rte-big-dialog-fluent-min-height: 350px;
$rte-toolbar-items-top-left-border-radius: $radius-4 !default;

//End of Typography Variables Implementation

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

  /*! tab layout */

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

    .e-rte-container {
      display: flex;
      flex-direction: column;
      width: $rte-container-width;
      height: $rte-container-height;
      content: 'light-theme';
      @if $theme-name == 'bootstrap-dark' or $theme-name == 'material-dark' or $theme-name == 'fabric-dark' or $theme-name == 'material3-dark' or $theme-name == 'fluent2-dark' or $theme-name == 'fluent2-highcontrast' or $theme-name == 'highcontrast' or $theme-name == 'botstrap5-dark' or $theme-name == 'tailwind-dark' or $theme-name == 'fluentui-dark' or $theme-name == 'tailwind3-dark' {
        content: 'dark-theme';
      }
      &.e-count-enabled,
      &.e-resize-enabled {
        .e-content {
          padding-bottom: $rte-count-resize-enabled-content-padding-bottom;
        }
      }

      &.e-source-code-enabled {
        .e-rte-content {
          display: none;
        }

        .e-source-content {
          display: block;
          overflow: hidden;
        }
      }

      &.e-rte-tb-bottom {
        .e-rte-content {
          margin-bottom: $rte-tb-bottom-content-margin-bottom;
        }
      }
    }

    .e-rte-content {
      flex-grow: 1;

      .e-rte-placeholder.e-placeholder-enabled {
        display: block;
        font-size: $rte-content-font-size;
      }
      .e-row-wrapper,
      .e-col-wrapper,
      .e-table-wrapper {
        user-select: none;
        position: absolute;
        cursor: pointer;
        .e-icons.e-drag-and-drop {
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 4px 0 0 4px;
          &.e-rtl {
            border-radius: 0 4px 4px 0;
          }
          &:hover {
            background: $rte-table-gripper-hover-bg;
          }
          &.e-active {
            background-color: $rte-table-gripper-active-bg;
            color: $rte-table-gripper-active-color;
          }
        }
        .e-icons.e-move {
          border-radius: 50%;
          &:hover {
            background: $rte-table-gripper-hover-bg;
          }
          &.e-active {
            background-color: $rte-table-gripper-active-bg;
            color: $rte-table-gripper-active-color;
          }
        }
      }
      .e-col-wrapper .e-icons.e-drag-and-drop {
        border-radius: 4px 4px 0 0;
        &::before {
          transform: rotate(90deg);
        }
      }
    }

    .e-source-content {
      display: none;
    }

    & textarea.e-content {
      border: $rte-content-textarea-border;
      display: block;
      height: $rte-content-textarea-height;
      margin: $rte-content-textarea-margin;
      outline: 0;
      padding: $rte-content-textarea-padding;
      resize: none;
      width: $rte-content-textarea-width;
    }

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

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

    &.e-rte-full-screen {
      bottom: 0;
      height: $rte-full-screen-height !important; /* stylelint-disable-line declaration-no-important */
      left: 0;
      overflow: auto;
      position: fixed;
      right: 0;
      top: 0;
      width: $rte-full-screen-width !important; /* stylelint-disable-line declaration-no-important */
      z-index: 999;

      .e-resize-handle {
        display: none;
      }

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

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

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

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

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

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

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

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

    &.e-rtl .e-rte-tb-bottom .e-rte-character-count {
      text-align: left;
    }

    &.e-rtl .e-rte-character-count {
      margin-right: $rte-character-count-rtl-margin-right;
      padding-left: $rte-character-count-padding-left;
      padding-right: $rte-character-count-padding-right;
    }

    &.e-rtl .e-rte-content .e-content blockquote {
      padding-left: $rte-blockquote-padding-left;
      padding-right: $rte-blockquote-padding-right;
    }

    .e-rte-toolbar {

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

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

      .e-hor-nav.e-expended-nav {
        height: $rte-expended-nav-min-height; //used toolbar component nav default min-height
        min-height: $rte-expended-nav-min-height; //used toolbar component nav default min-height
      }
    }

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

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

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

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

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

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

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

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

    .e-rte-placeholder {
      color: $rte-content-font-color;
      line-height: $rte-placeholder-line-height;
      opacity: .54;
      overflow: hidden;
      padding: $rte-placeholder-padding;
      position: absolute;
      text-align: start;
      top: 0;
      z-index: 1;
      display: none;
    }

    .e-rte-content,
    .e-rte-iframe-content {
      position: relative;
      z-index: 1;
    }

    .e-rte-content,
    .e-source-content,
    .e-rte-iframe-content {
      overflow: hidden;
      transition: 100ms ease-out;
      width: $rte-content-width;
      font-size: $rte-content-font-size;

      .e-content {
        width: $rte-e-content-width;
        display: block;
        float: left;
        background: unset;
        box-sizing: border-box;
        height: $rte-content-height;
        min-height: 100px;
        outline: 0 solid transparent;
        padding: $rte-iframe-content-padding;
        position: relative;
        text-align: inherit;
        z-index: 2;
        font-weight: $rte-content-font-weight;
        line-height: $rte-content-line-height;
        font-size: $rte-common-content-font-size;
        /* stylelint-disable property-no-vendor-prefix */
        -webkit-overflow-scrolling: touch; //iOS devices scrolling smooth
        // sass-lint:enabled no-vendor-prefixes
        overflow: auto;
        transition: 100ms ease-out;
      }

      .e-content p {
        margin: $rte-content-p-margin;
        margin-bottom: $rte-content-p-margin-bottom;
      }

      .e-content blockquote {
        font-size: $rte-common-content-font-size;
      }

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

      .e-content hr {
        margin: $rte-content-hr-margin;
        border: $rte-hr-border;
        @if $theme-name == 'Material3-dark' or $theme-name == 'fluent2-dark' or $theme-name == 'fluentui-dark' or $theme-name == 'fluent2-highcontrast' or $theme-name == 'highcontrast' or $theme-name == 'botstrap5-dark' or $theme-name == 'tailwind-dark' {
          border: $rte-hr-small-border;
        }
      }

      .e-content {
        .e-rte-checklist > li:not(.e-rte-checklist-hidden) {
          list-style: none;
          position: relative;
        }

        .e-rte-checklist > li::before {
          content: '';
          position: absolute;
          top: 2px;
          box-sizing: content-box;
          left: -25px;
          width: $rte-checklist-checkbox-width;
          height: $rte-checklist-checkbox-height;
          border-radius: $rte-checklist-checkbox-border-radius;
          border: $rte-checklist-checkbox-border;
          cursor: pointer;
        }

        .e-rte-checklist li.e-rte-checklist-checked::before {
          background: $rte-checklist-checked-bg-color;
          border: $rte-checklist-checked-border-color;
        }

        .e-rte-checklist li.e-rte-checklist-checked::after {
          border-color: $rte-checklist-checked-checkmark-color;
          border-style: solid;
          border-width: 0 calc(16px / 8) calc(16px / 8) 0;
          box-sizing: content-box;
          content: '';
          display: block;
          height: 8px;
          width: 4px;
          left: -19px;
          position: absolute;
          top: 4.5px;
          transform: rotate(45deg);
          cursor: pointer;
          @if $theme-name =='Material3-dark' or $theme-name =='Material3' {
            left: -18px;
            top: 5.5px;
          }
        }
      }

      .e-content.e-rtl {
        .e-rte-checklist li.e-rte-checklist-checked::after {
          right: -19px;
        }
        .e-rte-checklist > li::before {
          right: -25px;
        }
      }

      .e-content hr:hover {
        cursor: default;
      }

      hr.e-rte-hr-focus {
        outline: 2px solid $rte-hr-outline;
        outline-offset: 3px;
        @if $theme-name == 'Material3-dark' or $theme-name == 'fluent2-dark' or $theme-name == 'fluentui-dark' or $theme-name == 'fluent2-highcontrast' or $theme-name == 'highcontrast' or $theme-name == 'botstrap5-dark' or $theme-name == 'tailwind-dark' {
          outline: 2px solid rgba(0, 116, 204, 1);
        }
      }

      .e-content li {
        margin-bottom: $rte-content-li-margin-bottom;
      }

      .e-content li ol,
      .e-content li ul {
        margin-block-start: $rte-li-ul-margin;
      }

      .e-content ul {
        list-style-type: disc;
      }

      .e-content ul ul,
      .e-content ol ul {
        list-style-type: circle;
      }

      .e-content ul ul ul,
      .e-content ol ul ul,
      .e-content ul ol ul,
      .e-content ol ol ul {
        list-style-type: square;
      }

      .e-content h1 {
        font-size: $rte-content-h1-font-size;
        font-weight: $rte-content-h1-font-weight;
        line-height: $rte-content-h1-line-height;
        margin: $rte-content-h1-margin;
      }

      .e-content h2 {
        font-size: $rte-content-h2-font-size;
        font-weight: $rte-content-h2-font-weight;
        line-height: $rte-content-h2-line-height;
        margin: $rte-content-h2-margin;
      }

      .e-content h3 {
        font-size: $rte-content-h3-font-size;
        font-weight: $rte-content-h3-font-weight;
        line-height: $rte-content-h3-line-height;
        margin: $rte-content-h3-margin;
      }

      .e-content h4 {
        font-size: $rte-content-h4-font-size;
        font-weight: $rte-content-h4-font-weight;
        line-height: $rte-content-h4-line-height;
        margin: $rte-content-h4-margin;
      }

      .e-content h5 {
        font-size: $rte-content-h5-font-size;
        font-weight: $rte-content-h5-font-weight;
        line-height: $rte-content-h5-line-height;
        margin: $rte-content-h5-margin;
      }

      .e-content h6 {
        font-size: $rte-content-h6-font-size;
        line-height: $rte-content-h6-line-height;
        margin: $rte-content-h6-margin;
      }

      .e-content blockquote {
        margin: $rte-content-blockquote-margin;
        margin-left: $rte-content-blockquote-margin-left;
        padding-left: $rte-iframe-blockquote-padding-left;
      }

      .e-content table {
        margin-bottom: $rte-content-table-margin-bottom;
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;

        &:not(:first-child):not(table table) {
          margin-top: $rte-content-table-margin-top;
        }
      }

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

        @if $skin-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
          background-color: $rte-pre-bg-color;
        }
      }
      .e-content pre[data-language] {
        background: rgba(157, 157, 157, .08);
        color: rgba(46, 46, 46, 1);
        font-family: $rte-code-block-font-family;
        border-radius: $rte-pre-border-radius;
        border: $rte-pre-border;
        padding: $rte-code-block-padding;
        font-size: $rte-pre-font-size;
        line-height: $rte-code-block-line-height;
        font-weight: $rte-code-block-font-weight;
        position: relative;
        @if $theme-name == 'bootstrap-dark' or $theme-name == 'material-dark' or $theme-name == 'fabric-dark' or $theme-name == 'material3-dark' or $theme-name == 'fluent2-dark' or $theme-name == 'fluent2-highcontrast' or $theme-name == 'highcontrast' or $theme-name == 'botstrap5-dark' or $theme-name == 'tailwind-dark' or $theme-name == 'fluentui-dark' or $theme-name == 'tailwind3-dark' {
          background: rgba(157, 157, 157, .08);
          color: rgba(245, 245, 245, 1);
          border: $rte-pre-small-border;
        }
        &::before {
          content: attr(data-language);
          font-family: $rte-code-block-label-font-family;
          font-weight: $rte-code-block-label-font-weight;
          color: rgba(249, 250, 251, 1);
          font-size: $rte-pre-before-content-font-size;
          line-height: $rte-code-block-label-line-height;
          right: 8px;
          padding: $rte-code-block-label-padding;
          background-color: rgba(105, 105, 105, 1);
          top: -1px;
          border-radius: $rte-pre-before-content-border-radius;
          position: absolute;
          @if $theme-name == 'bootstrap-dark' or $theme-name == 'material-dark' or $theme-name == 'fabric-dark' or $theme-name == 'Material3-dark' or $theme-name == 'fluent2-dark' or $theme-name == 'fluent2-highcontrast' or $theme-name == 'highcontrast' or $theme-name == 'botstrap5-dark' or $theme-name == 'tailwind-dark' or $theme-name == 'fluentui-dark' or $theme-name == 'tailwind3-dark' {
            background: rgba(189, 186, 186, 1);
            color: rgba(29, 36, 50, 1);
          }
        }
        code {
          color: rgba(46, 46, 46, 1);
          background: none;
          @if $theme-name == 'bootstrap-dark' or $theme-name == 'material-dark' or $theme-name == 'fabric-dark' or $theme-name == 'Material3-dark' or $theme-name == 'fluent2-dark' or $theme-name == 'fluent2-highcontrast' or $theme-name == 'highcontrast' or $theme-name == 'botstrap5-dark' or $theme-name == 'tailwind-dark' or $theme-name == 'fluentui-dark' or $theme-name == 'tailwind3-dark' {
            color: rgba(245, 245, 245, 1);
          }
        }
      }
      .e-content strong,
      .e-content b {
        font-weight: $rte-content-strong-b-font-weight;
      }

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

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

      .e-content p:last-child,
      .e-content p.e-rte-last-paragraph,
      .e-content pre:last-child,
      .e-content blockquote:last-child {
        margin-bottom: $rte-content-para-pre-block-last-margin-bottom;
      }

      .e-content h3 + h4 {
        margin-top: $rte-content-h3-h4-tag-margin-top;
      }

      .e-content h4 + h5 {
        margin-top: $rte-content-h4-h5-tag-margin-top;
      }

      .e-content h5 + h6 {
        margin-top: $rte-content-h5-h6-tag-margin-top;
      }

      .e-content ul:last-child {
        margin-bottom: $rte-content-ul-tag-margin-bottom;
      }

      .e-content table.e-cell-select {
        position: relative;
      }

      .e-content table.e-cell-select::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: $rte-table-select-border;
        pointer-events: none;
      }

      .e-content table td.e-cell-select.e-multi-cells-select,
      .e-content table th.e-cell-select.e-multi-cells-select {
        border: $rte-table-select-multi-cells-border;
        position: relative;
      }

      .e-content table td.e-cell-select.e-multi-cells-select::after,
      .e-content table th.e-cell-select.e-multi-cells-select::after {
        background-color: $rte-table-multicell-select-bg-color;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: $rte-table-cell-after-width;
        height: $rte-table-cell-after-height;
        bottom: 0;
        pointer-events: none;
        right: 0;
      }
      .e-content table td.e-multi-cells-select ::selection,
      .e-content table th.e-multi-cells-select ::selection {
        background-color: transparent;
      }
      .e-content table td.e-multi-cells-select,
      .e-content table th.e-multi-cells-select {
        user-select: none;
      }
    }

    .e-rte-tb-bottom {
      .e-rte-character-count {
        position: relative;
        text-align: right;
      }
    }

    .e-rte-character-count {
      color: $rte-default-character-count-color;
      font-size: $rte-default-character-count-font-size;
      margin-right: $rte-default-character-count-margin-right;
      opacity: $rte-default-character-count-opacity;
      padding-bottom: $rte-default-character-count-padding-bottom;
      text-align: right;
      z-index: 100;
      pointer-events: none;

      &.e-warning {
        color: $rte-warning-character-count-color;
        opacity: unset;
      }

      &.e-error {
        color: $rte-error-character-count-color;
        opacity: unset;
      }
    }

    &:not(.e-rtl) .e-rte-character-count:last-child {
      margin-right: $rte-character-count-last-child-margin-right;
    }

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

    .e-resize-handle {
      position: absolute;
      margin-bottom: $rte-resize-handler-margin-bottom; //changing width(15px) to margin right 3px

      &.e-south-east {
        bottom: $rte-resize-handler-position;
        cursor: nwse-resize;
        right: $rte-resize-handler-position;
        z-index: 100;
        margin-right: $rte-resize-handler-margin-right; //changing height(15px) to margin right 3px
      }

      &.e-south-west {
        bottom: $rte-resize-handler-position;
        cursor: sw-resize;
        left: $rte-resize-handler-position;
        transform: rotate(90deg);
        z-index: 100;
        margin-left: $rte-resize-handler-margin-right; //changing height(15px) to margin left 3px
      }
    }

    &.e-rtl {

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

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

    &.e-rte-tb-expand {
      &.e-rte-fixed-tb-expand {
        transition: none;
      }
    }
    .e-clickelem::after,
    .e-video-clickelem::after {
      left: 0;
      right: 0;
      z-index: 1;
    }
    .e-clickelem::before,
    .e-video-clickelem::before {
      left: 0;
      right: 0;
      z-index: 1;
    }
    .e-clickelem::before {
      bottom: 70%;
      top: 0;
    }
    .e-clickelem::after {
      bottom: 0;
      top: 70%;
    }
    .e-video-clickelem::before {
      bottom: 85%;
      top: 0;
    }
    .e-video-clickelem::after {
      bottom: 0;
      top: 90%;
    }

    .e-audio-wrap,
    .e-embed-video-wrap {
      display: inline-block;
    }

    .e-clickelem,
    .e-video-clickelem {
      display: block;
      margin: $rte-video-elem-margin;
      outline: none;
      padding: $rte-video-elem-padding;
      position: relative;
    }

    .e-clickelem::after,
    .e-video-clickelem::after {
      background: transparent;
      content: '';
      cursor: default;
      display: block;
      position: absolute;
    }

    .e-clickelem::before,
    .e-video-clickelem::before {
      background: transparent;
      content: '';
      cursor: default;
      display: block;
      position: absolute;
    }

    .e-videoheader,
    .e-embed-videoheader,
    .e-video-url-wrap {
      padding-bottom: $rte-video-url-wrapper-padding-bottom;
      padding-top: $rte-video-url-wrapper-padding-top;
    }

    .e-video-url-wrap .e-radio-wrapper {
      padding: $rte-video-wrapper-padding;
    }

    .e-video-url-wrap textarea {
      min-height: 80px; //3. video url height to min-height
    }

    .e-rte-value-wrapper {
      display: none;
    }

    .e-rte-upload {
      visibility: hidden;
      display: none;
    }

    .e-rte-dropdown-btn-text-wrapper {
      display: inline-flex;
    }

    .e-rte-radio-keep-format {
      padding-top: $rte-radio-keep-format-padding-top;
    }

    .e-rte-radio-remove-format,
    .e-rte-radio-plain-format {
      padding-top: $rte-radio-remove-plain-padding-top;
    }
  }

  .e-richtexteditor .e-rte-toolbar .e-toolbar-item {
    .e-colorpicker-wrapper,
    .e-colorpicker-container {

      &.e-rte-font-colorpicker .e-split-colorpicker.e-icons::before,
      &.e-rte-background-colorpicker .e-split-colorpicker.e-icons::before {
        display: block;
        font-family: 'e-icons';
        font-weight: $rte-color-picker-font-weight;
        line-height: $rte-color-picker-line-height;
        text-transform: none;
      }

      .e-split-btn-wrapper {
        .e-split-colorpicker {
          .e-selected-color {
            background: none;
            display: block;
            margin-top: $rte-color-picker-margin-top;
            width: $rte-color-picker-width;
            height: $rte-color-picker-height;
            .e-split-preview {
              height: 3px;
              bottom: 0;
              top: unset;
            }
          }
        }
      }
    }
  }

  .e-rte-toolbar.e-rte-quick-toolbar .e-toolbar-item {
    .e-colorpicker-wrapper,
    .e-colorpicker-container {

      &.e-rte-font-colorpicker .e-split-colorpicker.e-icons::before,
      &.e-rte-background-colorpicker .e-split-colorpicker.e-icons::before {
        display: block;
        font-family: 'e-icons';
        font-weight: $rte-color-picker-font-weight;
        line-height: $rte-color-picker-line-height;
        text-transform: none;
      }

      .e-split-btn-wrapper {
        .e-split-colorpicker {
          .e-selected-color {
            background: none;
            display: block;
            margin-top: $rte-color-picker-margin-top;
            width: $rte-color-picker-width;
            height: $rte-color-picker-height;

            .e-split-preview {
              height: 3px;
              bottom: 0;
              top: unset;
            }
          }
        }
      }
    }
  }

  .e-colorpicker-popup.e-rte-dropdown .e-container.e-color-palette .e-clr-pal-rec-wpr .e-recent-clr-span {
    font-family: $rte-font-family;
  }

  .e-richtexteditor .e-rte-toolbar .e-toolbar-item {
    .e-split-btn-wrapper,
    .e-rte-dropdown-menu {
      min-height: $rte-split-btn-height;
    }
  }

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

  .e-rte-label label {
    font-weight: $rte-lable-font-weight;
  }

  .e-dlg-content {

    .e-rte-label label,
    .e-audio-content .e-audioheader,
    .e-img-content .e-linkheader {
      @if $skin-name =='tailwind3' {
        font-weight: $font-weight-medium;
        color: $rte-content-font-color;
      }
    }
  }

  .e-rte-linkcontent .e-rte-label:first-child {
    padding-top: $rte-link-label-first-child-padding-top;
  }

  .e-rte-dropdown-popup {

    &.e-rte-inline-dropdown {

      @media screen and (max-width: 768px) {
        ul {
          padding: $rte-inline-dropdown-ul-padding;

          li.e-item {
            height: $rte-media-inline-dropdown-height;
            line-height: $rte-inline-dropdown-line-height;
            padding: $rte-inline-dropdown-li-padding;
          }

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

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

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

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

    ul {
      min-width: 82px;

      .e-item {

        .e-menu-icon {
          margin: $rte-ul-menu-icon-margin;
          width: $rte-ul-menu-icon-width;
        }

        &.e-h1 {
          font-size: $rte-content-ul-h1-font-size;
          font-weight: $rte-content-ul-h1-font-weight;
          height: $rte-content-ul-h1-height;
          @if $skin-name =='fluent2' {
            line-height: $rte-content-ul-h1-small-line-height;
          }
          @else {
            line-height: $rte-content-ul-h1-line-height;
          }
        }

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

        &.e-h2 {
          font-size: $rte-content-ul-h2-font-size;
          font-weight: $rte-content-ul-h2-font-weight;
          height: $rte-content-ul-h2-height;
          @if $skin-name =='fluent2' {
            line-height: $rte-content-ul-h2-small-line-height;
          }
          @else {
            line-height: $rte-content-ul-h2-line-height;
          }
        }

        &.e-h3 {
          font-size: $rte-content-ul-h3-font-size;
          font-weight: $rte-content-ul-h3-font-weight;
        }

        &.e-h4 {
          font-size: $rte-content-ul-h4-font-size;
          font-weight: $rte-content-ul-h4-font-weight;
        }

        &.e-h5 {
          font-size: $rte-content-ul-h5-font-size;
          font-weight: $rte-content-ul-h5-font-weight;
        }

        &.e-h6 {
          font-size: $rte-content-ul-h6-font-size;
          font-weight: $rte-content-ul-h6-font-weight;
        }

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

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

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

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

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

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

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

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

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

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

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

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

    &.e-rte-dropdown-icons {

      ul {
        min-width: $rte-dropdown-icons-ul-min-width;
      }

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

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

    &.e-rtl {
      ul .e-item .e-menu-icon {
        margin: $rte-rtl-ul-menu-icon-margin;
      }
    }
  }

  .e-rte-image.e-imgbreak,
  .e-rte-audio.e-audio-break,
  .e-rte-video.e-video-break {
    border: $rte-media-break-elem-border;
    cursor: pointer;
    display: block;
    float: none;
    max-width: $rte-media-break-elem-max-width;
    padding: $rte-media-break-elem-padding;
    position: relative;
  }

  .e-rte-image,
  .e-rte-audio,
  .e-rte-video  {
    border: $rte-media-elem-border;
    cursor: pointer;
    display: block;
    float: none;
    margin: $rte-media-elem-margin;
    max-width: $rte-media-elem-max-width;
    position: relative;
  }

  .e-rte-image.e-imginline,
  .e-rte-image.e-img-inline,
  .e-img-caption-container.e-img-inline,
  .e-rte-audio.e-audio-inline,
  .e-rte-video.e-video-inline {
    margin-left: $rte-media-inline-elem-margin-left;
    margin-right: $rte-media-inline-elem-margin-right;
    display: inline-block;
    float: none;
    max-width: $rte-media-inline-elem-max-width;
    padding: $rte-media-inline-elem-padding;
    vertical-align: bottom;
  }

  .e-rte-image.e-imgcenter,
  .e-rte-image.e-img-center,
  .e-rte-image.e-img-break,
  .e-img-caption-container.e-img-center,
  .e-img-caption-container.e-img-break,
  .e-rte-video.e-video-center {
    cursor: pointer;
    display: block;
    float: none;
    margin: $rte-img-video-center-margin;
    max-width: $rte-img-video-center-max-width;
    position: relative;
  }

  .e-rte-image.e-imgleft,
  .e-rte-video.e-video-left {
    float: left;
    margin: $rte-img-video-left-margin;
    margin-right: $rte-img-video-left-margin-right;
    text-align: left;
  }

  .e-rte-image.e-imgright,
  .e-rte-video.e-video-right {
    float: right;
    margin: $rte-img-video-right-margin;
    margin-left: $rte-img-video-right-margin-left;
    text-align: right;
  }

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

  .e-rte-img-caption {
    display: inline-block;
    margin: $rte-img-caption-margin;
    max-width: $rte-img-caption-max-width;
    position: relative;
  }

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

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

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

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

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

  .e-rte-img-caption .e-rte-image.e-imgleft {
    margin: 0;
  }

  .e-img-caption.e-rte-img-caption.e-imgbreak {
    display: contents;
  }

  .e-rte-table td,
  .e-rte-table th {
    border: $rte-table-border;
    height: 20px;
    min-width: 20px;
    padding: $rte-table-padding;
    box-sizing: border-box;
  }

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

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

  .e-rte-img-caption.e-imgleft .e-img-inner {
    float: left;
    text-align: left;
  }

  .e-rte-img-caption.e-imgright .e-img-inner {
    float: right;
    text-align: right;
  }

  .e-rte-img-caption.e-imgleft .e-img-wrap,
  .e-rte-img-caption.e-imgright .e-img-wrap {
    display: contents;
  }

  .e-container.e-color-palette .e-custom-palette .e-palette {
    padding: $rte-container-custom-palette-padding;
  }

  .e-rte-img-caption .e-img-wrap {
    display: inline-block;
    margin: $rte-img-wrap-margin;
    padding: $rte-img-wrap-padding;
    width: $rte-img-wrap-width;
  }

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

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

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

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

  .e-rte-table-resize.e-tb-col-insert,
  .e-rte-table-resize.e-tb-row-insert {
    position: absolute;
    background-color: transparent;
    text-align: center;
    align-items: center;
    justify-content: center;
    opacity: 0;
    color: $rte-insert-icon-color;
  }

  .e-rte-table-resize .e-circle::before,
  .e-rte-table-resize .e-circle-add::before {
    background-color: $rte-content-bg;
    border-radius: 50%;
  }

  .e-rte-table-resize.e-tb-col-insert {
    width: 26px;
    height: 22px;
  }

  .e-rte-table-resize.e-tb-row-insert {
    width: 22px;
    height: 26px;
  }

  .e-rte-table-resize.e-tb-row-insert.e-insert-cell-rtl {
    right: 2px;
  }

  .e-rte-table-resize.e-tb-col-insert .e-icons.e-circle-add,
  .e-rte-table-resize.e-tb-row-insert .e-icons.e-circle-add {
    font-size: 16px;
    line-height: 16px;
    border: 1px;
    position: absolute;
    z-index: 2;
  }

  .e-rte-table-resize.e-tb-col-insert .e-icons.e-circle-add {
    top: 0;
    left: 5px;
  }

  .e-rte-table-resize.e-tb-row-insert .e-icons.e-circle-add {
    top: 5px;
    left: 0;
  }

  .e-rte-table-resize.e-tb-row-insert .e-icons.e-circle-add.e-insert-cell-rtl {
    left: 6.5px;
  }

  .e-rte-table-resize.e-tb-col-insert .e-icons.e-circle,
  .e-rte-table-resize.e-tb-row-insert .e-icons.e-circle {
    font-size: 8px;
    line-height: 8px;
    border: 1px;
    position: absolute;
    z-index: 2;
  }

  .e-rte-table-resize.e-tb-row-insert .e-icons.e-circle {
    top: 9px;
    left: 4px;
  }

  .e-rte-table-resize.e-tb-col-insert .e-icons.e-circle {
    top: 4px;
    left: 9px;
  }

  .e-rte-table-resize.e-tb-row-insert .e-icons.e-circle.e-insert-cell-rtl {
    left: 10px;
  }

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

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

  .e-rte-image,
  .e-img-caption-container {
    &.e-img-left-wrap {
      float: left;
      margin: 5px 5px 5px 0;
    }
    &.e-img-right-wrap {
      float: right;
      margin: 5px 0 5px 5px;
    }
    &.e-img-left,
    &.e-img-right {
      margin-top: 5px;
      margin-bottom: 5px;
    }
    &.e-img-right {
      margin-right: 0;
      margin-left: auto;
    }
    &.e-img-left {
      margin-left: 0;
      margin-right: auto;
    }
  }
  .e-img-caption-container {
    &.e-img-left-wrap,
    &.e-img-right-wrap {
      display: inline-block;
    }
    &.e-img-left,
    &.e-img-right {
      display: block;
    }
    max-width: 100%;
    position: relative;
    .e-img-caption-text {
      box-sizing: border-box;
      display: block;
      font-size: $rte-toolbar-icon-size;
      font-weight: $rte-content-img-caption-font-weight;
      margin: auto;
      opacity: .9;
      position: relative;
      text-align: center;
      width: 100%;
    }
    &.e-img-left-wrap,
    &.e-img-right-wrap,
    &.e-img-left,
    &.e-img-right,
    &.e-img-center,
    &.e-img-break {
      .e-img-wrap img {
        margin-bottom: 0;
      }
    }
    &.e-img-center,
    &.e-img-break {
      margin-left: auto;
      margin-right: auto;
    }
  }

  .e-richtexteditor,
  .e-rte-elements {
    .e-linkheader,
    .e-audioheader,
    .e-videoheader,
    .e-video-url-wrap {
      font-family: $rte-font-family;
      font-size: $rte-insert-dialog-font-size;
      opacity: .87;
      padding-bottom: $rte-insert-dialog-label-padding-bottom;
      padding-top: $rte-insert-dialog-label-padding-top;
    }

    .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-delete-btn.e-icons,
    .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
    .e-aud-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-delete-btn.e-icons,
    .e-aud-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
    .e-vid-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-delete-btn.e-icons,
    .e-vid-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
    .e-word-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-delete-btn.e-icons,
    .e-word-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons  {
      margin-top: $rte-uploadwrap-file-btn-icons-margin-top;
    }

    .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list,
    .e-aud-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list,
    .e-vid-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list,
    .e-word-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list  {
      border-bottom: $rte-uploadwrap-file-list-border-bottom;
      min-height: $rte-uploadwrap-file-list-min-height;
    }

    .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list .e-file-container,
    .e-aud-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list .e-file-container,
    .e-vid-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list .e-file-container,
    .e-word-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list .e-file-container {
      margin-left: $rte-uploadwrap-file-container-margin-left;
    }

    .e-img-uploadwrap.e-droparea .e-upload .e-upload-files,
    .e-aud-uploadwrap.e-droparea .e-upload .e-upload-files,
    .e-vid-uploadwrap.e-droparea .e-upload .e-upload-files,
    .e-word-uploadwrap.e-droparea .e-upload .e-upload-files {
      border-top: $rte-droparea-files-border-top;
    }

    .e-img-uploadwrap.e-droparea .e-file-select-wrap,
    .e-aud-uploadwrap.e-droparea .e-file-select-wrap,
    .e-vid-uploadwrap.e-droparea .e-file-select-wrap,
    .e-word-uploadwrap.e-droparea .e-file-select-wrap {
      display: none;
    }

    .e-img-uploadwrap.e-droparea .e-upload,
    .e-aud-uploadwrap.e-droparea .e-upload,
    .e-vid-uploadwrap.e-droparea .e-upload,
    .e-word-uploadwrap.e-droparea .e-upload {
      border: $rte-media-droparea-upload-border;
      float: none;
    }

    .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
      margin-top: $rte-img-upload-abort-icon-btn-margin-top;
    }

    .e-dialog .e-img-uploadwrap.e-droparea .e-browsebtn,
    .e-dialog .e-aud-uploadwrap.e-droparea .e-browsebtn,
    .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,
    .e-dialog .e-word-uploadwrap.e-droparea .e-browsebtn {
      display: block;
      height: $rte-droparea-browsebtn-height;
      margin: $rte-droparea-browsebtn-margin;
      padding: $rte-droparea-browsebtn-padding;
      position: relative;
      top: 6px;
      @if $skin-name == 'FluentUI' {
        outline: none;
      }
    }

    .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap.e-droparea .e-browsebtn,
    .e-dialog.e-device.e-dlg-modal .e-aud-uploadwrap.e-droparea .e-browsebtn,
    .e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap.e-droparea .e-browsebtn,
    .e-dialog.e-device.e-dlg-modal .e-word-uploadwrap.e-droparea .e-browsebtn {
      display: none;
    }

    .e-dialog .e-img-uploadwrap.e-droparea,
    .e-dialog .e-aud-uploadwrap.e-droparea,
    .e-dialog .e-vid-uploadwrap.e-droparea,
    .e-dialog .e-word-uploadwrap.e-droparea {
      // line-height: 10;////No UI affected so removed
      min-height: 50px;
      position: relative;
    }

    .e-dialog .e-img-uploadwrap.e-droparea .e-rte-upload-text,
    .e-dialog .e-aud-uploadwrap.e-droparea .e-rte-upload-text,
    .e-dialog .e-vid-uploadwrap.e-droparea .e-rte-upload-text,
    .e-dialog .e-word-uploadwrap.e-droparea .e-rte-upload-text {
      display: inline-block;
      line-height: $rte-dialog-word-upload-text-line-height;
    }

    // .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap.e-droparea,
    // .e-dialog.e-device.e-dlg-modal .e-aud-uploadwrap.e-droparea,
    // .e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap.e-droparea,
    // .e-dialog.e-device.e-dlg-modal .e-word-uploadwrap.e-droparea {
    //   line-height: 4;////No UI affected so removed
    // }

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

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

    .e-rte-table-popup.e-popup.e-popup-open {
      border-radius: $rte-table-popup-border-radius;
      box-shadow: $rte-table-popup-box;
      font-size: $rte-popup-open-font-size;
      font-weight: $rte-popup-open-font-weight;
      min-width: 120px;
      overflow: hidden;
      padding: $rte-table-popup-padding;
      border: $rte-table-popup-border;
    }

    .e-rte-table-popup.e-popup-open .e-rte-tablecell {
      border: $rte-table-span-border;
      display: inline-block;
      height: $rte-table-popup-tablecell-height;
      margin: $rte-table-popup-tablecell-margin;
      overflow: hidden;
      vertical-align: top;
      width: $rte-table-popup-tablecell-width;
    }

    .e-rte-table-popup.e-popup-open .e-rte-table-row {
      height: $rte-table-popup-row-height;
    }

    .e-rte-table-popup.e-popup-open .e-insert-table-btn {
      width: $rte-insert-table-btn-width;
    }

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

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

    .e-table-fake-selection {
      visibility: hidden;
      content: '\u200B';
      position: fixed;
      top: 0;
      left: -9999px;
    }

    .e-rte-content .e-content table td.e-cell-select,
    .e-rte-content .e-content table th.e-cell-select {
      border: $rte-content-table-select-border;
      height: $rte-content-table-select-height;
    }

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

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

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

    .e-upload .e-upload-files .e-upload-file-list .e-file-container {
      margin-right: $rte-upload-file-container-margin-right;
    }

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

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

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

    .e-rte-edit-table-content {
      .e-rte-edit-table-cell {
        display: flex;
        gap: $rte-edit-table-cell-gap;
      }
      .e-rte-edit-table-tablewidth,
      .e-rte-edit-table-bgcolor {
        width: $rte-table-bgcolor-width;
      }
      .e-rte-edit-table-border {
        .e-rte-edit-table-borderfields {
          display: flex;
          justify-content: space-between;
          .e-rte-edit-table-borderwidth {
            width: 37%;
          }
          .e-rte-dropdown-btn-text-wrapper {
            width: 47px;
          }
        }
      }
      .e-rte-edit-table-element {
        margin-top: $rte-table-element-margin-top;
      }
      .e-rte-edit-table-field {
        margin-top: $rte-table-field-margin-top;
      }
      .e-rte-dropdown-btn-text {
        font-weight: $rte-dropdown-btn-font-weight;
      }
      .e-rte-edit-table-borderlabel {
        font-weight: $rte-edit-table-border-label-font-weight;
        font-style: semi-bold;
      }
      .e-caret {
        opacity: .75;
      }
    }

    .e-rte-edit-tablecell-dialog {
      .e-rte-edit-tablecell-row {
        display: flex;
        gap: $rte-edit-table-cell-gap;

        &:first-child {
          .e-rte-edit-table-tablewidth,
          .e-rte-edit-table-tableheight {
            width: 50%;
          }
        }

        &:not(:first-child) {
          .e-rte-edit-table-cellpadding,
          .e-rte-edit-table-bgcolor {
            width: 50%;
          }
        }
      }

      .e-rte-edit-table-field-flex {
        display: flex;
        justify-content: space-between;

        @if $theme-name == 'bootstrap' or $theme-name == 'bootstrap-dark' {
          .e-control-wrapper.e-numeric {
            width: 115px !important; /* stylelint-disable-line declaration-no-important */
          }
        }
      }

      .e-rte-edit-table-widthValue,
      .e-rte-edit-table-heightValue {
        button {
          padding: 2px 8px;

          @if $theme-name == 'highcontrast' or $theme-name == 'highcontrast-light' {
            margin-top: 0;
          }
          @else {
            margin-top: 2px;
          }

          .e-rte-dropdown-btn-content-text {
            display: inline-block;
            width: 18px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }

      .e-rte-edit-tablecell-align-container {
        display: flex;
        gap: 24px;

        .e-rte-edit-tablecell-horizontal-align,
        .e-rte-edit-tablecell-vertical-align {
          margin-top: 8px;
          width: 50%;
        }

        .e-rte-edit-tablecell-btn-group {
          margin-top: 4px;
        }

        .e-rte-tablecell-align-btn {
          width: auto;
          height: auto;
          padding: 12px;
          font-size: 14px;
        }
      }

      .e-rte-edit-table-border {
        .e-rte-edit-table-borderfields {
          display: flex;
          justify-content: space-between;

          .e-rte-edit-table-borderwidth {
            width: 37%;
          }

          .e-rte-dropdown-btn-text-wrapper {
            width: 47px;
          }
        }
      }

      .e-rte-edit-table-element {
        margin-top: $rte-table-element-margin-top;
      }

      .e-rte-edit-table-field {
        margin-top: $rte-table-field-margin-top;
      }

      .e-rte-dropdown-btn-text {
        font-weight: $rte-dropdown-btn-font-weight;
      }

      .e-rte-edit-table-borderlabel {
        font-weight: $rte-edit-table-border-label-font-weight;
        font-style: semi-bold;
      }

      .e-caret {
        opacity: .75;
      }
    }

    .e-rte-emojipicker-popup.e-popup.e-popup-open {
      border: $rte-emoji-pop-border;
      // min-width: 120px; //Not affecting the UI after removal
      min-height: $rte-emoji-popup-open-min-height;
      min-width: $rte-emoji-popup-open-width;
      display: flex;
      flex-direction: column;

      .e-toolbar .e-toolbar-item .e-tbar-btn {
        padding: $rte-emoji-picker-tbar-btn-padding;
        border-radius: $rte-emoji-pop-border-radius;

        @if $skin-name =='bootstrap' or $skin-name =='botstrap-dark' {
          &:hover,
          &:focus{
            padding: $rte-emoji-picker-tbar-btn-hover-padding;
          }
        }

        @if $skin-name =='material' or $skin-name =='material-dark' {
          padding: $rte-emoji-picker-tbar-btn-material-padding;
        }

        .e-tbar-btn-text {
          @if $skin-name =='fluent2' {
            font-size: $rte-emoji-pop-tbar-btn-small-font-size;
          }
          @else {
            font-size: $rte-emoji-pop-tbar-btn-large-font-size;
          }
          padding: $rte-emoji-picker-tbar-btn-text-padding;
        }
      }

      .e-input-group.e-control-wrapper {
        margin: $rte-emojipicker-input-control-wrapper-margin;
        width: 94%;
        box-sizing: border-box;
        align-self: center;

        .e-rte-emoji-search {
          @if $skin-name =='material' or $skin-name =='material-dark' or $skin-name =='material3' or $skin-name =='material3-dark' {
            text-indent: 4px;
          }
        }
      }

      .e-rte-emojipicker-btn {
        display: block;
        gap: $rte-emoji-btn-gap;
        height: $rte-emoji-btn-height;
        overflow: auto;
        padding: $rte-emoji-btn-padding;

        .e-rte-emojipicker-group .e-rte-emojipickerbtn-group {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
          gap: $rte-emoji-btn-group-gap;

          .e-btn.e-control {
            display: inline-block;
            box-shadow: none;
            padding: $rte-emoji-grp-btn-padding;
            // width: $rte-emoji-grp-btn-width; //2. emoji picker dynamic issue
            // height: $rte-emoji-grp-btn-height; //2. emoji picker dynamic issue
            border: $rte-emoji-grp-btn-border;
            // line-height: 1px;//No UI affected so removed
            @if $skin-name =='fluent2' {
              font-size: $rte-emoji-grp-btn-small-font-size;
            }
            @else {
              font-size: $rte-emoji-grp-btn-large-font-size;
            }
          }
        }

        .e-rte-emojisearch-btn {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
          gap: $rte-emoji-search-btn-gap;
          height: $rte-emoji-search-btn-height;

          .e-btn.e-control {
            display: inline-block;
            box-shadow: none;
            font-size: $rte-emoji-grp-btn-font-size;
            padding: $rte-emoji-grp-btn-control-padding;
            // width: 40px; //2. emoji picker dynamic issue
            // height: 40px; //2. emoji picker dynamic issue
            border: $rte-emoji-grp-btn-border;
            // line-height: 1px;//No UI affected so removed
          }
        }

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

        .e-rte-emojiSearch-noEmoji {
          text-align: center;
        }
      }
    }
  }

  .e-rte-backgroundcolor-colorpicker,
  .e-rte-fontcolor-colorpicker {
    & .e-color-palette.e-container {
      & .e-custom-palette .e-palette {
        padding: $rte-colorpicker-custom-palette-padding;
      }

      & .e-switch-ctrl-btn {
        padding: $rte-colorpicker-custom-palette-switch-btn-padding;
      }
    }
  }

  .e-rte-quick-popup.e-rte-elements {
    border-radius: $rte-quick-popup-border-radius;
    border: $rte-quick-popup-border;
    .e-rte-quick-toolbar.e-rte-toolbar.e-toolbar {
      min-height: $rte-quick-toolbar-min-height;
      min-width: $rte-quick-toolbar-min-width;
      .e-toolbar-items:not(.e-tbar-pos) {
        min-height: $rte-quick-toolbar-items-not-tbar-pos-min-height;
        min-width: $rte-quick-toolbar-items-not-tbar-pos-min-width;
        margin: $rte-quick-popup-outer-margin;
        .e-toolbar-item {
          margin: $rte-popup-toolbar-item-margin;
          min-height: $rte-popup-toolbar-item-min-height;
          min-width: $rte-popup-toolbar-item-min-width;
          padding: $rte-quick-popup-inner-padding;
        }
      }
    }
  }

  .e-rte-quick-popup {

    .e-rte-quick-toolbar {

      .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
        white-space: normal;
        display: inline-block;
      }

      &.e-remove-white-space {

        .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
          white-space: nowrap;
        }
      }

      .e-toolbar-items:not(.e-tbar-pos) {

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

        .e-toolbar-item {
          margin: $rte-toolbar-item-frist-last-child-margin;

          &:first-child,
          &:last-child {
            margin: $rte-quick-horizontal-separator-first-margin;
          }
        }
      }
      &.e-rte-toolbar.e-toolbar {
        box-sizing: border-box;
      }
    }

    &.e-hide {
      display: block;
      visibility: hidden;
    }
  }

  .e-rte-quick-popup.e-rte-inline-popup {
    .e-rte-quick-toolbar {
      .e-toolbar-item {
        &.e-rte-inline-template {
          min-width: $rte-inline-tmp-min-width;
        }

        &.e-rte-inline-size-template {
          min-width: $rte-inline-tmp-size-min-width;
        }

        &.e-rte-inline-color-template {
          min-width: $rte-inline-tmp-color-min-width;
        }
      }
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .e-dialog.e-rte-dialog-minheight {
    min-height: $rte-dialog-min-height; //for now using 298px for ensuring But acutal value 296px
    @if $skin-name == 'FluentUI' or $skin-name =='fluent2' {
      min-height: $rte-dialog-fluent-min-height;
    }
  }

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

  .e-rte-table.e-rte-table-border {
    border: $rte-table-border-table-border;
    border-collapse: separate;
  }

  .e-rte-img-dialog.e-dialog.e-device.e-dlg-modal,
  .e-rte-audio-dialog.e-dialog.e-device.e-dlg-modal,
  .e-rte-video-dialog.e-dialog.e-device.e-dlg-modal,
  .e-rte-import-dialog.e-dialog.e-device.e-dlg-modal {
    .e-img-uploadwrap.e-droparea,
    .e-aud-uploadwrap.e-droparea,
    .e-vid-uploadwrap.e-droparea,
    .e-word-uploadwrap.e-droparea {
      // line-height: 10;//No UI affected so removed
      min-height: 50px;
      position: relative;

      .e-browsebtn {
        display: block;
        height: $rte-dlg-modal-browse-btn-mobile-height;
        margin: $rte-dlg-modal-browse-btn-margin;
        padding: $rte-dlg-modal-browse-btn-padding;
        position: relative;
        top: 6px;
        @if $skin-name == 'FluentUI' {
          outline: none;
        }
      }

      .e-upload {
        border: $rte-import-word-upload-border;
        float: none;
      }

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

  .e-rte-import-dialog .e-dlg-content {
    overflow-y: hidden;
  }

  .e-rte-file-manager-dialog {

    .e-rte-label {
      padding-bottom: $rte-filemanager-label-padding-bottom;
      padding-top: $rte-filemanager-label-padding-top;

      label {
        font-size: $rte-filemanager-label-font-size;
        opacity: .87;
      }
    }
  }

  .e-dialog .e-img-uploadwrap .e-droptext,
  .e-dialog .e-aud-uploadwrap .e-droptext,
  .e-dialog .e-vid-uploadwrap .e-droptext,
  .e-dialog .e-word-uploadwrap .e-droptext,
  .e-dialog.e-device .e-vid-uploadwrap .e-droptext  {
    border: $rte-drop-text-border;
    border-radius: $rte-upload-drag-border-radius;
    color: $rte-drop-text-clr;
    font-family: $rte-font-family;
    font-size: $rte-drop-text-font-size;
    height: $rte-drop-text-height;
    margin: $rte-drop-text-margin;
    text-align: center;
    width: $rte-drop-text-width;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap .e-droptext,
  .e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap .e-droptext,
  .e-dialog.e-device.e-dlg-modal .e-aud-uploadwrap .e-droptext,
  .e-dialog.e-device.e-dlg-modal .e-word-uploadwrap .e-droptext {
    margin: $rte-drop-text-mobile-margin;
    width: $rte-drop-text-mobile-width;
  }
  .e-dialog.e-device .e-video-url-wrap .e-radio-wrapper {
    padding: $rte-video-url-wrap-padding;
  }

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

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

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

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

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

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

  .e-richtexteditor .e-rte-table-popup.e-popup-open.e-dialog .e-rte-tablecell,
  .e-rte-elements.e-rte-table-popup.e-popup-open.e-dialog .e-rte-tablecell {
    @if $skin-name == 'fluent2' {
      margin: $rte-table-tablecell-small-margin;
    }
    @else {
      margin: $rte-table-tablecell-large-margin;
    }
  }

  .e-rte-elements{
    .e-rte-table-popup.e-popup-open{
      .e-rte-table-row {
        height: $rte-table-popup-row-height;
      }

      .e-insert-table-btn {
        @if $skin-name == 'FluentUI' {
          margin-top: $rte-table-popup-btn-margin-top;
        }
        width: $rte-insert-table-btn-width;
      }
      .e-rte-tablecell {
        border: $rte-table-span-border;
        display: inline-block;
        height: $rte-table-popup-tablecell-height;
        margin: $rte-table-open-tablecell-margin;
        overflow: hidden;
        vertical-align: top;
        width: $rte-table-popup-tablecell-width;
      }
    }
    .e-rte-table-popup.e-popup.e-popup-open {
      border-radius: $rte-table-popup-border-radius;
      box-shadow: $rte-table-popup-box;
      font-size: $rte-popup-open-font-size;
      font-weight: $rte-popup-open-font-weight;
      min-width: 120px;
      overflow: hidden;
      padding: $rte-table-popup-padding;
    }
    &.e-dropdown-popup.e-popup.e-font-size-tbar-btn.e-popup-open {
      min-width: 95px;
    }
    &.e-dropdown-popup.e-rte-codeblock-dropdown.e-popup-open ul {
      max-height: $rte-codeblock-dropdown-popup-max-height;
      overflow: auto;
    }
  }

  .e-rte-elements.e-dialog {
    .e-img-uploadwrap.e-droparea .e-rte-upload-text,
    .e-aud-uploadwrap.e-droparea .e-rte-upload-text,
    .e-vid-uploadwrap.e-droparea .e-rte-upload-text,
    .e-word-uploadwrap.e-droparea .e-rte-upload-text {
      display: inline-block;
      line-height: $rte-uploadwrap-droparea-upload-text-line-height;
    }
    .e-img-uploadwrap.e-droparea,
    .e-aud-uploadwrap.e-droparea,
    .e-vid-uploadwrap.e-droparea,
    .e-word-uploadwrap.e-droparea {
      // line-height: 10;//No UI affected so removed
      min-height: 50px;
      position: relative;
    }
    .e-img-uploadwrap.e-droparea .e-browsebtn,
    .e-aud-uploadwrap.e-droparea .e-browsebtn,
    .e-vid-uploadwrap.e-droparea .e-browsebtn,
    .e-word-uploadwrap.e-droparea .e-browsebtn {
      display: block;
      height: $rte-droparea-browsebtn-height;
      margin: $rte-media-droparea-browsebtn-margin;
      padding: $rte-droparea-browsebtn-padding;
      position: relative;
      @if $skin-name == 'FluentUI' {
        outline: none;
      }
    }
  }
  // Blazor styles end

  .e-richtexteditor {
    .e-rte-container.e-rte-tb-bottom{
      & .e-toolbar-wrapper.e-rte-tb-float,
      .e-toolbar-container.e-rte-tb-float {
        bottom: 0;
      }
    }
  }

  .e-richtexteditor {
    .e-toolbar-wrapper.e-rte-tb-float,
    .e-toolbar-container.e-rte-tb-float {
      position: sticky;
      top: 0;
      overflow: visible;
    }
    .e-toolbar-wrapper,
    .e-toolbar-container {
      height: $rte-toolbar-wrapper-container-height;
      z-index: 10;
      white-space: nowrap;
    }
    .e-toolbar .e-toolbar-pop.e-toolbar-extended {
      position: relative;
      width: $rte-pop-toolbar-extended-width;
      top: 0 !important; /* stylelint-disable-line declaration-no-important */
      left: 0 !important; /* stylelint-disable-line declaration-no-important */
    }
    .e-toolbar .e-toolbar-pop.e-toolbar-extended.e-popup-open {
      display: block;
    }
  }
  // Used to hide the Color picker during the rendering at the initial stage. Removed the class in the created event.
  .e-rte-picker-init {
    display: none !important; /* stylelint-disable-line declaration-no-important */
  }

  @if $skin-name == 'tailwind' {
    .e-rte-table-popup.e-popup.e-popup-open {
      box-shadow: $rte-table-popup-box;
    }
    .e-richtexteditor .e-toolbar .e-hor-nav{
      min-height: 39px;
    }
  }

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

  @if $skin-name == 'Material3' {
    .e-richtexteditor .e-rte-table-popup .e-insert-table-btn {
      font-weight: $font-weight;
      border: $rte-insert-table-btn-border;
      border-radius: $rte-insert-table-btn-border-radius;
    }
    .e-dialog .e-dlg-header-content + .e-dlg-content{
      padding-top: $rte-dlg-header-content-padding-top;
    }
    .e-rte-link-dialog .e-dlg-content{
      padding: $rte-link-dlg-content-padding;
    }
  }

  @if $skin-name == 'fluent2' {
    .e-richtexteditor {
      .e-toolbar .e-hor-nav{
        min-height: 40px;
      }
      .e-dialog {
        .e-radio + label {
          margin: $rte-dialog-radio-small-margin;
        }
      }
    }
    .e-rte-container{
      border-radius: $rte-container-border-radius;
    }
    .e-richtexteditor{
      border-radius: $rte-border-radius;
      .e-toolbar .e-hor-nav {
        border-radius: $rte-toolbar-border-radius;
      }
      .e-rte-content {
        border-radius: $rte-toolbar-container-border-radius;
      }
    }
    .e-richtexteditor .e-toolbar-wrapper{
      border-radius: $rte-toolbar-wrapper-border-radius;
      border-top-left-radius: $rte-top-left-border-radius;
      border-top-right-radius: $rte-top-right-border-radius;
    }

    .e-richtexteditor.e-rte-tb-expand {
      border-radius: $rte-big-tb-expand-border-radius;
    }
    .e-richtexteditor.e-rte-tb-expand .e-rte-toolbar.e-extended-toolbar,
    .e-richtexteditor.e-rte-tb-expand .e-rte-toolbar .e-toolbar-extended {
      border-top-left-radius: $rte-top-left-border-radius;
      border-top-right-radius: $rte-top-right-border-radius;
    }
    .e-rte-toolbar .e-toolbar-items {
      border-top-left-radius: $rte-toolbar-items-top-left-border-radius;
    }
    .e-rte-toolbar .e-hor-nav {
      border-top-right-radius: $rte-top-right-border-radius;
    }
    .e-rtl .e-rte-toolbar .e-hor-nav {
      border-top-left-radius: $rte-top-left-border-radius;
      border-top-right-radius: $rte-top-right-border-radius;
    }
    .e-rtl .e-rte-toolbar .e-toolbar-items {
      border-top-right-radius: $rte-toolbar-items-top-left-border-radius;
    }
  }

  /* Slash Menu Styles */
  .e-rte-elements.e-slash-menu {
    .e-rte-quotes::before {
      content: open-quote;
      font-size: $rte-slash-menu-content-font-size;
      line-height: $rte-slash-menu-content-line-height;
    }

    .e-rte-paragraph::before {
      content: 'T';
      font-size: $rte-slash-menu-para-before-font-size;
    }

    .e-rte-h1::before {
      content: 'H1';
      font-size: $rte-slash-menu-h1-before-font-size;
    }

    .e-rte-h2::before {
      content: 'H2';
      font-size: $rte-slash-menu-h2-before-font-size;
    }

    .e-rte-h3::before {
      content: 'H3';
      font-size: $rte-slash-menu-h3-before-font-size;
    }

    .e-rte-h4::before {
      content: 'H4';
      font-size: $rte-slash-menu-h4-before-font-size;
    }

    .e-rte-slash-menu-item-text {
      font-size: $rte-slash-menu-item-text-font-size;
      display: block;
      line-height: $rte-slash-menu-item-text-line-height;
      padding: $rte-slash-menu-item-text-padding;
    }

    .e-rte-slash-menu-item-description {
      display: block;
      line-height: $rte-slash-menu-item-description-line-height;
      font-size: $rte-slash-menu-item-description-font-size;
      padding: $rte-slash-menu-item-description-padding;
    }

    .e-slash-menu-icon {
      // line-height: 0;//No UI affected so removed
      display: inline-block;
      width: 50px;
      font-family: 'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', sans-serif;
    }

    .e-rte-slash-menu-item-content-description {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: $rte-slashmenu-description-gap;
      align-items: center;
    }

    .e-rte-slash-menu-item-content-description .e-slash-menu-icon {
      padding: $rte-slash-menu-icon-padding;
    }

    .e-rte-slash-menu-item-content-description .e-rte-slash-menu-item-text-column {
      display: flex;
      flex-direction: column;
    }

    .e-rte-slash-menu-item-content-description .e-rte-slash-menu-item-text,
    .e-rte-slash-menu-item-content-text {
      font-weight: $rte-slash-menu-content-text-font-weight;
    }

    .e-rte-slash-menu-item-content-text {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 25px;
    }

    .e-rte-slash-menu-item-content-text .e-slash-menu-icon {
      margin-left: $rte-slash-menu-icon-margin-left;
      width: 30px;
    }
  }

  .e-image-quicktoolbar {
    .e-link-groups {
      display: none;
    }

    &.e-link-enabled {
      .e-link-groups {
        display: inline-block;
      }

      .e-toolbar-item {
        &:has(.e-insert-link) {
          display: none;
        }
      }
    }
  }

  .e-rte-quick-popup {
    .e-rte-tip-pointer {
      position: absolute;

      &::before,
      &::after {
        content: '';
        position: absolute;
        width: $rte-tip-pointer-before-after-width;
        height: $rte-tip-pointer-before-after-height;
        pointer-events: none;
      }

      &.e-rte-tip-top {
        &::after,
        &::before {
          bottom: 0;
        }
      }

      &.e-rte-tip-bottom {
        bottom: 0;
        &::before,
        &::after {
          top: 0;
        }
      }

      &.e-rte-tip-center,
      &.e-rte-tip-center::before,
      &.e-rte-tip-center::after {
        left: 50%;
        transform: translateX(-50%);
      }

      &.e-rte-tip-left,
      &.e-rte-tip-left::before,
      &.e-rte-tip-left::after {
        left: 8.5px;
        transform: translateX(-50%);
      }

      &.e-rte-tip-right,
      &.e-rte-tip-right::before,
      &.e-rte-tip-right::after {
        right: 8.5px;
        transform: translateX(50%);
      }

      &.e-rte-tip-leftmiddle,
      &.e-rte-tip-leftmiddle::before,
      &.e-rte-tip-leftmiddle::after {
        left: 25%;
        transform: translateX(-50%);
      }

      &.e-rte-tip-rightmiddle,
      &.e-rte-tip-rightmiddle::before,
      &.e-rte-tip-rightmiddle::after {
        right: 25%;
        transform: translateX(50%);
      }
    }
  }
}

.e-richtexteditor {
  .e-rte-container.e-resize-enabled:not(.e-rte-tb-bottom):not(.e-count-enabled) {
    .e-rte-content,
    .e-source-content {
      margin-bottom: $rte-resize-bar-margin-bottom;
    }
  }
}

.e-richtexteditor .e-rte-toolbar .e-toolbar-pop.e-toolbar-extended {
  margin-left: $rte-toolbar-poup-extended-margin-left;
}

//toolbar popup min height over riding start
.e-richtexteditor .e-rte-toolbar .e-toolbar-pop:not(.e-toolbar-extended) {
  background: $rte-popup-bg;
  .e-toolbar-item.e-toolbar-popup {
    min-height: $rte-popup-item-min-height;
  }
}

.e-richtexteditor {
  .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item,
  .e-rte-toolbar .e-toolbar-pop:not(.e-toolbar-extended) .e-toolbar-item.e-toolbar-popup,
  .e-rte-toolbar .e-toolbar-item {
    .e-tbar-btn.e-btn {
      min-height: $rte-split-btn-height;
      min-width: $rte-split-btn-height;
      padding: $rte-toolbar-tbar-btn-padding; //4.toolbar tbar-btn padding need to confirm and remove
      &:hover,
      &:active,
      &:focus,
      &.e-active {
        border: $rte-hover-split-btn-border;
        padding: $rte-toolbar-tbar-btn-hover-padding; //4.toolbar tbar-btn padding need to confirm and remove
      }
      .e-icons {
        padding: $rte-toolbar-tbar-btn-icons-padding; //4.toolbar tbar-btn padding need to confirm and remove
      }
    }
    .e-tbar-btn:not(:hover):not(:focus):not(:active):not(.e-active) {
      border: $rte-split-btn-border;
    }
  }
  .e-rte-toolbar .e-toolbar-pop:not(.e-toolbar-extended) {
    .e-toolbar-item.e-toolbar-popup:not(.e-overlay) .e-tbar-btn:hover .e-icons {
      @if $theme-name == 'bootstrap5.3' {
        color: $rte-hover-icons-color;
      }
    }
    .e-toolbar-item.e-toolbar-popup .e-tbar-btn:not(:hover):not(:focus):not(:active):not(.e-active) {
      @if $theme-name == 'bootstrap4' {
        background: $rte-default-btn-bg;
      }
    }
  }
}

@if $theme-name == 'material' or $theme-name == 'material-dark' {
  .e-richtexteditor .e-rte-toolbar:not(.e-rte-inline-toolbar) .e-toolbar-item .e-tbar-btn.e-btn {
    margin: $rte-tbar-btn-small-margin;
  }
}

//toolbar popup min height over riding end

.e-richtexteditor .e-rte-tb-bottom {
  order: 999;
  bottom: 0;
}

.e-rte-aiquery-popup {
  min-height: 100px;
  overflow: hidden;
  display: flex !important; /* stylelint-disable-line declaration-no-important */
  flex-direction: column;
  .e-rte-ai-assit-content-container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
  }

  .e-aiassistview {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto !important; /* stylelint-disable-line declaration-no-important */
    .e-view-header {
      flex: 0 0 auto;
    }
    .e-view-content {
      flex: 1 1 auto;
      overflow-y: auto;
      overflow-x: hidden;
      min-height: 0;
    }
    .e-view-container {
      margin: auto;
    }
    .e-rte-icon-btn-disabled {
      pointer-events: none;
      opacity: .5;
      cursor: not-allowed;
    }
    .banner-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 230px;
      text-align: center;
      & .e-assistview-icon::before {
        font-size: 35px;
      }
    }
    .e-footer {
      width: 85%;
    }
  }
}

//Added for export button
.e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-progress-btn.e-tbar-btn.e-spin-center {
  line-height: 2px;
}

// Styles for Blazor SmartRichTextEditor component
.e-smartrichtexteditor {
  .e-rte-ai-selected-text {
    color: rgb(255, 255, 255);
    background: rgba(51, 103, 209);
  }
  .e-rte-aiquery-dialog {
    border: 0;
  }
  .e-rte-aiquery-dialog .e-dlg-content {
    min-height: 100px;
    overflow: hidden;
    display: flex !important; /* stylelint-disable-line declaration-no-important */
    flex-direction: column;
    padding: 0;
    border-radius: 0 !important; /* stylelint-disable-line declaration-no-important */

    .e-rte-ai-assit-content-container {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-height: 0;
      width: 100%;
    }

    .e-aiassistview {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-height: 0;
      height: auto !important; /* stylelint-disable-line declaration-no-important */
      .e-view-header {
        flex: 0 0 auto;
      }
      .e-view-content {
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        min-height: 0;
      }
      .e-view-container {
        margin: auto;
      }
      .banner-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 230px;
        text-align: center;
        & .e-assistview-icon::before {
          font-size: 35px;
        }
      }
      .e-footer {
        width: 85%;
      }
    }
  }

  @if $theme-name != 'bootstrap4' and $theme-name != 'bootstrap5' and $theme-name != 'bootstrap5.3' {
    .e-rte-aiquery-dialog .e-toolbar-item .e-rte-dropdown-menu:not(:hover):not(:focus):not(:active):not(.e-active) {
      border: 1px solid transparent;
      background-color: transparent;
      background: transparent;
      box-shadow: none;
    }
  }
  .e-rte-aiquery-dialog .e-dlg-overlay {
    background-color: rgb(250, 250, 250);
    opacity: .6;
  }
}

.e-smartrichtexteditor.e-dlg-target.e-scroll-disabled {
  overflow: initial !important; /* stylelint-disable-line declaration-no-important */
}

.e-rte-ai-assist-history.e-rte-dropdown-menu.e-popup-open {
  visibility: hidden;
  max-height: 200px;
  overflow-y: auto;
}

@mixin quick-toolbar-background-color {
  @if $theme-name == 'bootstrap5' {
    background: $content-bg-color;
  }
  @else if $theme-name == 'bootstrap5-dark' {
    background: $content-bg-color-alt2;
  }
  @else {
    background: $rte-quick-popup-bg-color;
  }
}

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

  /*! tab layout */

  .e-rte-container {
    border: $rte-container-border;
  }

  .e-rte-toolbar.e-toolbar {
    .e-toolbar-pop:not(.e-toolbar-extended) {
      .e-toolbar-item {
        display: inline-flex;
        margin: $rte-popup-item-padding;
      }
    }
    .e-toolbar-pop.e-popup-open:not(.e-toolbar-extended) {
      display: inline-flex;
      flex-wrap: wrap;
      max-width: 75%;
      width: max-content;
      padding: $rte-popup-padding;
    }
    // Prevents flickering caused by dynamic max-width when popup opens
    // Removes inherited max-height from toolbar component to ensure all items are visible
    .e-toolbar-pop:not(.e-toolbar-extended) {
      max-width: 75%;
      max-height: none !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-rte-container .e-toolbar-wrapper.e-rte-tb-bottom {
    border-top: $rte-wrapper-tb-bottom-border-top;
  }

  .e-toolbar-wrapper,
  .e-toolbar-container  {
    border-bottom: $rte-toolbar-wrapper-container-border-bottom;
  }

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

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

    .e-rte-elements.e-tbar-btn.e-rte-export-btn {
      background-color: $rte-toolbar-item-hov-bg-color;
    }

    .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: $rte-content-blockquote-border-left;
        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;
    }
  }

  .e-rte-quick-popup.e-rte-elements {
    box-shadow: $rte-quick-popup-box-shadow;
    .e-rte-quick-toolbar.e-rte-toolbar.e-toolbar {
      @include quick-toolbar-background-color;
      @if $skin-name == 'FluentUI' {
        box-shadow: none;
      }
      @if $theme-name == 'highcontrast' {
        border: $rte-quick-popup-toolbar-border;
      }
      .e-toolbar-items:not(.e-tbar-pos) {
        @include quick-toolbar-background-color;
        .e-toolbar-item.e-overlay {
          @include quick-toolbar-background-color;
        }
        .e-toolbar-item:not(.e-active) {
          .e-tbar-btn,
          .e-rte-dropdown-menu {
            &:not(.e-active):not(:hover):not(:focus):not(:active) {
              @include quick-toolbar-background-color;
            }
          }
        }
      }
    }
  }

  .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item {
    .e-split-btn-wrapper {
      .e-rte-dropdown {
        &:hover {
          background: $rte-quick-tb-btn-hover;
        }
        &:focus {
          background: $rte-quick-pop-item-focus-bg;
        }
        &:active {
          background: $rte-quick-item-active-bg;
        }
      }
    }
  }

  .e-richtexteditor .e-rte-toolbar .e-toolbar-item {
    .e-split-btn-wrapper {
      border-radius: $rte-split-btn-border-radius;
      .e-rte-dropdown {
        background: $rte-default-btn-bg;
        border: $rte-split-btn-border;
      }
    }
  }
  .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item {
    .e-split-btn-wrapper {
      border-radius: $rte-split-btn-border-radius;
      .e-rte-dropdown {
        @include quick-toolbar-background-color;
        border: $rte-split-btn-border;
      }
    }
  }

  .e-richtexteditor .e-rte-toolbar .e-toolbar-item {
    .e-rte-dropdown-menu:not(:hover):not(:focus):not(:active):not(.e-active) {
      background: $rte-default-btn-bg;
      border: $rte-split-btn-border;
    }
    .e-tbar-btn {
      border: $rte-split-btn-border;
    }
  }

  .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item {
    .e-rte-dropdown-menu:not(:hover):not(:focus):not(:active):not(.e-active) {
      background: $rte-quick-pop-bg;
      border: $rte-split-btn-border;
    }
    .e-tbar-btn {
      border: $rte-split-btn-border;
    }
  }

  .e-richtexteditor .e-rte-toolbar .e-toolbar-item,
  .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item {
    .e-rte-dropdown-menu {
      box-shadow: none;
      color: $rte-dropdown-color;

      &:hover,
      &:focus {
        color: $rte-icon-color;
      }
      &:hover {
        @if $theme-name == 'bootstrap5.3' {
          color: $rte-hover-icons-color;
        }
      }

      &:active {
        color: $rte-active-btn-icons-color;
      }

      &.e-active {
        color: $rte-drop-btn-active-color;
      }

      &:hover,
      &:focus,
      &:active,
      &.e-active {
        border: $rte-hover-split-btn-border;
        color: $rte-dropdown-transition-color;
        @if $theme-name == 'FluentUI' or $theme-name == 'fluentui-dark' or $theme-name == 'bootstrap' or $theme-name == 'fluent2' or $theme-name == 'fluent2-dark' {
          border-color: transparent;
        }
        @if $theme-name == 'Material3' or $theme-name == 'Material3-dark' {
          background: $rte-split-btn-span-hover-bg;
        }
        @if $theme-name == 'FluentUI' or $theme-name == 'fluentui-dark' or $theme-name == 'tailwind' or $theme-name == 'tailwind-dark' {
          background: $rte-split-btn-hover-bg;
        }
      }
      &:focus-visible {
        box-shadow: $rte-button-focus-box-shadow;
        @if $theme-name == 'fabric' or $theme-name == 'fabric-dark' {
          outline: none;
        }
      }
    }
  }

  .e-richtexteditor .e-rte-toolbar,
  .e-rte-quick-popup .e-rte-quick-toolbar {
    .e-toolbar-item:not(.e-overlay) {
      .e-tbar-btn {

        &:hover,
        &:focus,
        &:active,
        &.e-active {
          border: $rte-hover-split-btn-border;
        }

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

        &:hover,
        &:focus {
          @if $theme-name == 'tailwind' or $theme-name == 'bootstrap4' or $theme-name == 'bootstrap5.3'  or $theme-name == 'tailwind-dark' or $theme-name == 'tailwind3' {
            background: $rte-split-btn-hover-bg;
          }
          .e-icons {
            color: $rte-icon-color;
          }
        }
        &:hover {
          .e-icons {
            @if $theme-name == 'bootstrap5.3' {
              color: $rte-hover-icons-color;
            }
          }
        }

        &:active {
          .e-icons {
            color: $rte-active-btn-icons-color;
          }
        }
        @if $theme-name == 'FluentUI' or $theme-name == 'fluentui-dark' {
          border-color: transparent;
        }
      }
    }
    .e-toolbar-item.e-active:not(.e-overlay) {
      .e-tbar-btn .e-icons {
        @if $theme-name != 'bootstrap5.3' {
          color: $rte-icon-color;
        }
        @if $theme-name == 'bootstrap5.3' {
          color: $rte-hover-icons-color;
        }
      }
      .e-tbar-btn {
        border: $rte-hover-split-btn-border;
        @if $theme-name != 'fluent2-highcontrast' {
          background: $rte-btn-active-bg;
        }
        @if $theme-name == 'fluent2-highcontrast' {
          background: $rte-split-btn-hover-bg;
        }
      }
    }
  }

  .e-richtexteditor.e-disabled .e-rte-toolbar .e-toolbar-item {
    .e-tbar-btn,
    .e-rte-dropdown-menu,
    .e-rte-dropdown {
      pointer-events: none;
      cursor: default;
      background: transparent;
      border: $rte-toolbar-btn-border;

      &:hover {
        background: transparent;
        border: $rte-toolbar-btn-hover-border;

        .e-icons,
        .e-rte-dropdown-btn-text,
        .e-rte-font-color::before,
        .e-background-color::before {
          color: inherit;
          background: transparent;
        }
      }
    }
  }

  .e-richtexteditor .e-rte-toolbar .e-toolbar-item:not(.e-overlay),
  .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item:not(.e-overlay) {
    .e-rte-dropdown {
      box-shadow: none;
    }
  }

  .e-richtexteditor .e-rte-toolbar .e-toolbar-item,
  .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item {
    .e-rte-dropdown {
      color: $rte-dropdown-color;
    }
    .e-split-btn-wrapper {
      &:hover {
        background: $rte-split-btn-hover-bg;
        .e-rte-dropdown {
          border: $rte-hover-split-btn-border;
          @if $theme-name == 'Material3' or $theme-name == 'Material3-dark' {
            border-image: none;
          }
        }
        .e-split-btn:hover,
        .e-dropdown-btn:hover {
          @if $theme-name != 'fluent2-highcontrast' {
            background: $rte-split-btn-span-hover-bg;
          }
          @if $theme-name == 'fluent2-highcontrast' {
            background: $rte-split-btn-hover-bg;
          }
        }
        .e-split-btn,
        .e-dropdown-btn {
          &:not(:hover) {
            background: transparent;
          }
        }
        .e-icons {
          @if $theme-name != 'bootstrap5.3' {
            color: $rte-icon-color;
          }
          @if $theme-name == 'bootstrap5.3' {
            color: $rte-hover-icons-color;
          }
        }
      }

      &:active {
        .e-rte-dropdown {
          border: $rte-hover-split-btn-border;
          &:active {
            @if $theme-name == 'Material3' or $theme-name == 'Material3-dark' {
              border-image: none;
            }
          }
        }
        .e-icons {
          color: $rte-active-btn-icons-color;
        }
      }

      &:focus {
        background: $rte-split-btn-span-hover-bg;
        .e-rte-dropdown {
          border: $rte-hover-split-btn-border;
          &:focus {
            @if $theme-name == 'Material3' or $theme-name== 'Material3-dark' {
              border-image: none;
            }
          }
        }
        .e-split-btn:focus,
        .e-dropdown-btn:focus {
          background: $rte-split-btn-span-hover-bg;
        }
        .e-split-btn,
        .e-dropdown-btn {
          &:not(:focus) {
            background: transparent;
          }
        }
        .e-icons {
          color: $rte-icon-color;
          @if ($theme-name == 'fluent2' or $theme-name == 'tailwind3') {
            color: $rte-default-icon-color;
          }
        }
      }
    }

    .e-split-btn-wrapper:has(.e-dropdown-btn.e-active) {
      .e-split-btn,
      .e-dropdown-btn {
        @if $theme-name == 'bootstrap-dark' or $theme-name == 'tailwind' or $theme-name == 'tailwind-dark' {
          border: $rte-hover-split-btn-border;
        }
        @if $theme-name != 'bootstrap5.3' {
          color: $rte-icon-color;
        }
        @if $theme-name == 'bootstrap5.3' {
          color: $rte-hover-icons-color;
        }
      }
    }

    .e-split-btn-wrapper .e-split-btn + .e-dropdown-btn.e-active {
      background: $rte-drop-btn-active-bg;
    }
    .e-split-btn-wrapper:has(.e-dropdown-btn.e-active) .e-split-btn {
      background: $rte-split-btn-hover-bg;
    }
  }

  .e-richtexteditor .e-rte-toolbar {
    .e-toolbar-item.e-active {
      .e-split-btn-wrapper {
        @if $theme-name == 'bootstrap-dark' or $theme-name == 'tailwind' or $theme-name == 'tailwind-dark' {
          border: $rte-hover-split-btn-border;
        }
        @if $theme-name != 'fluent2-highcontrast' {
          background: $rte-btn-active-bg;
        }
        @if $theme-name == 'fluent2-highcontrast' {
          background: $rte-split-btn-hover-bg;
        }
        .e-split-btn,
        .e-dropdown-btn {
          background: transparent;
          @if $theme-name != 'bootstrap5.3' {
            color: $rte-icon-color;
          }
          @if $theme-name == 'bootstrap5.3' {
            color: $rte-hover-icons-color;
          }
        }
      }
    }
  }

  .e-richtexteditor .e-rte-toolbar .e-toolbar-item,
  .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item {
    .e-colorpicker-wrapper:focus-visible,
    .e-colorpicker-container:focus-visible,
    .e-split-btn-wrapper:focus-visible,
    .e-split-btn-wrapper:focus-visible {
      @if $theme-name == 'bootstrap-dark' or $theme-name == 'tailwind' or $theme-name == 'tailwind-dark' {
        border: $rte-hover-split-btn-border;
      }
      @if $theme-name != 'fluent2-highcontrast' {
        background: $rte-split-btn-focus-bg;
      }
      @if $theme-name == 'fluent2-highcontrast' {
        background: $rte-split-btn-hover-bg;
      }
      box-shadow: $rte-button-focus-box-shadow;
      .e-split-btn,
      .e-dropdown-btn {
        &:not(:focus-visible) {
          background: transparent;
          @if $theme-name != 'bootstrap5.3' {
            color: $rte-icon-color;
          }
          @if $theme-name == 'bootstrap5.3' {
            color: $rte-hover-icons-color;
          }
        }
      }
    }
    .e-split-btn-wrapper:not(:focus-visible):has(.e-dropdown-btn:focus-visible),
    .e-split-btn-wrapper:not(:focus-visible):has(.e-split-btn:focus-visible) {
      @if $theme-name == 'bootstrap-dark' or $theme-name == 'tailwind' or $theme-name == 'tailwind-dark' {
        border: $rte-hover-split-btn-border;
      }
      @if $theme-name != 'fluent2-highcontrast' {
        background: $rte-split-btn-focus-bg;
      }
      @if $theme-name == 'fluent2-highcontrast' {
        background: $rte-split-btn-hover-bg;
      }
      box-shadow: $rte-button-focus-box-shadow;
      .e-split-btn,
      .e-dropdown-btn {
        background: transparent;
        @if $theme-name != 'bootstrap5.3' {
          color: $rte-icon-color;
        }
        @if $theme-name == 'bootstrap5.3' {
          color: $rte-hover-icons-color;
        }
      }
    }
  }

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

  .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: $rte-direct-span-media-boxmark-border;
    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: $rte-mob-img-video-boxmark-border;
    border-radius: $rte-videoboxmark-border-radius;
    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: $rte-img-video-boxmark-border;
  }

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

  @if $theme-name != 'fluentui-dark' and $theme-name != 'bootstrap5.3-dark' and $theme-name != 'tailwind3-dark' {
    .e-rte-toolbar .e-toolbar-item.e-overlay {
      .e-tbar-btn .e-icons,
      .e-rte-dropdown-menu,
      .e-rte-dropdown-menu .e-icons,
      .e-rte-dropdown .e-icons,
      .e-rte-font-color::before,
      .e-background-color::before {
        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: $rte-tb-expended-hover-border;
    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: $rte-container-border;
    }
    display: block;
    margin-bottom: $rte-table-span-margin-bottom;
    margin-top: $rte-table-span-margin-top;
  }

  .e-rte-table-popup .e-rte-popup-header {
    color: $rte-table-header-color;
    font-family: $rte-font-family;
    font-size: $rte-table-header-font-size;
    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: $rte-table-span-active-border;
  }

  .e-rte-table.e-alternate-border > tbody > tr:nth-child(2n),
  .e-rte-table.e-alternate-border > tbody > tr:nth-child(2n) > td,
  .e-rte-table.e-alternate-border > tbody > tr:nth-child(2n) > th {
    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: $rte-table-border;
  }

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

  .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-upload.e-lib.e-control-wrapper.e-rte-dialog-upload {
    background: $rte-content-bg;
  }

  .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:not(.e-overlay) .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: $rte-emojipicker-toolbar-border;
      box-shadow: none;

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

        & .e-scroll-nav {
          border: $rte-emojipicker-toolbar-scroll-border;
        }
      }
    }

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

  @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: $rte-tb-item-active-border-radius;
    }

    .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: $rte-toolbar-pop-border;
    }
  }

  @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

  .e-rte-img-dialog .e-rte-upload-progress {
    color: $rte-dialog-upload-status-progress;
  }
  // Blazor styles end

  .e-rte-quick-popup {
    @if $theme-name == 'fabric' or $theme-name == 'material' or $theme-name == 'Material3' or $theme-name == 'FluentUI' or $theme-name == 'bootstrap' or $theme-name == 'bootstrap5' {
      filter: drop-shadow(0 2px 6px $rte-quick-popup-filter-color);
    }
    .e-rte-tip-pointer {
      &.e-rte-tip-top::before {
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        @if $theme-name == 'Material3' {
          border-bottom: 10px solid rgb(244, 242, 247);
        }
        @else if $theme-name == 'Material3-dark' {
          border-bottom: 10px solid rgb(44, 42, 54);
        }
        @else if $theme-name == 'bootstrap5' {
          border-bottom: 10px solid $content-bg-color;
        }
        @else if $theme-name == 'bootstrap5-dark' {
          border-bottom: 10px solid $content-bg-color-alt2;
        }
        @else {
          border-bottom: 10px solid $rte-quick-toolbar-tip-pointer-border;
        }
      }
      &.e-rte-tip-top::after {
        border-left: 7.5px solid transparent;
        border-right: 7.5px solid transparent;
        border-bottom: 9px solid $rte-quick-toolbar-tip-pointer-content;
      }
      &.e-rte-tip-bottom::before {
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        @if $theme-name == 'Material3' {
          border-top: 10px solid rgb(244, 242, 247);
        }
        @else if $theme-name == 'Material3-dark' {
          border-top: 10px solid rgb(44, 42, 54);
        }
        @else if $theme-name == 'bootstrap5' {
          border-top: 10px solid $content-bg-color;
        }
        @else if $theme-name == 'bootstrap5-dark' {
          border-top: 10px solid $content-bg-color-alt2;
        }
        @else {
          border-top: 10px solid $rte-quick-toolbar-tip-pointer-border;
        }
      }
      &.e-rte-tip-bottom::after {
        border-left: 7.5px solid transparent;
        border-right: 7.5px solid transparent;
        border-top: 9px solid $rte-quick-toolbar-tip-pointer-content;
      }
    }
  }
}

.e-rte-aiquery-popup {
  box-shadow: $rte-ai-assistant-box-shadow;
  .e-aiassistview {
    .e-rte-icon-btn-disabled {
      color: $rte-ai-assistant-btn-disabled;
    }
  }
  @if $theme-name != 'bootstrap4' and $theme-name != 'bootstrap5' and $theme-name != 'bootstrap5.3' {
    .e-toolbar-item .e-rte-dropdown-menu:not(:hover):not(:focus):not(:active):not(.e-active) {
      border: 1px solid transparent;
      background-color: transparent;
      box-shadow: none;
    }
  }
}

/*! 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-horizontal-line::before {
      content: '\e920';
    }

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

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

    .e-lineHeight::before {
      content: '\e78d';
    }
    .e-rte-checklist-icon::before {
      content: '\e952';
    }
    .e-justify-center::before {
      content: '\e813';
    }

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

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

    .e-left-wrap::before {
      content: '\e95b';
    }

    .e-right-wrap::before {
      content: '\e95c';
    }

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

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

    .e-rte-background-colorpicker .e-split-colorpicker.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-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: '\e954';
    }

    .e-table-editCell-properties::before {
      content: '\e95e';
    }

    .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-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-dialog.e-rte-dialog-minheight {
    @if $theme-name != 'fluent2-highcontrast' {
      min-height: $rte-big-dialog-min-height;
    }
    @if $theme-name == 'fluent2-highcontrast' {
      min-height: $rte-big-dialog-fluent-min-height;
    }
  }
  .e-rte-content .e-content {
    font-size: $rte-big-content-font-size;
  }
  .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
    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,
  .e-dialog .e-word-uploadwrap .e-droptext {
    height: $rte-big-drop-text-height;
  }
}

.e-bigger {
  .e-rte-emojipicker-popup.e-popup.e-popup-open {
    // min-width: 120px; //Not affecting the UI after removal
    min-height: $rte-big-emoji-popup-open-min-height;
    min-width: $rte-big-emoji-popup-open-width;

    .e-toolbar .e-toolbar-item .e-tbar-btn {
      border-radius: $rte-big-emojipicker-tbar-btn-border-radius;
      padding: $rte-big-toolbar-tbar-btn-padding;
      @if $skin-name =='material' or $skin-name =='material-dark' {
        padding: $rte-big-toolbar-tbar-btn-small-padding;
      }
      @else {
        padding: $rte-big-toolbar-tbar-btn-large-padding;
      }

      &:hover {
        padding: $rte-big-toolbar-tbar-btn-hover-padding;
      }

      &:active {
        padding: $rte-big-toolbar-tbar-btn-active-padding;
      }

      .e-tbar-btn-text {
        @if $skin-name =='fluent2' {
          font-size: $rte-big-emoji-popup-small-font-size;
        }
        @else {
          font-size: $rte-big-emoji-popup-large-font-size;
        }
        padding: $rte-big-emoji-popup-padding;
      }
    }

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

      .e-rte-emojipicker-group .e-rte-emojipickerbtn-group {
        gap: $rte-big-emoji-btn-group-gap;

        .e-btn.e-control {
          padding: $rte-big-emoji-btn-group-padding;
          // width: 42px; //2. emoji picker dynamic issue
          // height: 42px;//2. emoji picker dynamic issue
          // line-height: 0;//No UI affected so removed
          @if $skin-name =='fluent2' {
            font-size: $rte-big-emoji-btn-group-small-font-size;
          }
          @else {
            font-size: $rte-big-emoji-btn-group-large-font-size;
          }
        }
      }

      .e-rte-emojisearch-btn {
        gap: $rte-big-emoji-search-btn-gap;

        .e-btn.e-control {
          font-size: $rte-big-emoji-picker-group-font-size;
          padding: $rte-big-emoji-picker-group-padding;
          // width: 40px; //2. emoji picker dynamic issue
          // height: 40px; //2. emoji picker dynamic issue
          border: $rte-emoji-grp-btn-border;
          // line-height: 0;//No UI affected so removed
        }
      }

      .e-rte-emojipicker-group .e-rte-emojipicker-name {
        font-weight: $rte-big-emoji-picker-name-font-weight;
        font-size: $rte-big-emoji-picker-name-font-size;
      }
    }
  }
  .e-rte-dropdown-popup {
    ul {
      min-width: 84px;
    }
  }

  .e-rte-edit-table .e-rte-field {
    padding-top: $rte-big-insert-dialog-label-padding-top;
  }
  .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-bigger {
  .e-rte-quick-popup.e-rte-elements {
    .e-rte-quick-toolbar.e-rte-toolbar.e-toolbar {
      min-height: $rte-big-quick-toolbar-min-height;
      min-width: $rte-big-quick-toolbar-min-width;
      .e-toolbar-items:not(.e-tbar-pos) {
        min-height: $rte-big-quick-toolbar-items-not-tbar-pos-min-height;
        min-width: $rte-big-quick-toolbar-items-not-tbar-pos-min-width;
        margin: $rte-quick-big-popup-outer-margin;
        .e-toolbar-item {
          margin: $rte-big-quick-toolbar-item-margin;
          min-height: $rte-big-popup-toolbar-item-min-height;
          min-width: $rte-big-popup-toolbar-item-min-width;
          padding: $rte-quick-big-popup-inner-padding;
        }
      }
    }
  }
}

.e-bigger {
  .e-richtexteditor .e-rte-toolbar .e-toolbar-item {
    .e-split-btn-wrapper,
    .e-rte-dropdown-menu {
      min-height: $rte-big-split-btn-height;
    }
  }

  .e-rte-quick-popup {
    .e-rte-tip-pointer {
      &.e-rte-tip-top::before {
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        @if $theme-name == 'Material3' {
          border-bottom: 14px solid rgb(244, 242, 247);
        }
        @else if $theme-name == 'Material3-dark' {
          border-bottom: 14px solid rgb(44, 42, 54);
        }
        @else if $theme-name == 'bootstrap5' {
          border-bottom: 14px solid $content-bg-color;
        }
        @else if $theme-name == 'bootstrap5-dark' {
          border-bottom: 14px solid $content-bg-color-alt2;
        }
        @else {
          border-bottom: 14px solid $rte-quick-toolbar-tip-pointer-border;
        }
      }
      &.e-rte-tip-top::after {
        border-left: 9.5px solid transparent;
        border-right: 9.5px solid transparent;
        border-bottom: 13px solid $rte-quick-toolbar-tip-pointer-content;
      }
      &.e-rte-tip-bottom::before {
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        @if $theme-name == 'Material3' {
          border-top: 14px solid rgb(244, 242, 247);
        }
        @else if $theme-name == 'Material3-dark' {
          border-top: 14px solid rgb(44, 42, 54);
        }
        @else if $theme-name == 'bootstrap5' {
          border-top: 14px solid $content-bg-color;
        }
        @else if $theme-name == 'bootstrap5-dark' {
          border-top: 14px solid $content-bg-color-alt2;
        }
        @else {
          border-top: 14px solid $rte-quick-toolbar-tip-pointer-border;
        }
      }
      &.e-rte-tip-bottom::after {
        border-left: 9.5px solid transparent;
        border-right: 9.5px solid transparent;
        border-top: 13px solid $rte-quick-toolbar-tip-pointer-content;
      }
    }
  }
}

// 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: $rte-big-dialog-border-radius;
    }
  }

  .e-bigger {
    .e-rte-container{
      border-radius: $rte-big-container-border-radius;
    }
    .e-richtexteditor{
      .e-toolbar .e-hor-nav {
        border-radius: $rte-big-toolbar-border-radius;
      }
      .e-rte-content {
        border-radius: $rte-big-toolbar-container-border-radius;
      }
    }
    .e-richtexteditor .e-toolbar-wrapper{
      border-radius: $rte-big-toolbar-wrapper-border-radius;
    }
  }
}
@if $skin-name == 'fluent2' {
  .e-bigger .e-richtexteditor {
    .e-toolbar .e-hor-nav{
      min-height: 48px;
    }
  }
}

//toolbar popup min height over riding start
.e-bigger .e-richtexteditor .e-rte-toolbar .e-toolbar-pop:not(.e-toolbar-extended) .e-toolbar-item.e-toolbar-popup {
  min-height: $rte-big-popup-item-min-height;
}

.e-bigger .e-richtexteditor {
  .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item,
  .e-rte-toolbar .e-toolbar-pop:not(.e-toolbar-extended) .e-toolbar-item.e-toolbar-popup,
  .e-rte-toolbar .e-toolbar-item,
  .e-rte-toolbar .e-toolbar-items .e-toolbar-item {
    .e-tbar-btn.e-btn {
      min-height: $rte-big-split-btn-height;
      min-width: $rte-big-split-btn-height;
      padding: $rte-big-split-tbar-btn-padding; //4.toolbar tbar-btn padding need to confirm and remove
      &:hover,
      &:active,
      &:focus,
      &.e-active {
        border: $rte-hover-split-btn-border;
        padding: $rte-big-split-tbar-btn-hover-padding; //4.toolbar tbar-btn padding need to confirm and remove
      }
      .e-icons {
        padding: $rte-big-split-tbar-btn-icons-padding; //4.toolbar tbar-btn padding need to confirm and remove
      }
    }
    .e-tbar-btn:not(:hover):not(:focus):not(:active):not(.e-active) {
      border: $rte-split-btn-border;
    }
  }
}

.e-bigger {
  .e-dialog.e-rte-table-popup.e-popup.e-popup-open {
    min-height: $rte-table-popup-min-height !important; /* stylelint-disable-line declaration-no-important */
  }
}

//toolbar popup min height over riding end

//Layout styles
@if $skin-name == 'Material3' {
  .e-bigger .e-richtexteditor.e-rte-tb-expand {
    border-radius: $rte-big-tb-expand-border-radius;
  }
  .e-bigger .e-richtexteditor .e-toolbar-wrapper {
    border-top-left-radius: $rte-top-left-border-radius;
    border-top-right-radius: $rte-top-right-border-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-top-left-border-radius;
    border-top-right-radius: $rte-top-right-border-radius;
  }
  .e-bigger .e-rte-toolbar .e-toolbar-items {
    border-top-left-radius: $rte-toolbar-items-top-left-border-radius;
  }
  .e-bigger .e-rte-toolbar .e-hor-nav {
    border-top-right-radius: $rte-top-right-border-radius;
  }
  .e-bigger .e-rtl .e-rte-toolbar .e-hor-nav {
    border-top-left-radius: $rte-top-left-border-radius;
    border-top-right-radius: $rte-top-right-border-radius;
  }
  .e-bigger .e-rtl .e-rte-toolbar .e-toolbar-items {
    border-top-right-radius: $rte-toolbar-items-top-left-border-radius;
  }
}

.e-bigger .e-rte-elements.e-popup-open.e-rte-slashmenu .e-list-parent > li {
  padding-left: $rte-big-slashmenu-li-padding-left;
}

.e-bigger {
  .e-richtexteditor {

    .e-rte-toolbar .e-hor-nav.e-expended-nav {
      height: $rte-big-expended-nav-min-height; //used toolbar component nav default min-height
      min-height: $rte-big-expended-nav-min-height; //used toolbar component nav default min-height
    }

    .e-rte-content,
    .e-source-content,
    .e-rte-iframe-content {
      .e-content {
        line-height: $rte-big-content-height;

        blockquote {
          font-size: $rte-big-content-font-size;
        }

        h1 {
          font-size: $rte-big-content-h1-font-size;
          line-height: $rte-big-content-h1-line-height;
        }

        h2 {
          font-size: $rte-big-content-h2-font-size;
          line-height: $rte-big-content-h2-line-height;
        }

        h3 {
          font-size: $rte-big-content-h3-font-size;
          line-height: $rte-big-content-h3-line-height;
        }

        h4 {
          font-size: $rte-big-content-h4-font-size;
          line-height: $rte-big-content-h4-line-height;
        }

        h5 {
          font-size: $rte-big-content-h5-font-size;
          line-height: $rte-big-content-h5-line-height;
        }

        h6 {
          font-size: $rte-big-content-h6-font-size;
          line-height: $rte-big-content-h6-line-height;
        }

        h3 + h4 {
          margin-top: $rte-big-content-h3-h4-tag-margin-top;
        }

        h4 + h5 {
          margin-top: $rte-big-content-h4-h5-tag-margin-top;
        }

        h5 + h6 {
          margin-top: $rte-big-content-h5-h6-tag-margin-top;
        }
      }
    }
  }
  .e-rte-dropdown-popup {
    ul {
      .e-item {
        &.e-h1 {
          font-size: $rte-big-content-ul-h1-font-size;
        }

        &.e-h2 {
          font-size: $rte-big-content-ul-h2-font-size;
        }

        &.e-h3 {
          font-size: $rte-big-content-ul-h3-font-size;
        }

        &.e-h4 {
          font-size: $rte-big-content-ul-h4-font-size;
        }

        &.e-h5 {
          font-size: $rte-big-content-ul-h5-font-size;
        }

        &.e-h6 {
          font-size: $rte-big-content-ul-h6-font-size;
        }
      }
    }
  }
}