UNPKG

froala-editor

Version:

The next generation Javascript WYSIWYG HTML rich text editor made by devs for devs. High performance and modern design make it easy to use for developers and loved by users.

1,239 lines (1,236 loc) 117 kB
/*! * froala_editor v4.7.1 (https://www.froala.com/wysiwyg-editor) * License https://froala.com/wysiwyg-editor/terms/ * Copyright 2014-2025 Froala Labs */ .fr-clearfix::after { clear: both; display: block; content: ""; height: 0; } .fr-hide-by-clipping { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .royal-theme .fr-license { z-index: 1000; padding: 20px; font-size: 14px; color: #222222; background-color: #FFF; border-radius: 10px; } .royal-theme.fr-box.fr-basic { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .royal-theme.fr-box.fr-basic .fr-element { font-family: sans-serif; color: #414141; font-size: 14px; line-height: 1.6; padding: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow-x: auto; min-height: 60px; text-align: left; } .royal-theme .fr-element { -webkit-user-select: auto; } .royal-theme .fr-element a { user-select: auto; -o-user-select: auto; -moz-user-select: auto; -khtml-user-select: auto; -webkit-user-select: auto; -ms-user-select: auto; } .royal-theme .fr-element.fr-disabled { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .royal-theme.fr-box a.fr-floating-btn { -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); -moz-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; height: 40px; width: 40px; background: #FFF; color: #333333; -webkit-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s; -moz-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s; -ms-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s; -o-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s; left: 0; top: 0; line-height: 40px; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: none; } .royal-theme.fr-box a.fr-floating-btn svg { -webkit-transition: transform 0.2s ease 0s; -moz-transition: transform 0.2s ease 0s; -ms-transition: transform 0.2s ease 0s; -o-transition: transform 0.2s ease 0s; fill: #333333; } .royal-theme.fr-box a.fr-floating-btn i, .royal-theme.fr-box a.fr-floating-btn svg { font-size: 14px; line-height: 40px; } .royal-theme.fr-box a.fr-floating-btn:hover { background: #ebebeb; } .royal-theme.fr-box a.fr-floating-btn:hover svg { fill: #333333; } .royal-theme.fr-box .fr-visible a.fr-floating-btn { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .royal-theme iframe.fr-iframe { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .royal-theme .fr-wrapper::after { clear: both; display: block; content: ""; height: 0; } .royal-theme .fr-wrapper .fr-placeholder { font-size: 14px; color: #AAA; font-family: sans-serif; top: 0; left: 0; right: 0; } .royal-theme .fr-wrapper ::-moz-selection { background: rgba(181, 214, 253, 0.8); color: #000; } .royal-theme .fr-wrapper ::selection { background: rgba(181, 214, 253, 0.8); color: #000; } .royal-theme.fr-box.fr-basic .fr-wrapper { background: #FFF; border: 1px solid #CCCCCC; border-bottom-color: #efefef; top: 0; left: 0; } .royal-theme.fr-box.fr-basic.fr-top .fr-wrapper { border-top: 0; } .royal-theme.fr-box.fr-basic.fr-bottom .fr-wrapper { border-bottom: 0; border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } @media (min-width: 992px) { .royal-theme .fr-box.fr-document .fr-wrapper { padding: 30px; background: #efefef; } .royal-theme .fr-box.fr-document .fr-wrapper .fr-element { background: #FFF; margin: auto; z-index: auto; } .royal-theme .fr-box.fr-document .fr-wrapper .fr-element hr { background: #efefef; } } .royal-theme .fr-sticky-on { z-index: 10; } .royal-theme .fr-sticky-on.fr-sticky-ios { left: 0; right: 0; } .royal-theme span.fr-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .royal-theme .fr-track-hide-mobile { width: 0; height: 0; } .royal-theme .fr-selection-handle { width: 16px; height: 16px; padding: 3px; border: transparent 2px solid; border-radius: 4px 4px 0 0; } .royal-theme .fr-selection-handle a { width: 16px; height: 16px; } .royal-theme .fr-selection-handle a > svg { width: 16px; height: 16px; } .royal-theme .fr-selection-handle-active { border: #F6D146 2px solid; background-color: #F6D146; } .royal-theme .fr-selection-handle-active a > svg { color: #F6D146; } .royal-theme .fr-selection-handle-active-selected { border: #0098F7 2px solid; background-color: #0098F7; } .royal-theme .fr-selection-handle-active-selected a > svg { color: #0098F7; } .royal-theme .fr-view .fr-selection-handle-hover { outline: #F6D146 2px solid; } .royal-theme .fr-view .fr-selection-handle-selected { outline: #0098F7 2px solid; } .royal-theme .fr-custom-selection-highlight { background-color: rgba(181, 214, 253, 0.8); /* light blue */ color: #000; } .royal-theme .fr-selection-drop-indicator { height: 0; z-index: 1000; left: 0; } .royal-theme .fr-selection-drop-indicator .fr-selection-drop-indicator-line { border: 1px solid #0098F7; } .royal-theme .fr-selection-drop-indicator .fr-selection-drop-indicator-line::before { left: 0; border-color: transparent transparent transparent #0098F7; } .royal-theme .fr-selection-drop-indicator .fr-selection-drop-indicator-line::after { right: 0; border-color: transparent #0098F7 transparent transparent; } .royal-theme .fr-link-input-layer .fr-buttons:not(.fr-tabs) { padding: 0; } .royal-theme .fr-link-input-layer .fr-buttons .fr-command.fr-btn.fr-dropdown { right: 0; } .royal-theme .fr-link-input-layer .fr-buttons .fr-command.fr-btn.fr-dropdown.fr-active { background-color: #ebebeb; } .royal-theme .fr-opacity-0 { -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .royal-theme.fr-box .fr-counter { padding: 10px; color: #999999; font-size: 14px; font-family: sans-serif; border-radius: 2px 0 0 0; -moz-border-radius: 2px 0 0 0; -webkit-border-radius: 2px 0 0 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .royal-theme.fr-box.fr-rtl .fr-counter { left: 0; right: auto; border-radius: 0 2px 0 0; -moz-border-radius: 0 2px 0 0; -webkit-border-radius: 0 2px 0 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .royal-theme textarea.fr-code { resize: none; -moz-resize: none; -webkit-resize: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; background: #FFF; color: #000; } .royal-theme.fr-box.fr-inline .fr-command.fr-btn.html-switch { top: 0; right: 0; background: #FFF; color: #333333; -moz-outline: 0; outline: 0; border: 0; padding: 8px 7px; -webkit-transition: background 0.2s ease 0s; -moz-transition: background 0.2s ease 0s; -ms-transition: background 0.2s ease 0s; -o-transition: background 0.2s ease 0s; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .royal-theme.fr-box.fr-inline .fr-command.fr-btn.html-switch i { font-size: 24px; width: 24px; } .royal-theme.fr-box.fr-inline .fr-command.fr-btn.html-switch.fr-desktop:hover { background: #ebebeb; } .royal-theme.fr-popup .fr-layer.fr-color-hex-layer { margin: 0; padding: 20px; padding-top: 0; } .royal-theme.fr-popup .fr-layer.fr-color-hex-layer .fr-input-line { padding: 15px 0 0; } .royal-theme.fr-popup .fr-layer.fr-color-hex-layer .fr-action-buttons { width: 38px; height: 40px; padding: 17px 0 0; margin: 0; } .royal-theme.fr-popup .fr-layer.fr-color-hex-layer .fr-action-buttons button.fr-command { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; font-size: 13px; height: 40px; width: 38px; } .royal-theme.fr-popup .fr-color-set { line-height: 0; } .royal-theme.fr-popup .fr-color-set.fr-selected-set { padding: 20px; padding-bottom: 0; } .royal-theme.fr-popup .fr-color-set > span { width: 32px; height: 32px; } .royal-theme.fr-popup .fr-color-set > span > i, .royal-theme.fr-popup .fr-color-set > span > svg { line-height: 32px; height: 24px; width: 24px; margin: 4px; font-size: 13px; bottom: 0; left: 0; } .royal-theme.fr-popup .fr-color-set > span > i path, .royal-theme.fr-popup .fr-color-set > span > svg path { fill: #222222; } .royal-theme.fr-popup .fr-color-set > span .fr-selected-color { color: #FFF; font-size: 13px; font-weight: 400; line-height: 32px; top: 0; bottom: 0; right: 0; left: 0; } .royal-theme.fr-popup .fr-color-set > span:not(.fr-table-cell):focus { outline: 1px solid #222222; } .royal-theme.fr-rtl .fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab[data-param1="text"] ~ [data-param1="background"]::after { -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); } .royal-theme .fr-drag-helper { background: #0098f7; -webkit-opacity: 0.2; -moz-opacity: 0.2; opacity: 0.2; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; z-index: 2147483640; } .royal-theme .fr-dragging { -webkit-opacity: 0.4; -moz-opacity: 0.4; opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .royal-theme.fr-popup .fr-emoticon { width: 24px; height: 24px; } .royal-theme.fr-popup .fr-emoticon img { height: 24px; width: 24px; } .royal-theme.fr-popup .fr-command.fr-btn.fr-tabs-unicode { padding: 0 0 0 14px; } @media screen and (-ms-high-contrast: active) and (min-width: 768px), (-ms-high-contrast: none) and (min-width: 768px) { .royal-theme.fr-popup .fr-icon-container.fr-emoticon-container { width: 368px; } } .royal-theme.fr-popup .fr-file-upload-layer { border: dashed 2px #bdbdbd; padding: 25px 0; margin: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .royal-theme.fr-popup .fr-file-upload-layer:hover { background: #ebebeb; } .royal-theme.fr-popup .fr-file-upload-layer.fr-drop { background: #ebebeb; border-color: #0098f7; } .royal-theme.fr-popup .fr-file-upload-layer .fr-form { -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; top: 0; bottom: 0; left: 0; right: 0; z-index: 2147483640; } .royal-theme.fr-popup .fr-file-upload-layer .fr-form input { right: 0; top: 0; bottom: 0; margin: 0; } .royal-theme.fr-popup .fr-file-progress-bar-layer { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .royal-theme.fr-popup .fr-file-progress-bar-layer > h3 { margin: 10px 0; } .royal-theme.fr-popup .fr-file-progress-bar-layer > div.fr-loader { background: #b3e0fd; } .royal-theme.fr-popup .fr-file-progress-bar-layer > div.fr-loader span { background: #0098f7; -webkit-transition: width 0.2s ease 0s; -moz-transition: width 0.2s ease 0s; -ms-transition: width 0.2s ease 0s; -o-transition: width 0.2s ease 0s; } .royal-theme.fr-popup .fr-file-progress-bar-layer > div.fr-loader.fr-indeterminate span { top: 0; -webkit-animation: loading 2s linear infinite; -moz-animation: loading 2s linear infinite; -o-animation: loading 2s linear infinite; animation: loading 2s linear infinite; } .royal-theme .fr-element img { padding: 0 1px; } .royal-theme .fr-image-resizer { border: solid 1px #0098f7; user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .royal-theme .fr-image-resizer .fr-handler { background: #0098f7; border: solid 1px #FFF; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .royal-theme .fr-image-resizer .fr-handler { width: 12px; height: 12px; } .royal-theme .fr-image-resizer .fr-handler.fr-hnw { left: -6px; top: -6px; } .royal-theme .fr-image-resizer .fr-handler.fr-hne { right: -6px; top: -6px; } .royal-theme .fr-image-resizer .fr-handler.fr-hsw { left: -6px; bottom: -6px; } .royal-theme .fr-image-resizer .fr-handler.fr-hse { right: -6px; bottom: -6px; } @media (min-width: 1200px) { .royal-theme .fr-image-resizer .fr-handler { width: 10px; height: 10px; } .royal-theme .fr-image-resizer .fr-handler.fr-hnw { left: -5px; top: -5px; } .royal-theme .fr-image-resizer .fr-handler.fr-hne { right: -5px; top: -5px; } .royal-theme .fr-image-resizer .fr-handler.fr-hsw { left: -5px; bottom: -5px; } .royal-theme .fr-image-resizer .fr-handler.fr-hse { right: -5px; bottom: -5px; } } .royal-theme.fr-image-overlay { top: 0; left: 0; bottom: 0; right: 0; z-index: 2147483640; } .royal-theme .fr-by-url-padding { padding: 11.5px 0; } .royal-theme.fr-popup .fr-upload-progress-layer { border-radius: 0; overflow-y: auto; } .royal-theme.fr-popup .fr-files-upload-layer { border: dashed 2px #bdbdbd; margin: 20px; } .royal-theme.fr-popup .fr-files-upload-layer:hover { background: #ebebeb; } .royal-theme.fr-popup .fr-files-upload-layer.fr-drop { background: #ebebeb; border-color: #0098f7; } .royal-theme.fr-popup .fr-files-upload-layer .fr-form { -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; top: 0; bottom: 0; left: 0; right: 0; z-index: 2147483640; } .royal-theme.fr-popup .fr-files-upload-layer .fr-form input { right: 0; top: 0; bottom: 0; margin: 0; } .royal-theme.fr-popup .fr-files-progress-bar-layer > h3 { margin: 10px 0; } .royal-theme.fr-popup .fr-files-progress-bar-layer > div.fr-loader { background: #b3e0fd; } .royal-theme.fr-popup .fr-files-progress-bar-layer > div.fr-loader span { background: #0098f7; -webkit-transition: width 0.2s ease 0s; -moz-transition: width 0.2s ease 0s; -ms-transition: width 0.2s ease 0s; -o-transition: width 0.2s ease 0s; } .royal-theme.fr-popup .fr-files-progress-bar-layer > div.fr-loader.fr-indeterminate span { top: 0; -webkit-animation: loading 2s linear infinite; -moz-animation: loading 2s linear infinite; -o-animation: loading 2s linear infinite; animation: loading 2s linear infinite; } .royal-theme .fr-progress-bar { background-color: #4CAF50; } .royal-theme .fr-uploading { -webkit-opacity: 0.4; -moz-opacity: 0.4; opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .royal-theme .fr-icons { padding: 10px 20px 0; } .royal-theme .fr-half-circle { border-bottom: 0; } .royal-theme .fr-checkbox-container input { opacity: 0; height: 0; width: 0; } .royal-theme .fr-checkmark { top: 0; left: 0; } .royal-theme .fr-cloud-icon { margin: 0 auto; } .royal-theme .fr-files-checkbox { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .royal-theme .fr-files-checkbox svg { width: 10px; height: 10px; } .royal-theme .fr-files-checkbox span { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: background 0.2s ease 0s, border-color 0.2s ease 0s; -moz-transition: background 0.2s ease 0s, border-color 0.2s ease 0s; -ms-transition: background 0.2s ease 0s, border-color 0.2s ease 0s; -o-transition: background 0.2s ease 0s, border-color 0.2s ease 0s; } .royal-theme .fr-files-checkbox input { -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; height: 18px; margin: 0; padding: 0; width: 18px; } .royal-theme .fr-files-checkbox input:not(:checked) + span { border: solid 2px #999999; } .royal-theme .fr-files-checkbox input:not(:checked):active + span { background-color: #f5f5f5; } .royal-theme .fr-files-checkbox input:not(:checked):focus + span, .royal-theme .fr-files-checkbox input:not(:checked):hover + span { border-color: #515151; } .royal-theme .fr-files-checkbox input:checked + span { background: #0098f7; border: solid 2px #0098f7; } .royal-theme .fr-files-checkbox input:checked:active + span { background-color: #EcF5Ff; } .royal-theme .fr-files-checkbox input:checked:focus + span, .royal-theme .fr-files-checkbox input:checked:hover + span { -webkit-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .royal-theme .fr-checkbox-disabled { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .royal-theme .fr-checkbox-disabled span { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: background 0.2s ease 0s, border-color 0.2s ease 0s; -moz-transition: background 0.2s ease 0s, border-color 0.2s ease 0s; -ms-transition: background 0.2s ease 0s, border-color 0.2s ease 0s; -o-transition: background 0.2s ease 0s, border-color 0.2s ease 0s; } .royal-theme .fr-checkbox-disabled input { -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; margin: 0; padding: 0; } .royal-theme .fr-checkbox-disabled input:not(:checked) + span { border: solid 2px #999999; } .royal-theme .fr-checkbox-disabled input:not(:checked):active + span { background-color: #f5f5f5; } .royal-theme .fr-checkbox-disabled input:checked + span { background: #0098f7; border: solid 2px #0098f7; } .royal-theme .fr-checkbox-disabled input:checked:active + span { background-color: #EcF5Ff; } .royal-theme .fr-files-manager-tooltip .tooltiptext { font-weight: 100; } .royal-theme .fr-file-view-modal { left: 0; top: 0; overflow: auto; } .royal-theme .fr-file-view-image { top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .royal-theme .fr-file-error { font-weight: 200; } .royal-theme .fr-autoplay-checkbox-label { margin: 0; } .royal-theme .fr-container .fr-checkmark:after { border-width: 0 3px 3px 0; } .royal-theme .fr-file-item-details .file-description { font-weight: 300; } .royal-theme #myprogressBar { background-color: #4CAF50; } .royal-theme .progress-circle { padding: 0; } .royal-theme .fr-hovered-over-file { background-color: #F0F0F0; } .royal-theme body.fr-fullscreen .fs-transforms-container { z-index: 2247483660; } .royal-theme .fr-find-replace-layer h3 { margin: 0; } .royal-theme .fr-find-replace-layer .fr-body .fr-input-line input.fr-disabled { background-color: #f5f5f5; color: #a9a9a9; border: 1px solid #d1d1d1; } .royal-theme .fr-find-replace-layer .fr-body .fr-input-line input.fr-replaceText::placeholder { color: #a9a9a9; } .royal-theme .fr-find-replace-layer .fr-body .fr-label-disabled { background-color: #f5f5f5; } .royal-theme .fr-find-replace-layer .fr-body .fr-close-btn { color: #333333; } .royal-theme .fr-find-replace-layer .fr-body .fr-close-btn:hover { color: #CCCCCC; } .royal-theme .fr-find-replace-layer .fr-body .fr-toggle-advanced-options { background-color: #f5f5f5; color: #333333; } .royal-theme .fr-find-replace-layer .fr-body input { border: 1px solid #CCCCCC; } .royal-theme .fr-find-replace-layer .fr-body .fr-arrow-buttons .fr-disabled { color: #a9a9a9; } .royal-theme .fr-find-replace-layer .fr-body .fr-button-group button.fr-find-btn { background-color: #FFF; color: #0098f7; border: 1px solid #0098f7; } .royal-theme .fr-find-replace-layer .fr-body .fr-button-group button.fr-replace-btn { background-color: #FFF; color: #0098f7; } .royal-theme .fr-find-replace-layer .fr-body .fr-button-group button.fr-replace-btn.fr-disabled { color: #a9a9a9; } .royal-theme .fr-find-replace-layer .fr-body .fr-button-group button.fr-replace-all-btn { background-color: #FFF; color: #0098f7; } .royal-theme .fr-find-replace-layer .fr-body .fr-button-group button.fr-replace-all-btn.fr-disabled { color: #a9a9a9; } .royal-theme .fr-find-replace-layer .fr-body .fr-findText { border: 1px solid #CCCCCC; } .royal-theme .fr-find-replace-layer .fr-body .fr-findText:focus { border: 2px solid #0098f7; } .royal-theme .fr-find-replace-layer .fr-body .fr-find-error { color: #f70000; } .royal-theme .fr-find-replace-layer .fr-body .fr-findText.error { border-color: #f70000; } .royal-theme .fr-find-replace-layer .fr-body .fr-count-indicator { color: #CCCCCC; z-index: 10; } .royal-theme .fr-find-replace-layer .fr-body .fr-toggle-advanced-options .arrow { font-weight: 100; } .royal-theme .fr-find-replace-layer .fr-body .fr-advanced-options-panel .fr-checkbox-group .fr-checkbox-row input[type="checkbox"]:focus-visible { outline: 2px solid #0098f7; } .royal-theme .fr-find-replace-layer .fr-body .fr-toggle-btn { background-color: #CCCCCC; } .royal-theme .fr-find-replace-layer .fr-body .fr-disabled svg.fr-arrow-button { fill: #a9a9a9; } .royal-theme .fr-find-replace-layer .fr-body .fr-btn-active-popup { background: #d6d6d6; } .royal-theme .fr-find-replace-highlight { background-color: #ffff00; } .royal-theme .fr-find-replace-current-highlight { background-color: #ffa500; } .royal-theme.fr-box.fr-fullscreen { top: 0; left: 0; bottom: 0; right: 0; } .royal-theme.fr-box.fr-fullscreen .fr-wrapper { background-color: #FFF; } .royal-theme.fr-box.fr-fullscreen.fr-basic.fr-top .fr-wrapper { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .royal-theme.fr-box.fr-fullscreen.fr-basic.fr-bottom .fr-wrapper { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .royal-theme.fr-box.fr-fullscreen .fr-toolbar { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .royal-theme.fr-box.fr-fullscreen .fr-second-toolbar { margin-top: 0; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .royal-theme.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tr { border: 0; } .royal-theme.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody tr { border-bottom: solid 1px #ebebeb; } .royal-theme.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody td:first-child { color: #646464; } .royal-theme .fr-element img { padding: 0 1px; } .royal-theme .fr-image-resizer { border: solid 1px #0098f7; user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .royal-theme .fr-image-resizer .fr-handler { background: #0098f7; border: solid 1px #FFF; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .royal-theme .fr-image-resizer .fr-handler { width: 12px; height: 12px; } .royal-theme .fr-image-resizer .fr-handler.fr-hnw { left: -6px; top: -6px; } .royal-theme .fr-image-resizer .fr-handler.fr-hne { right: -6px; top: -6px; } .royal-theme .fr-image-resizer .fr-handler.fr-hsw { left: -6px; bottom: -6px; } .royal-theme .fr-image-resizer .fr-handler.fr-hse { right: -6px; bottom: -6px; } @media (min-width: 1200px) { .royal-theme .fr-image-resizer .fr-handler { width: 10px; height: 10px; } .royal-theme .fr-image-resizer .fr-handler.fr-hnw { left: -5px; top: -5px; } .royal-theme .fr-image-resizer .fr-handler.fr-hne { right: -5px; top: -5px; } .royal-theme .fr-image-resizer .fr-handler.fr-hsw { left: -5px; bottom: -5px; } .royal-theme .fr-image-resizer .fr-handler.fr-hse { right: -5px; bottom: -5px; } } .royal-theme.fr-image-overlay { top: 0; left: 0; bottom: 0; right: 0; z-index: 2147483640; } .royal-theme.fr-popup .fr-image-upload-layer { border: dashed 2px #bdbdbd; padding: 25px 0; margin: 20px; } .royal-theme.fr-popup .fr-image-upload-layer:hover, .royal-theme.fr-popup .fr-image-upload-layer:has(.fr-not-empty) { background: #ebebeb; } .royal-theme.fr-popup .fr-image-upload-layer.fr-drop { background: #ebebeb; border-color: #0098f7; } .royal-theme.fr-popup .fr-image-upload-layer .fr-form { -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; top: 0; bottom: 0; left: 0; right: 0; z-index: 2147483640; } .royal-theme.fr-popup .fr-image-upload-layer .fr-form input { right: 0; top: 0; bottom: 0; margin: 0; } .royal-theme.fr-popup .fr-image-progress-bar-layer > h3 { margin: 10px 0; } .royal-theme.fr-popup .fr-image-progress-bar-layer > div.fr-loader { background: #b3e0fd; } .royal-theme.fr-popup .fr-image-progress-bar-layer > div.fr-loader span { background: #0098f7; -webkit-transition: width 0.2s ease 0s; -moz-transition: width 0.2s ease 0s; -ms-transition: width 0.2s ease 0s; -o-transition: width 0.2s ease 0s; } .royal-theme.fr-popup .fr-image-progress-bar-layer > div.fr-loader.fr-indeterminate span { top: 0; -webkit-animation: loading 2s linear infinite; -moz-animation: loading 2s linear infinite; -o-animation: loading 2s linear infinite; animation: loading 2s linear infinite; } .royal-theme .fr-uploading { -webkit-opacity: 0.4; -moz-opacity: 0.4; opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .royal-theme.fr-modal .fr-modal-head .fr-modal-head-line::after { clear: both; display: block; content: ""; height: 0; } .royal-theme.fr-modal .fr-modal-head .fr-modal-head-line .fr-modal-more { margin-top: 10px; } .royal-theme.fr-modal .fr-modal-head .fr-modal-head-line .fr-modal-more.fr-not-available { opacity: 0; width: 0; padding: 12px 0; } .royal-theme.fr-modal .fr-modal-head .fr-modal-tags { padding: 0 20px; } .royal-theme.fr-modal .fr-modal-head .fr-modal-tags a { opacity: 0; padding: 6px 12px; margin: 8px 0 8px 8px; border-radius: 32px; -moz-border-radius: 32px; -webkit-border-radius: 32px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-transition: opacity 0.2s ease 0s, background 0.2s ease 0s; -moz-transition: opacity 0.2s ease 0s, background 0.2s ease 0s; -ms-transition: opacity 0.2s ease 0s, background 0.2s ease 0s; -o-transition: opacity 0.2s ease 0s, background 0.2s ease 0s; background-color: #f5f5f5; } .royal-theme.fr-modal .fr-modal-head .fr-modal-tags a:focus { background-color: #ebebeb; } .royal-theme.fr-modal .fr-modal-head .fr-modal-tags a:hover { background-color: #ebebeb; } .royal-theme.fr-modal .fr-modal-head .fr-modal-tags a:active { background-color: #d6d6d6; } .royal-theme.fr-modal .fr-modal-head .fr-modal-tags a.fr-selected-tag { background-color: #EcF5Ff; color: #0098f7; } .royal-theme.fr-modal .fr-modal-head .fr-modal-tags a.fr-selected-tag:focus { background-color: #ebebeb; } .royal-theme.fr-modal .fr-modal-head .fr-modal-tags a.fr-selected-tag:hover { background-color: #ebebeb; } .royal-theme.fr-modal .fr-modal-head .fr-modal-tags a.fr-selected-tag:active { background-color: #d6d6d6; } .royal-theme.fr-show-tags .fr-modal-more svg path { fill: #0098f7; } .royal-themediv.fr-modal-body { -webkit-transition: background 0.2s ease 0s; -moz-transition: background 0.2s ease 0s; -ms-transition: background 0.2s ease 0s; -o-transition: background 0.2s ease 0s; } .royal-themediv.fr-modal-body .fr-preloader { margin: 50px auto; } .royal-themediv.fr-modal-body div.fr-image-list { margin: 0 20px; padding: 0; } .royal-themediv.fr-modal-body div.fr-image-list div.fr-image-container { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .royal-themediv.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::after { -webkit-opacity: 0.5; -moz-opacity: 0.5; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: opacity 0.2s ease 0s; -moz-transition: opacity 0.2s ease 0s; -ms-transition: opacity 0.2s ease 0s; -o-transition: opacity 0.2s ease 0s; background: #000; top: 0; left: 0; bottom: 0; right: 0; } .royal-themediv.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::before { color: #FFF; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } .royal-themediv.fr-modal-body div.fr-image-list div.fr-image-container.fr-empty { background: #CCCCCC; } .royal-themediv.fr-modal-body div.fr-image-list div.fr-image-container.fr-empty::after { margin: auto; top: 0; bottom: 0; left: 0; right: 0; } .royal-themediv.fr-modal-body div.fr-image-list div.fr-image-container img { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s; -moz-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s; -ms-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s; -o-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); } .royal-themediv.fr-modal-body div.fr-image-list div.fr-image-container.fr-mobile-selected img { -webkit-opacity: 0.75; -moz-opacity: 0.75; opacity: 0.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .royal-themediv.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img, .royal-themediv.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img { border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-transition: background 0.2s ease 0s, color 0.2s ease 0s; -moz-transition: background 0.2s ease 0s, color 0.2s ease 0s; -ms-transition: background 0.2s ease 0s, color 0.2s ease 0s; -o-transition: background 0.2s ease 0s, color 0.2s ease 0s; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; line-height: 40px; } .royal-themediv.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img { background: #B8312F; fill: #FFF; padding: 8px; -webkit-transform: translateY(-50%) translateX(25%); -moz-transform: translateY(-50%) translateX(25%); -ms-transform: translateY(-50%) translateX(25%); -o-transform: translateY(-50%) translateX(25%); } .royal-themediv.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img { background: #FFF; fill: #0098f7; padding: 8px; -webkit-transform: translateY(-50%) translateX(-125%); -moz-transform: translateY(-50%) translateX(-125%); -ms-transform: translateY(-50%) translateX(-125%); -o-transform: translateY(-50%) translateX(-125%); } .royal-theme.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container:hover img { -webkit-opacity: 0.75; -moz-opacity: 0.75; opacity: 0.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .royal-theme.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container:hover .fr-delete-img, .royal-theme.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container:hover .fr-insert-img { width: 40px; height: 40px; } .royal-theme.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img:hover { background: #bf4644; color: #FFF; } .royal-theme.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img:hover { background: #ebebeb; } .royal-theme .fr-line-breaker { border-top: 1px solid #0098f7; } .royal-theme .fr-line-breaker a.fr-floating-btn { left: calc(50% - (40px / 2)); top: -20px; } .royal-theme .fr-line-breaker a.fr-floating-btn svg { margin: 8px; height: 24px; width: 24px; } .royal-theme .fr-link-to-anchor-layer.fr-active .fr-input-line { padding: 16px 0 0; } .royal-theme .fr-link-to-anchor-layer.fr-active .fr-input-line .fr-error-text:hover { border-color: #f70000; } .royal-theme .fr-link-to-anchor-layer.fr-active .fr-input-text { font-weight: 400; } .royal-theme .fr-link-to-anchor-layer.fr-active .fr-input-text.fr-error-text { color: #f70000; } .royal-theme .fr-link-to-anchor-header { margin: 16px 16px 0; } .royal-theme .fr-link-to-anchor-header .fr-align-right .fr-btn { margin: 0; } .royal-theme .fr-link-to-anchor-header .fr-align-right .fr-btn .fr-svg { margin: 0; } .royal-theme .fr-edit-anchor label { color: #0098F7; text-box: auto; } .royal-theme .fr-view .fr-anchor { background-color: #333333 !important; } .royal-theme .fr-view .fr-anchor:hover { background-color: #F6D146 !important; } .royal-theme .fr-view .fr-anchor::selection { background-color: #0098F7 !important; } .royal-theme .fr-view .fr-anchor:active { background-color: #0098F7 !important; } .royal-theme .fr-markdown-view { box-sizing: inherit; } .royal-theme .fr-markdown-editor { box-sizing: inherit; } .royal-theme .fr-markdown-editor > p { margin: 0; } .royal-theme .fr-markdown-view > p { margin-top: 0; } .royal-theme .fr-markdown-view > dl { margin-top: 0; } .royal-theme .fr-markdown-view > dt { font-weight: 700; } .royal-theme .fr-markdown-view > dd { margin-left: 0; } .royal-theme .fr-markdown-view > pre code { border: 0; padding: 0; } .royal-theme .fr-markdown-view > hr { border: 0; } .royal-theme .fr-markdown-view > table { border-spacing: 0; } .royal-theme .fr-view .fr-page-break { padding: 5px 0; margin: 2px 0; } .royal-theme .fr-view .fr-page-break:after { border-bottom: 2px dashed #dddddd; } .royal-theme .fr-view .fr-page-break ::selection { background-color: #dddddd; color: #999999; } .royal-theme .fr-view .fr-page-break ::-moz-selection { background-color: #dddddd; color: #999999; } .royal-theme .fr-view .fr-page-break .fr-page-break-label { flex-shrink: 0; background: #dddddd; color: #999999; font-weight: 400; } .royal-theme .fr-view .fr-page-break .fr-page-break-line:before { left: 0; width: 0; height: 0; border-color: transparent transparent transparent #dddddd; } .royal-theme .fr-view .fr-page-break .fr-page-break-line:after { right: 0; width: 0; height: 0; border-width: 6px 10px 6px 0; border-color: transparent #dddddd transparent transparent; } @media print { .royal-theme .fr-view .fr-page-break { padding: 0; } .royal-theme .fr-view *:has(+ .fr-page-break) { margin-bottom: 0; } } .royal-theme .print.fr-view .fr-page-break-label { opacity: 0; } .royal-theme .fr-quick-insert { padding-right: 10px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .royal-theme .fr-quick-insert a.fr-floating-btn svg { margin: 8px; width: 24px; height: 24px; } .royal-theme .fr-quick-insert.fr-on a.fr-floating-btn svg { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); } .royal-theme .fr-qi-helper { padding-left: 20px; } .royal-theme .fr-qi-helper a.fr-btn.fr-floating-btn { padding: 6px 10px 10px 10px; color: #222222; background: #FFF; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); } .royal-theme .fr-qi-helper a.fr-btn.fr-floating-btn svg { fill: #222222; } .royal-theme .fr-qi-helper a.fr-btn.fr-floating-btn.fr-size-1 { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .royal-theme.fr-popup .fr-buttons.fr-tabs .fr-special-character-category { padding: 10px 15px; } .royal-theme.fr-popup .fr-buttons.fr-tabs .fr-special-character-category span { font-size: 16px; } .royal-theme.fr-popup .fr-special-character { width: 24px; height: 24px; } @media screen and (-ms-high-contrast: active) and (min-width: 768px), (-ms-high-contrast: none) and (min-width: 768px) { .royal-theme.fr-popup .fr-icon-container.fr-sc-container { width: 368px; } } .royal-theme .fr-element table td.fr-selected-cell, .royal-theme .fr-element table th.fr-selected-cell { border: 1px double #0098f7; } .royal-theme .fr-element table td, .royal-theme .fr-element table th { user-select: text; -o-user-select: text; -moz-user-select: text; -khtml-user-select: text; -webkit-user-select: text; -ms-user-select: text; } .royal-theme .fr-element .fr-no-selection table td, .royal-theme .fr-element .fr-no-selection table th { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .royal-theme .fr-table-resizer.fr-table-col-resizer div { -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; border-right: 1px solid #0098f7; } .royal-theme .fr-table-resizer.fr-table-row-resizer div { -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; border-bottom: 1px solid #0098f7; } .royal-theme .fr-no-selection { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .royal-theme.fr-popup .fr-table-size { margin: 20px; } .royal-theme.fr-popup .fr-table-size .fr-select-table-size { line-height: 0; } .royal-theme.fr-popup .fr-table-size .fr-select-table-size > span { padding: 0 4px 4px 0; } .royal-theme.fr-popup .fr-table-size .fr-select-table-size > span > span { border: 1px solid #DDD; } .royal-theme.fr-popup .fr-table-size .fr-select-table-size > span.hover > span { background: rgba(0, 152, 247, 0.3); border: solid 1px #0098f7; } .royal-theme.fr-popup .fr-table-size .fr-select-table-size .new-line::after { clear: both; display: block; content: ""; height: 0; } .royal-theme.fr-popup .fr-table-colors { padding: 20px; padding-bottom: 0; } .royal-theme .fr-cell-properties-form, .royal-theme .fr-table-properties-form { padding: 15px; width: 360px; background-color: #FFF; border-radius: 10px; } .royal-theme .fr-cell-properties-form .fr-cell-properties-section, .royal-theme .fr-cell-properties-form .fr-table-properties-section, .royal-theme .fr-table-properties-form .fr-cell-properties-section, .royal-theme .fr-table-properties-form .fr-table-properties-section { margin-bottom: 12px; } .royal-theme .fr-cell-properties-form .fr-cell-properties-section label, .royal-theme .fr-cell-properties-form .fr-table-properties-section label, .royal-theme .fr-table-properties-form .fr-cell-properties-section label, .royal-theme .fr-table-properties-form .fr-table-properties-section label { margin-bottom: 6px; font-size: 14px; } .royal-theme .fr-cell-properties-form .fr-cell-bg-container .fr-input, .royal-theme .fr-cell-properties-form .fr-table-bg-container .fr-input, .royal-theme .fr-table-properties-form .fr-cell-bg-container .fr-input, .royal-theme .fr-table-properties-form .fr-table-bg-container .fr-input { height: 36px; padding: 4px 12px; border: 1px solid #CCCCCC; border-radius: 2px 0 0 2px; font-size: 14px; } .royal-theme .fr-cell-properties-form .fr-cell-bg-container .fr-input:focus, .royal-theme .fr-cell-properties-form .fr-table-bg-container .fr-input:focus, .royal-theme .fr-table-properties-form .fr-cell-bg-container .fr-input:focus, .royal-theme .fr-table-properties-form .fr-table-bg-container .fr-input:focus { border-color: #0098f7; } .royal-theme .fr-cell-properties-form .fr-cell-bg-container .fr-input.fr-disabled, .royal-theme .fr-cell-properties-form .fr-table-bg-container .fr-input.fr-disabled, .royal-theme .fr-table-properties-form .fr-cell-bg-container .fr-input.fr-disabled, .royal-theme .fr-table-properties-form .fr-table-bg-container .fr-input.fr-disabled { background-color: #f5f5f5; color: #a9a9a9; border: 1px solid #d1d1d1; } .royal-theme .fr-cell-properties-form .fr-cell-bg-container .fr-input::placeholder, .royal-theme .fr-cell-properties-form .fr-table-bg-container .fr-input::placeholder, .royal-theme .fr-table-properties-form .fr-cell-bg-container .fr-input::placeholder, .royal-theme .fr-table-properties-form .fr-table-bg-container .fr-input::placeholder { color: #AAA; } .royal-theme .fr-cell-properties-form .fr-cell-bg-container .fr-btn-cell-bg-color, .royal-theme .fr-cell-properties-form .fr-cell-bg-container .fr-btn-table-bg-color, .royal-theme .fr-cell-properties-form .fr-cell-bg-container .fr-btn-table-border-bg-color, .royal-theme .fr-cell-properties-form .fr-table-bg-container .fr-btn-cell-bg-color, .royal-theme .fr-cell-properties-form .fr-table-bg-container .fr-btn-table-bg-color, .royal-theme .fr-cell-properties-form .fr-table-bg-container .fr-btn-table-border-bg-color, .royal-theme .fr-table-properties-form .fr-cell-bg-container .fr-btn-cell-bg-color, .royal-theme .fr-table-properties-form .fr-cell-bg-container .fr-btn-table-bg-color, .royal-theme .fr-table-properties-form .fr-cell-bg-container .fr-btn-table-border-bg-color, .royal-theme .fr-table-properties-form .fr-table-bg-container .fr-btn-cell-bg-color, .royal-theme .fr-table-properties-form .fr-table-bg-container .fr-btn-table-bg-color, .royal-theme .fr-table-properties-form .fr-table-bg-container .fr-btn-table-border-bg-color { width: 36px; height: 36px; border: 1px solid #CCCCCC; border-radius: 0 2px 2px 0; padding: 0; } .royal-theme .fr-cell-properties-form .fr-cell-bg-container .fr-btn-cell-bg-color:hover, .royal-theme .fr-cell-properties-form .fr-cell-bg-container .fr-btn-table-bg-color:hover, .royal-theme .fr-cell-properties-form .fr-cell-bg-container .fr-btn-table-border-bg-color:hover, .royal-theme .fr-cell-properties-form .fr-table-bg-container .fr-btn-cell-bg-color:hover, .royal-theme .fr-cell-properties-form .fr-table-bg-container .fr-btn-table-bg-color:hover, .royal-theme .fr-cell-properties-form .fr-table-bg-container .fr-btn-table-border-bg-color:hover, .royal-theme .fr-table-properties-form .fr-cell-bg-container .fr-btn-cell-bg-color:hover, .royal-theme .fr-table-properties-form .fr-cell-bg-container .fr-btn-table-bg-color:hover, .royal-theme .fr-table-properties-form .fr-cell-bg-container .fr-btn-table-border-bg-color:hover, .royal-theme .fr-table-properties-form .fr-table-bg-container .fr-btn-cell-bg-color:hover, .royal-theme .fr-table-properties-form .fr-table-bg-container .fr-btn-table-bg-color:hover, .royal-theme .fr-table-properties-form .fr-table-bg-container .fr-btn-table-border-bg-color:hover { background-color: #ebebeb; } .royal-theme .fr-cell-properties-form .fr-cell-bg-container .fr-btn-cell-bg-color .fr-color-preview, .royal-theme .fr-cell-properties-form .fr-cell-bg-container .fr-btn-cell-bg-color .fr-table-color-preview, .royal-theme .fr-cell-properties-form .fr-cell-bg-container .fr-btn-table-bg-color .fr-color-preview, .royal-theme .fr-cell-properties-form .fr-cell-bg-container .fr-btn-table-bg-color .fr-table-color-preview, .royal-theme .fr-cell-properties-form .fr-cell-bg-container .fr-btn-table-border-bg-color .fr-color-preview, .royal-theme .fr-cell-properties-form .fr-cell-bg-container .fr-btn-table-border-bg-color .fr-table-color-preview, .royal-theme .fr-cell-properties-form .fr-table-bg-container .fr-btn-cell-bg-color .fr-color-preview, .royal-theme .fr-cell-properties-form .fr-table-bg-container .fr-btn-cell-bg-color .fr-table-color-preview, .royal-theme .fr-cell-properties-form .fr-table-bg-container .fr-btn-table-bg-color .fr-color-preview, .royal-theme .fr-cell-properties-form .fr-table-bg-container .fr-btn-table-bg-color .fr-table-color-preview, .royal-theme .fr-cell-properties-form .fr-table-bg-container .fr-btn-table-border-bg-color .fr-color-preview, .royal-theme .fr-cell-properties-form .fr-table-bg-container .fr-btn-table-border-bg-color .fr-table-color-preview, .royal-theme .fr-table-properties-form .fr-cell-bg-container .fr-btn-cell-bg-color .fr-color-preview, .royal-theme .fr-table-properties-form .fr-cell-bg-container .fr-btn-cell-bg-color .fr-table-color-preview, .royal-theme .fr-table-properties-form .fr-cell-bg-container .fr-btn-table-bg-color .fr-color-preview, .royal-theme .fr-table-properties-form .fr-cell-bg-container .fr-btn-table-bg-color .fr-table-color-preview, .royal-theme .fr-table-properties-form .fr-cell-bg-container .fr-btn-table-border-bg-color .fr-color-preview, .r