wysiwyg-rails 4.5.1 → 4.6.0

data/app/assets/stylesheets/plugins.pkgd.css

@@ -1,9 +1,10 @@
 /*!
- * froala_editor v4.5.1 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.6.0 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2025 Froala Labs
  */
 
+@charset "UTF-8";
 .fr-clearfix::after {
   clear: both;
   display: block;
@@ -223,7 +224,7 @@ textarea.fr-code {
       left: 0;
       text-align: center;
       cursor: default; }
-    .fr-popup .fr-color-set > span:hover, .fr-popup .fr-color-set > span:focus {
+    .fr-popup .fr-color-set > span:hover, .fr-popup .fr-color-set > span:focus, .fr-popup .fr-color-set > span:not(.fr-table-cell):hover, .fr-popup .fr-color-set > span:not(.fr-table-cell):focus {
       outline: 1px solid #222222;
       z-index: 2; }
 
@@ -1707,6 +1708,225 @@ body.fr-fullscreen .fs-transforms-container {
   clip: rect(0, 0, 0, 0);
   border: 0; }
 
+.fr-find-replace-layer .fr-header {
+  padding: 15px; }
+.fr-find-replace-layer .fr-body {
+  padding: 0 15px 15px; }
+.fr-find-replace-layer .fr-drag-handle {
+  cursor: move; }
+.fr-find-replace-layer h3 {
+  margin: 0;
+  font-size: 16px;
+  text-align: left;
+  font-weight: bold; }
+.fr-find-replace-layer .fr-body .fr-input-line input.fr-disabled {
+  background-color: #f5f5f5;
+  color: #a9a9a9;
+  border: 1px solid #d1d1d1;
+  cursor: not-allowed; }
+.fr-find-replace-layer .fr-body .fr-input-line input#fr-findText::placeholder,
+.fr-find-replace-layer .fr-body .fr-input-line input#fr-replaceText::placeholder {
+  color: #a9a9a9; }
+.fr-find-replace-layer .fr-body .fr-input-line.fr-find-field {
+  width: 227px;
+  padding-bottom: 5px; }
+.fr-find-replace-layer .fr-body .fr-input-line.fr-replace-field {
+  top: -8px;
+  padding-bottom: 0px; }
+.fr-find-replace-layer .fr-body .fr-label-disabled {
+  background-color: #f5f5f5; }
+.fr-find-replace-layer .fr-body .fr-close-btn {
+  position: absolute;
+  top: 2px;
+  right: 10px;
+  font-size: 25px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #333333; }
+.fr-find-replace-layer .fr-body .fr-close-btn:hover {
+  color: #CCCCCC; }
+.fr-find-replace-layer .fr-body .fr-toggle-advanced-options {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 0px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: bold;
+  transition: background-color 0.3s ease;
+  width: auto;
+  background: none;
+  color: #333333; }
+.fr-find-replace-layer .fr-body input {
+  padding: 8px;
+  font-size: 14px;
+  border: 1px solid #CCCCCC;
+  border-radius: 4px;
+  margin-left: 0px; }
+.fr-find-replace-layer .fr-body .fr-input-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  /* Ensures proper layout for container */ }
+.fr-find-replace-layer .fr-body .fr-arrow-buttons {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  margin-left: 10px;
+  /* Add margin to separate from input field */
+  margin-top: 10px;
+  /* Align with input field */ }
+  .fr-find-replace-layer .fr-body .fr-arrow-buttons button {
+    border: none;
+    background: none;
+    cursor: pointer;
+    padding: 2px 4px;
+    margin-bottom: 12px;
+    font-size: 12px; }
+  .fr-find-replace-layer .fr-body .fr-arrow-buttons .fr-disabled {
+    pointer-events: none;
+    cursor: not-allowed;
+    color: #a9a9a9; }
+.fr-find-replace-layer .fr-body .fr-button-group {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  margin-top: 10px; }
+  .fr-find-replace-layer .fr-body .fr-button-group button.fr-find-btn {
+    background-color: #FFF;
+    color: #0098f7;
+    margin-top: 10px;
+    border: 1px solid #0098f7; }
+  .fr-find-replace-layer .fr-body .fr-button-group button.fr-replace-btn {
+    background-color: #FFF;
+    color: #0098f7;
+    font-size: 14px;
+    margin-top: 10px; }
+  .fr-find-replace-layer .fr-body .fr-button-group button.fr-replace-btn.fr-disabled {
+    pointer-events: none;
+    cursor: not-allowed;
+    color: #a9a9a9; }
+  .fr-find-replace-layer .fr-body .fr-button-group button.fr-replace-all-btn {
+    background-color: #FFF;
+    color: #0098f7;
+    font-size: 14px;
+    margin-top: 10px; }
+  .fr-find-replace-layer .fr-body .fr-button-group button.fr-replace-all-btn.fr-disabled {
+    pointer-events: none;
+    cursor: not-allowed;
+    color: #a9a9a9; }
+.fr-find-replace-layer .fr-body button {
+  padding: 8px 12px;
+  font-size: 14px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer; }
+.fr-find-replace-layer .fr-body .fr-input-container {
+  position: relative;
+  display: flex;
+  align-items: center; }
+.fr-find-replace-layer .fr-body #fr-replaceText {
+  width: 77%; }
+.fr-find-replace-layer .fr-body #fr-findText {
+  position: relative;
+  padding-right: 40px;
+  /* Create space for the count indicator */
+  font-size: 14px;
+  border: 1px solid #CCCCCC;
+  border-radius: 4px; }
+.fr-find-replace-layer .fr-body #fr-findText:focus {
+  border: 2px solid #0098f7; }
+.fr-find-replace-layer .fr-body .fr-find-error {
+  color: #f70000;
+  font-size: 12px;
+  display: none;
+  max-width: 300px;
+  overflow-wrap: break-word; }
+.fr-find-replace-layer .fr-body #fr-findText.error {
+  border-color: #f70000; }
+.fr-find-replace-layer .fr-body .fr-count-indicator {
+  position: absolute;
+  right: 80px;
+  top: 57%;
+  /* Center vertically */
+  transform: translateY(-50%);
+  color: #CCCCCC;
+  font-size: 12px;
+  pointer-events: none;
+  visibility: hidden;
+  /* Hidden by default */
+  z-index: 10; }
+.fr-find-replace-layer .fr-body .fr-toggle-advanced-options .arrow {
+  font-size: 15px;
+  transition: transform 0.3s ease;
+  margin-right: 10px;
+  font-size: 14px;
+  margin-right: 4px;
+  margin-top: 2px;
+  font-weight: 100; }
+.fr-find-replace-layer .fr-body .fr-advanced-options-panel {
+  border-radius: 4px; }
+  .fr-find-replace-layer .fr-body .fr-advanced-options-panel .fr-checkbox-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px; }
+    .fr-find-replace-layer .fr-body .fr-advanced-options-panel .fr-checkbox-group .fr-checkbox-row {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 14px; }
+      .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;
+        outline-offset: 2px; }
+.fr-find-replace-layer .fr-body .fr-toggle-btn {
+  width: 40px;
+  height: 20px;
+  background-color: #CCCCCC;
+  border-radius: 10px;
+  position: relative;
+  cursor: pointer;
+  margin-right: 10px;
+  display: inline-block;
+  vertical-align: middle; }
+.fr-find-replace-layer .fr-body .fr-arrow {
+  margin-right: 5px;
+  font-size: 12px;
+  margin-top: 1px;
+  position: absolute;
+  right: 15px; }
+.fr-find-replace-layer .fr-body .fr-disabled svg.fr-arrow-button {
+  fill: #a9a9a9; }
+.fr-find-replace-layer .fr-body .fr-arrow-button {
+  width: 12px;
+  height: 12px; }
+.fr-find-replace-layer .fr-body .fr-btn-active-popup {
+  background: #d6d6d6; }
+
+.fr-find-replace-highlight {
+  background-color: #ffff00; }
+
+.fr-find-replace-current-highlight {
+  background-color: #ffa500; }
+
+.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; }
+
 body.fr-fullscreen {
   overflow: hidden;
   height: 100%;
@@ -1913,7 +2133,7 @@ body.fr-fullscreen {
   letter-spacing: 1px;
   line-height: 140%;
   text-align: center; }
-  .fr-popup .fr-image-upload-layer:hover {
+  .fr-popup .fr-image-upload-layer:hover, .fr-popup .fr-image-upload-layer:has(.fr-not-empty) {
     background: #ebebeb; }
   .fr-popup .fr-image-upload-layer.fr-drop {
     background: #ebebeb;
@@ -1939,7 +2159,7 @@ body.fr-fullscreen {
       right: 0;
       top: 0;
       bottom: 0;
-      width: 500%;
+      width: 100%;
       height: 100%;
       margin: 0;
       font-size: 400px; }
@@ -2534,16 +2754,12 @@ div.fr-modal-body {
 
 .fr-element table td.fr-selected-cell, .fr-element table th.fr-selected-cell {
   border: 1px double #0098f7;
-  position: relative; }
-.fr-element table td.fr-selected-cell:after, .fr-element table th.fr-selected-cell:after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 100, 255, 0.15);
-  pointer-events: none; }
+  position: relative;
+  /**
+  Removed the ::after, as it blocks the browser’s ability to correctly place the caret (text cursor) mainly in firefox.
+  provided the background color directly to the selected cell.
+  */
+  background-color: rgba(0, 100, 255, 0.15); }
 .fr-element table td, .fr-element table th {
   user-select: text;
   -o-user-select: text;
@@ -2584,7 +2800,7 @@ div.fr-modal-body {
 .fr-table-selector {
   display: block;
   position: absolute;
-  z-index: 9999;
+  z-index: 3;
   width: 16px;
   height: 16px;
   padding: 3px;
@@ -2601,24 +2817,26 @@ div.fr-modal-body {
 .fr-table-selector-active {
   opacity: 1;
   visibility: visible;
-  border: #fdcf00 2px solid; }
+  border: #F6D146 2px solid;
+  background-color: #F6D146; }
   .fr-table-selector-active a > svg {
-    color: #fdcf00; }
+    color: #F6D146; }
 
 .fr-table-selector-active-selected {
-  border: #0d65ff 2px solid; }
+  border: #0098F7 2px solid;
+  background-color: #0098F7; }
   .fr-table-selector-active-selected a > svg {
-    color: #0d65ff; }
+    color: #0098F7; }
 
 .fr-table-selector-inactive {
   opacity: 0;
   visibility: hidden; }
 
 .fr-view .fr-table-selection-hover {
-  outline: #fdcf00 2px solid; }
+  outline: #F6D146 2px solid; }
 
 .fr-view .fr-table-selected {
-  outline: #0d65ff 2px solid;
+  outline: #0098F7 2px solid;
   caret-color: transparent; }
 
 .fr-popup .fr-table-size {
@@ -2665,6 +2883,276 @@ div.fr-modal-body {
   z-index: 9999;
   white-space: nowrap; }
 
+.fr-view .fr-table-selected *::selection {
+  background: transparent; }
+
+.fr-view .fr-table-selected *::-moz-selection {
+  background: transparent; }
+
+.fr-cell-properties-form, .fr-table-properties-form {
+  padding: 15px;
+  width: 360px;
+  max-width: 100%;
+  background-color: #FFF;
+  border-radius: 10px; }
+  .fr-cell-properties-form .fr-cell-properties-section, .fr-cell-properties-form .fr-table-properties-section, .fr-table-properties-form .fr-cell-properties-section, .fr-table-properties-form .fr-table-properties-section {
+    margin-bottom: 12px; }
+    .fr-cell-properties-form .fr-cell-properties-section label, .fr-cell-properties-form .fr-table-properties-section label, .fr-table-properties-form .fr-cell-properties-section label, .fr-table-properties-form .fr-table-properties-section label {
+      font-weight: bold;
+      display: block;
+      margin-bottom: 6px;
+      font-size: 14px; }
+  .fr-cell-properties-form .fr-cell-bg-container, .fr-cell-properties-form .fr-table-bg-container, .fr-table-properties-form .fr-cell-bg-container, .fr-table-properties-form .fr-table-bg-container {
+    display: flex;
+    align-items: center;
+    position: relative;
+    width: 100%; }
+    .fr-cell-properties-form .fr-cell-bg-container .fr-input, .fr-cell-properties-form .fr-table-bg-container .fr-input, .fr-table-properties-form .fr-cell-bg-container .fr-input, .fr-table-properties-form .fr-table-bg-container .fr-input {
+      flex: 1;
+      height: 36px;
+      padding: 4px 12px;
+      border: 1px solid #CCCCCC;
+      border-radius: 2px 0 0 2px;
+      box-sizing: border-box;
+      font-size: 14px; }
+      .fr-cell-properties-form .fr-cell-bg-container .fr-input:focus, .fr-cell-properties-form .fr-table-bg-container .fr-input:focus, .fr-table-properties-form .fr-cell-bg-container .fr-input:focus, .fr-table-properties-form .fr-table-bg-container .fr-input:focus {
+        outline: none;
+        border-color: #0098f7; }
+      .fr-cell-properties-form .fr-cell-bg-container .fr-input.fr-disabled, .fr-cell-properties-form .fr-table-bg-container .fr-input.fr-disabled, .fr-table-properties-form .fr-cell-bg-container .fr-input.fr-disabled, .fr-table-properties-form .fr-table-bg-container .fr-input.fr-disabled {
+        background-color: #f5f5f5;
+        color: #a9a9a9;
+        border: 1px solid #d1d1d1;
+        cursor: not-allowed; }
+      .fr-cell-properties-form .fr-cell-bg-container .fr-input::placeholder, .fr-cell-properties-form .fr-table-bg-container .fr-input::placeholder, .fr-table-properties-form .fr-cell-bg-container .fr-input::placeholder, .fr-table-properties-form .fr-table-bg-container .fr-input::placeholder {
+        color: #AAA; }
+    .fr-cell-properties-form .fr-cell-bg-container .fr-btn-cell-bg-color, .fr-cell-properties-form .fr-cell-bg-container .fr-btn-table-bg-color, .fr-cell-properties-form .fr-cell-bg-container .fr-btn-table-border-bg-color, .fr-cell-properties-form .fr-table-bg-container .fr-btn-cell-bg-color, .fr-cell-properties-form .fr-table-bg-container .fr-btn-table-bg-color, .fr-cell-properties-form .fr-table-bg-container .fr-btn-table-border-bg-color, .fr-table-properties-form .fr-cell-bg-container .fr-btn-cell-bg-color, .fr-table-properties-form .fr-cell-bg-container .fr-btn-table-bg-color, .fr-table-properties-form .fr-cell-bg-container .fr-btn-table-border-bg-color, .fr-table-properties-form .fr-table-bg-container .fr-btn-cell-bg-color, .fr-table-properties-form .fr-table-bg-container .fr-btn-table-bg-color, .fr-table-properties-form .fr-table-bg-container .fr-btn-table-border-bg-color {
+      width: 36px;
+      height: 36px;
+      border: 1px solid #CCCCCC;
+      border-left: none;
+      border-radius: 0 2px 2px 0;
+      position: relative;
+      padding: 0;
+      background: transparent;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      margin: -1px 0 0 -1px; }
+      .fr-cell-properties-form .fr-cell-bg-container .fr-btn-cell-bg-color:hover, .fr-cell-properties-form .fr-cell-bg-container .fr-btn-table-bg-color:hover, .fr-cell-properties-form .fr-cell-bg-container .fr-btn-table-border-bg-color:hover, .fr-cell-properties-form .fr-table-bg-container .fr-btn-cell-bg-color:hover, .fr-cell-properties-form .fr-table-bg-container .fr-btn-table-bg-color:hover, .fr-cell-properties-form .fr-table-bg-container .fr-btn-table-border-bg-color:hover, .fr-table-properties-form .fr-cell-bg-container .fr-btn-cell-bg-color:hover, .fr-table-properties-form .fr-cell-bg-container .fr-btn-table-bg-color:hover, .fr-table-properties-form .fr-cell-bg-container .fr-btn-table-border-bg-color:hover, .fr-table-properties-form .fr-table-bg-container .fr-btn-cell-bg-color:hover, .fr-table-properties-form .fr-table-bg-container .fr-btn-table-bg-color:hover, .fr-table-properties-form .fr-table-bg-container .fr-btn-table-border-bg-color:hover {
+        background-color: #ebebeb; }
+      .fr-cell-properties-form .fr-cell-bg-container .fr-btn-cell-bg-color .fr-color-preview, .fr-cell-properties-form .fr-cell-bg-container .fr-btn-cell-bg-color .fr-table-color-preview, .fr-cell-properties-form .fr-cell-bg-container .fr-btn-table-bg-color .fr-color-preview, .fr-cell-properties-form .fr-cell-bg-container .fr-btn-table-bg-color .fr-table-color-preview, .fr-cell-properties-form .fr-cell-bg-container .fr-btn-table-border-bg-color .fr-color-preview, .fr-cell-properties-form .fr-cell-bg-container .fr-btn-table-border-bg-color .fr-table-color-preview, .fr-cell-properties-form .fr-table-bg-container .fr-btn-cell-bg-color .fr-color-preview, .fr-cell-properties-form .fr-table-bg-container .fr-btn-cell-bg-color .fr-table-color-preview, .fr-cell-properties-form .fr-table-bg-container .fr-btn-table-bg-color .fr-color-preview, .fr-cell-properties-form .fr-table-bg-container .fr-btn-table-bg-color .fr-table-color-preview, .fr-cell-properties-form .fr-table-bg-container .fr-btn-table-border-bg-color .fr-color-preview, .fr-cell-properties-form .fr-table-bg-container .fr-btn-table-border-bg-color .fr-table-color-preview, .fr-table-properties-form .fr-cell-bg-container .fr-btn-cell-bg-color .fr-color-preview, .fr-table-properties-form .fr-cell-bg-container .fr-btn-cell-bg-color .fr-table-color-preview, .fr-table-properties-form .fr-cell-bg-container .fr-btn-table-bg-color .fr-color-preview, .fr-table-properties-form .fr-cell-bg-container .fr-btn-table-bg-color .fr-table-color-preview, .fr-table-properties-form .fr-cell-bg-container .fr-btn-table-border-bg-color .fr-color-preview, .fr-table-properties-form .fr-cell-bg-container .fr-btn-table-border-bg-color .fr-table-color-preview, .fr-table-properties-form .fr-table-bg-container .fr-btn-cell-bg-color .fr-color-preview, .fr-table-properties-form .fr-table-bg-container .fr-btn-cell-bg-color .fr-table-color-preview, .fr-table-properties-form .fr-table-bg-container .fr-btn-table-bg-color .fr-color-preview, .fr-table-properties-form .fr-table-bg-container .fr-btn-table-bg-color .fr-table-color-preview, .fr-table-properties-form .fr-table-bg-container .fr-btn-table-border-bg-color .fr-color-preview, .fr-table-properties-form .fr-table-bg-container .fr-btn-table-border-bg-color .fr-table-color-preview {
+        width: 20px;
+        height: 20px;
+        border: 1px solid #999999;
+        border-radius: 2px;
+        position: relative;
+        overflow: hidden; }
+        .fr-cell-properties-form .fr-cell-bg-container .fr-btn-cell-bg-color .fr-color-preview .fr-color-preview-indicator, .fr-cell-properties-form .fr-cell-bg-container .fr-btn-cell-bg-color .fr-color-preview .fr-table-color-preview-indicator, .fr-cell-properties-form .fr-cell-bg-container .fr-btn-cell-bg-color .fr-table-color-preview .fr-color-preview-indicator, .fr-cell-properties-form .fr-cell-bg-container .fr-btn-cell-bg-color .fr-table-color-preview .fr-table-color-preview-indicator, .fr-cell-properties-form .fr-cell-bg-container .fr-btn-table-bg-color .fr-color-preview .fr-color-preview-indicator, .fr-cell-properties-form .fr-cell-bg-container .fr-btn-table-bg-color .fr-color-preview .fr-table-color-preview-indicator, .fr-cell-properties-form .fr-cell-bg-container .fr-btn-table-bg-color .fr-table-color-preview .fr-color-preview-indicator, .fr-cell-properties-form .fr-cell-bg-container .fr-btn-table-bg-color .fr-table-color-preview .fr-table-color-preview-indicator, .fr-cell-properties-form .fr-cell-bg-container .fr-btn-table-border-bg-color .fr-color-preview .fr-color-preview-indicator, .fr-cell-properties-form .fr-cell-bg-container .fr-btn-table-border-bg-color .fr-color-preview .fr-table-color-preview-indicator, .fr-cell-properties-form .fr-cell-bg-container .fr-btn-table-border-bg-color .fr-table-color-preview .fr-color-preview-indicator, .fr-cell-properties-form .fr-cell-bg-container .fr-btn-table-border-bg-color .fr-table-color-preview .fr-table-color-preview-indicator, .fr-cell-properties-form .fr-table-bg-container .fr-btn-cell-bg-color .fr-color-preview .fr-color-preview-indicator, .fr-cell-properties-form .fr-table-bg-container .fr-btn-cell-bg-color .fr-color-preview .fr-table-color-preview-indicator, .fr-cell-properties-form .fr-table-bg-container .fr-btn-cell-bg-color .fr-table-color-preview .fr-color-preview-indicator, .fr-cell-properties-form .fr-table-bg-container .fr-btn-cell-bg-color .fr-table-color-preview .fr-table-color-preview-indicator, .fr-cell-properties-form .fr-table-bg-container .fr-btn-table-bg-color .fr-color-preview .fr-color-preview-indicator, .fr-cell-properties-form .fr-table-bg-container .fr-btn-table-bg-color .fr-color-preview .fr-table-color-preview-indicator, .fr-cell-properties-form .fr-table-bg-container .fr-btn-table-bg-color .fr-table-color-preview .fr-color-preview-indicator, .fr-cell-properties-form .fr-table-bg-container .fr-btn-table-bg-color .fr-table-color-preview .fr-table-color-preview-indicator, .fr-cell-properties-form .fr-table-bg-container .fr-btn-table-border-bg-color .fr-color-preview .fr-color-preview-indicator, .fr-cell-properties-form .fr-table-bg-container .fr-btn-table-border-bg-color .fr-color-preview .fr-table-color-preview-indicator, .fr-cell-properties-form .fr-table-bg-container .fr-btn-table-border-bg-color .fr-table-color-preview .fr-color-preview-indicator, .fr-cell-properties-form .fr-table-bg-container .fr-btn-table-border-bg-color .fr-table-color-preview .fr-table-color-preview-indicator, .fr-table-properties-form .fr-cell-bg-container .fr-btn-cell-bg-color .fr-color-preview .fr-color-preview-indicator, .fr-table-properties-form .fr-cell-bg-container .fr-btn-cell-bg-color .fr-color-preview .fr-table-color-preview-indicator, .fr-table-properties-form .fr-cell-bg-container .fr-btn-cell-bg-color .fr-table-color-preview .fr-color-preview-indicator, .fr-table-properties-form .fr-cell-bg-container .fr-btn-cell-bg-color .fr-table-color-preview .fr-table-color-preview-indicator, .fr-table-properties-form .fr-cell-bg-container .fr-btn-table-bg-color .fr-color-preview .fr-color-preview-indicator, .fr-table-properties-form .fr-cell-bg-container .fr-btn-table-bg-color .fr-color-preview .fr-table-color-preview-indicator, .fr-table-properties-form .fr-cell-bg-container .fr-btn-table-bg-color .fr-table-color-preview .fr-color-preview-indicator, .fr-table-properties-form .fr-cell-bg-container .fr-btn-table-bg-color .fr-table-color-preview .fr-table-color-preview-indicator, .fr-table-properties-form .fr-cell-bg-container .fr-btn-table-border-bg-color .fr-color-preview .fr-color-preview-indicator, .fr-table-properties-form .fr-cell-bg-container .fr-btn-table-border-bg-color .fr-color-preview .fr-table-color-preview-indicator, .fr-table-properties-form .fr-cell-bg-container .fr-btn-table-border-bg-color .fr-table-color-preview .fr-color-preview-indicator, .fr-table-properties-form .fr-cell-bg-container .fr-btn-table-border-bg-color .fr-table-color-preview .fr-table-color-preview-indicator, .fr-table-properties-form .fr-table-bg-container .fr-btn-cell-bg-color .fr-color-preview .fr-color-preview-indicator, .fr-table-properties-form .fr-table-bg-container .fr-btn-cell-bg-color .fr-color-preview .fr-table-color-preview-indicator, .fr-table-properties-form .fr-table-bg-container .fr-btn-cell-bg-color .fr-table-color-preview .fr-color-preview-indicator, .fr-table-properties-form .fr-table-bg-container .fr-btn-cell-bg-color .fr-table-color-preview .fr-table-color-preview-indicator, .fr-table-properties-form .fr-table-bg-container .fr-btn-table-bg-color .fr-color-preview .fr-color-preview-indicator, .fr-table-properties-form .fr-table-bg-container .fr-btn-table-bg-color .fr-color-preview .fr-table-color-preview-indicator, .fr-table-properties-form .fr-table-bg-container .fr-btn-table-bg-color .fr-table-color-preview .fr-color-preview-indicator, .fr-table-properties-form .fr-table-bg-container .fr-btn-table-bg-color .fr-table-color-preview .fr-table-color-preview-indicator, .fr-table-properties-form .fr-table-bg-container .fr-btn-table-border-bg-color .fr-color-preview .fr-color-preview-indicator, .fr-table-properties-form .fr-table-bg-container .fr-btn-table-border-bg-color .fr-color-preview .fr-table-color-preview-indicator, .fr-table-properties-form .fr-table-bg-container .fr-btn-table-border-bg-color .fr-table-color-preview .fr-color-preview-indicator, .fr-table-properties-form .fr-table-bg-container .fr-btn-table-border-bg-color .fr-table-color-preview .fr-table-color-preview-indicator {
+          position: absolute;
+          background: red;
+          width: 28px;
+          height: 1px;
+          top: 9px;
+          left: -4px;
+          transform: rotate(-45deg);
+          transform-origin: center; }
+  .fr-cell-properties-form .fr-cell-dimensions-container, .fr-table-properties-form .fr-cell-dimensions-container {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 12px; }
+    .fr-cell-properties-form .fr-cell-dimensions-container label, .fr-table-properties-form .fr-cell-dimensions-container label {
+      font-weight: bold;
+      font-size: 14px; }
+    .fr-cell-properties-form .fr-cell-dimensions-container .fr-cell-dimension-section, .fr-table-properties-form .fr-cell-dimensions-container .fr-cell-dimension-section {
+      flex: 1; }
+      .fr-cell-properties-form .fr-cell-dimensions-container .fr-cell-dimension-section .fr-dimension-inputs, .fr-table-properties-form .fr-cell-dimensions-container .fr-cell-dimension-section .fr-dimension-inputs {
+        display: flex;
+        gap: 6px;
+        align-items: center; }
+        .fr-cell-properties-form .fr-cell-dimensions-container .fr-cell-dimension-section .fr-dimension-inputs input, .fr-table-properties-form .fr-cell-dimensions-container .fr-cell-dimension-section .fr-dimension-inputs input {
+          width: 90px;
+          padding: 8px;
+          border: 1px solid #CCCCCC;
+          border-radius: 2px;
+          font-size: 14px; }
+          .fr-cell-properties-form .fr-cell-dimensions-container .fr-cell-dimension-section .fr-dimension-inputs input:focus, .fr-table-properties-form .fr-cell-dimensions-container .fr-cell-dimension-section .fr-dimension-inputs input:focus {
+            outline: none;
+            border-color: #0098f7; }
+          .fr-cell-properties-form .fr-cell-dimensions-container .fr-cell-dimension-section .fr-dimension-inputs input.fr-disabled, .fr-table-properties-form .fr-cell-dimensions-container .fr-cell-dimension-section .fr-dimension-inputs input.fr-disabled {
+            background-color: #f5f5f5;
+            color: #a9a9a9;
+            border: 1px solid #d1d1d1;
+            cursor: not-allowed; }
+          .fr-cell-properties-form .fr-cell-dimensions-container .fr-cell-dimension-section .fr-dimension-inputs input::placeholder, .fr-table-properties-form .fr-cell-dimensions-container .fr-cell-dimension-section .fr-dimension-inputs input::placeholder {
+            color: #AAA; }
+        .fr-cell-properties-form .fr-cell-dimensions-container .fr-cell-dimension-section .fr-dimension-inputs .fr-dimension-separator, .fr-table-properties-form .fr-cell-dimensions-container .fr-cell-dimension-section .fr-dimension-inputs .fr-dimension-separator {
+          line-height: 1;
+          font-size: 16px; }
+    .fr-cell-properties-form .fr-cell-dimensions-container .fr-cell-padding-section, .fr-table-properties-form .fr-cell-dimensions-container .fr-cell-padding-section {
+      flex: 1; }
+      .fr-cell-properties-form .fr-cell-dimensions-container .fr-cell-padding-section label, .fr-table-properties-form .fr-cell-dimensions-container .fr-cell-padding-section label {
+        font-weight: bold;
+        font-size: 14px; }
+      .fr-cell-properties-form .fr-cell-dimensions-container .fr-cell-padding-section input, .fr-table-properties-form .fr-cell-dimensions-container .fr-cell-padding-section input {
+        width: 90px;
+        padding: 8px;
+        border: 1px solid #CCCCCC;
+        border-radius: 2px;
+        font-size: 14px; }
+        .fr-cell-properties-form .fr-cell-dimensions-container .fr-cell-padding-section input:focus, .fr-table-properties-form .fr-cell-dimensions-container .fr-cell-padding-section input:focus {
+          outline: none;
+          border-color: #0098f7; }
+        .fr-cell-properties-form .fr-cell-dimensions-container .fr-cell-padding-section input.fr-disabled, .fr-table-properties-form .fr-cell-dimensions-container .fr-cell-padding-section input.fr-disabled {
+          background-color: #f5f5f5;
+          color: #a9a9a9;
+          border: 1px solid #d1d1d1;
+          cursor: not-allowed; }
+        .fr-cell-properties-form .fr-cell-dimensions-container .fr-cell-padding-section input::placeholder, .fr-table-properties-form .fr-cell-dimensions-container .fr-cell-padding-section input::placeholder {
+          color: #AAA; }
+  .fr-cell-properties-form .fr-cell-properties-buttons, .fr-cell-properties-form .fr-table-properties-buttons, .fr-table-properties-form .fr-cell-properties-buttons, .fr-table-properties-form .fr-table-properties-buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 20px; }
+    .fr-cell-properties-form .fr-cell-properties-buttons .fr-cancel-button, .fr-cell-properties-form .fr-cell-properties-buttons .fr-save-button, .fr-cell-properties-form .fr-table-properties-buttons .fr-cancel-button, .fr-cell-properties-form .fr-table-properties-buttons .fr-save-button, .fr-table-properties-form .fr-cell-properties-buttons .fr-cancel-button, .fr-table-properties-form .fr-cell-properties-buttons .fr-save-button, .fr-table-properties-form .fr-table-properties-buttons .fr-cancel-button, .fr-table-properties-form .fr-table-properties-buttons .fr-save-button {
+      font-size: 14px;
+      cursor: pointer;
+      padding: 8px 12px;
+      font-weight: 500;
+      height: 36px;
+      line-height: 20px;
+      box-sizing: border-box; }
+      .fr-cell-properties-form .fr-cell-properties-buttons .fr-cancel-button.fr-disabled, .fr-cell-properties-form .fr-cell-properties-buttons .fr-save-button.fr-disabled, .fr-cell-properties-form .fr-table-properties-buttons .fr-cancel-button.fr-disabled, .fr-cell-properties-form .fr-table-properties-buttons .fr-save-button.fr-disabled, .fr-table-properties-form .fr-cell-properties-buttons .fr-cancel-button.fr-disabled, .fr-table-properties-form .fr-cell-properties-buttons .fr-save-button.fr-disabled, .fr-table-properties-form .fr-table-properties-buttons .fr-cancel-button.fr-disabled, .fr-table-properties-form .fr-table-properties-buttons .fr-save-button.fr-disabled {
+        pointer-events: none;
+        cursor: not-allowed;
+        color: #a9a9a9; }
+    .fr-cell-properties-form .fr-cell-properties-buttons .fr-cancel-button, .fr-cell-properties-form .fr-table-properties-buttons .fr-cancel-button, .fr-table-properties-form .fr-cell-properties-buttons .fr-cancel-button, .fr-table-properties-form .fr-table-properties-buttons .fr-cancel-button {
+      background: none;
+      border: none;
+      color: #0098f7;
+      border-radius: 2px; }
+      .fr-cell-properties-form .fr-cell-properties-buttons .fr-cancel-button:hover, .fr-cell-properties-form .fr-table-properties-buttons .fr-cancel-button:hover, .fr-table-properties-form .fr-cell-properties-buttons .fr-cancel-button:hover, .fr-table-properties-form .fr-table-properties-buttons .fr-cancel-button:hover {
+        text-decoration: underline; }
+    .fr-cell-properties-form .fr-cell-properties-buttons .fr-save-button, .fr-cell-properties-form .fr-table-properties-buttons .fr-save-button, .fr-table-properties-form .fr-cell-properties-buttons .fr-save-button, .fr-table-properties-form .fr-table-properties-buttons .fr-save-button {
+      background-color: #FFF;
+      border: 1px solid #0098f7;
+      color: #0098f7;
+      border-radius: 2px; }
+      .fr-cell-properties-form .fr-cell-properties-buttons .fr-save-button:hover, .fr-cell-properties-form .fr-table-properties-buttons .fr-save-button:hover, .fr-table-properties-form .fr-cell-properties-buttons .fr-save-button:hover, .fr-table-properties-form .fr-table-properties-buttons .fr-save-button:hover {
+        background-color: #ebebeb; }
+  .fr-cell-properties-form .fr-error, .fr-table-properties-form .fr-error {
+    color: red;
+    font-size: 12px;
+    padding-bottom: 5px;
+    display: none; }
+  .fr-cell-properties-form input.fr-error, .fr-table-properties-form input.fr-error {
+    border-color: red;
+    display: block; }
+
+.fr-table-properties-section label:not(:first-child) {
+  margin-top: 15px; }
+.fr-table-properties-section .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a {
+  line-height: 170%; }
+
+.fr-table-bg-container .fr-input-line, .fr-table-border-container .fr-input-line, .fr-table-dimentions-container .fr-input-line, .fr-table-style-container .fr-input-line {
+  padding: 0px;
+  width: 100%; }
+  .fr-table-bg-container .fr-input-line input[type="text"], .fr-table-border-container .fr-input-line input[type="text"], .fr-table-dimentions-container .fr-input-line input[type="text"], .fr-table-style-container .fr-input-line input[type="text"] {
+    height: 36px;
+    border-color: #CCCCCC; }
+  .fr-table-bg-container .fr-input-line input + label, .fr-table-border-container .fr-input-line input + label, .fr-table-dimentions-container .fr-input-line input + label, .fr-table-style-container .fr-input-line input + label {
+    top: -5px;
+    font-weight: 100; }
+  .fr-table-bg-container .fr-input-line input.fr-not-empty + label, .fr-table-border-container .fr-input-line input.fr-not-empty + label, .fr-table-dimentions-container .fr-input-line input.fr-not-empty + label, .fr-table-style-container .fr-input-line input.fr-not-empty + label {
+    top: -20px;
+    font-weight: 100; }
+  .fr-table-bg-container .fr-input-line #fr-table-border-style, .fr-table-border-container .fr-input-line #fr-table-border-style, .fr-table-dimentions-container .fr-input-line #fr-table-border-style, .fr-table-style-container .fr-input-line #fr-table-border-style {
+    width: 90%;
+    height: 36px;
+    border-color: #CCCCCC;
+    border-radius: 2px; }
+  .fr-table-bg-container .fr-input-line .fr-field-lable, .fr-table-border-container .fr-input-line .fr-field-lable, .fr-table-dimentions-container .fr-input-line .fr-field-lable, .fr-table-style-container .fr-input-line .fr-field-lable {
+    position: absolute;
+    font-size: 11px;
+    padding: 0px 3px;
+    margin: -6px 5px;
+    background: #FFF;
+    font-weight: 100;
+    color: dimgray;
+    z-index: 3; }
+  .fr-table-bg-container .fr-input-line .fr-buttons, .fr-table-border-container .fr-input-line .fr-buttons, .fr-table-dimentions-container .fr-input-line .fr-buttons, .fr-table-style-container .fr-input-line .fr-buttons {
+    padding: 0px; }
+  .fr-table-bg-container .fr-input-line .fr-command.fr-btn.fr-dropdown:after, .fr-table-border-container .fr-input-line .fr-command.fr-btn.fr-dropdown:after, .fr-table-dimentions-container .fr-input-line .fr-command.fr-btn.fr-dropdown:after, .fr-table-style-container .fr-input-line .fr-command.fr-btn.fr-dropdown:after {
+    right: 10px; }
+  .fr-table-bg-container .fr-input-line .fr-command.fr-btn.fr-dropdown.fr-active, .fr-table-border-container .fr-input-line .fr-command.fr-btn.fr-dropdown.fr-active, .fr-table-dimentions-container .fr-input-line .fr-command.fr-btn.fr-dropdown.fr-active, .fr-table-style-container .fr-input-line .fr-command.fr-btn.fr-dropdown.fr-active {
+    background: transparent; }
+  .fr-table-bg-container .fr-input-line .fr-dropdown, .fr-table-border-container .fr-input-line .fr-dropdown, .fr-table-dimentions-container .fr-input-line .fr-dropdown, .fr-table-style-container .fr-input-line .fr-dropdown {
+    margin: 0px;
+    background: transparent;
+    border: 1px solid #CCCCCC;
+    margin-right: 10px;
+    height: 36px;
+    border-radius: 2px; }
+
+.fr-table-border-container .fr-dropdown-wrapper {
+  width: 120px; }
+
+.fr-table-alignment-section {
+  margin-left: 10px; }
+
+.fr-table-border-container, .fr-table-dimentions-container, .fr-table-dimentions-section {
+  display: flex;
+  margin-top: 10px; }
+  .fr-table-border-container .fr-dimension-separator, .fr-table-dimentions-container .fr-dimension-separator, .fr-table-dimentions-section .fr-dimension-separator {
+    margin: 10px 5px; }
+  .fr-table-border-container .fr-btn-table-border-bg-color, .fr-table-dimentions-container .fr-btn-table-border-bg-color, .fr-table-dimentions-section .fr-btn-table-border-bg-color {
+    margin-right: 10px;
+    background: transparent;
+    border: 1px solid #CCCCCC;
+    border-radius: 2px;
+    border-left: 0px;
+    height: 36px;
+    margin-left: -1px; }
+    .fr-table-border-container .fr-btn-table-border-bg-color .fr-border-color-preview, .fr-table-dimentions-container .fr-btn-table-border-bg-color .fr-border-color-preview, .fr-table-dimentions-section .fr-btn-table-border-bg-color .fr-border-color-preview {
+      width: 20px;
+      height: 20px;
+      border: 1px solid #999999;
+      border-radius: 2px;
+      position: relative;
+      overflow: hidden; }
+      .fr-table-border-container .fr-btn-table-border-bg-color .fr-border-color-preview .fr-border-color-preview-indicator, .fr-table-dimentions-container .fr-btn-table-border-bg-color .fr-border-color-preview .fr-border-color-preview-indicator, .fr-table-dimentions-section .fr-btn-table-border-bg-color .fr-border-color-preview .fr-border-color-preview-indicator {
+        position: absolute;
+        background: red;
+        width: 28px;
+        height: 1px;
+        top: 9px;
+        left: -4px;
+        transform: rotate(-45deg);
+        transform-origin: center; }
+
+.fr-table-style > button {
+  width: 100%; }
+
+.fr-table-style .fr-dropdown-wrapper {
+  width: 200px; }
+
+.fr-table-alignment-container {
+  height: 33px;
+  border: 1px solid #CCCCCC;
+  margin-top: 10px;
+  border-radius: 2px;
+  min-width: 130px; }
+  .fr-table-alignment-container button {
+    height: 30px;
+    width: 36px;
+    padding: 2px 2px 2px 5px;
+    border: none;
+    background: transparent;
+    margin: 2px;
+    cursor: pointer; }
+
 .fr-clearfix::after {
   clear: both;
   display: block;