froala-editor/css/themes/gray.css

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.

/*!
 * froala_editor v5.3.0 (https://www.froala.com/wysiwyg-editor)
 * License https://froala.com/wysiwyg-editor/terms/
 * Copyright 2014-2026 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; }

.gray-theme .fr-license {
  z-index: 1000;
  padding: 20px;
  font-size: 14px;
  color: #37474F;
  background-color: #FFF;
  border-radius: 10px; }
.gray-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; }
  .gray-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; }
.gray-theme .fr-element {
  -webkit-user-select: auto; }
  .gray-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; }
  .gray-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; }
.gray-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: #0097A7;
  -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; }
  .gray-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: #0097A7; }
  .gray-theme.fr-box a.fr-floating-btn i, .gray-theme.fr-box a.fr-floating-btn svg {
    font-size: 14px;
    line-height: 40px; }
  .gray-theme.fr-box a.fr-floating-btn:hover {
    background: #e8e8e8; }
    .gray-theme.fr-box a.fr-floating-btn:hover svg {
      fill: #0097A7; }
.gray-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); }
.gray-theme iframe.fr-iframe {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
.gray-theme .fr-wrapper::after {
  clear: both;
  display: block;
  content: "";
  height: 0; }
.gray-theme .fr-wrapper .fr-placeholder {
  font-size: 14px;
  color: #AAA;
  font-family: sans-serif;
  top: 0;
  left: 0;
  right: 0; }
.gray-theme .fr-wrapper ::-moz-selection {
  background: rgba(181, 214, 253, 0.8);
  color: #000; }
.gray-theme .fr-wrapper ::selection {
  background: rgba(181, 214, 253, 0.8);
  color: #000; }
.gray-theme.fr-box.fr-basic .fr-wrapper {
  background: #FFF;
  border: 1px solid #CCCCCC;
  border-bottom-color: #F5F5F5;
  top: 0;
  left: 0; }
.gray-theme.fr-box.fr-basic.fr-top .fr-wrapper {
  border-top: 0; }
.gray-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) {
  .gray-theme .fr-box.fr-document .fr-wrapper {
    padding: 30px;
    background: #efefef; }
    .gray-theme .fr-box.fr-document .fr-wrapper .fr-element {
      background: #FFF;
      margin: auto;
      z-index: auto; }
      .gray-theme .fr-box.fr-document .fr-wrapper .fr-element hr {
        background: #efefef; } }
.gray-theme .fr-sticky-on {
  z-index: 10; }
  .gray-theme .fr-sticky-on.fr-sticky-ios {
    left: 0;
    right: 0; }
.gray-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; }
.gray-theme .fr-track-hide-mobile {
  width: 0;
  height: 0; }
.gray-theme .fr-selection-handle {
  width: 16px;
  height: 16px;
  padding: 3px;
  border: transparent 2px solid;
  border-radius: 4px 4px 0 0; }
  .gray-theme .fr-selection-handle a {
    width: 16px;
    height: 16px; }
    .gray-theme .fr-selection-handle a > svg {
      width: 16px;
      height: 16px; }
.gray-theme .fr-selection-handle-active {
  border: #F6D146 2px solid;
  background-color: #F6D146; }
  .gray-theme .fr-selection-handle-active a > svg {
    color: #F6D146; }
.gray-theme .fr-selection-handle-active-selected {
  border: #0098F7 2px solid;
  background-color: #0098F7; }
  .gray-theme .fr-selection-handle-active-selected a > svg {
    color: #0098F7; }
.gray-theme .fr-view .fr-selection-handle-hover {
  outline: #F6D146 2px solid; }
.gray-theme .fr-view .fr-selection-handle-selected {
  outline: #0098F7 2px solid;
  caret-color: transparent; }
.gray-theme .fr-view .fr-selection-handle-selected *::selection {
  background: transparent; }
.gray-theme .fr-view .fr-selection-handle-selected *::-moz-selection {
  background: transparent; }
.gray-theme .fr-custom-selection-highlight {
  background-color: rgba(181, 214, 253, 0.8);
  /* light blue */
  color: #000; }
.gray-theme .fr-selection-drop-indicator {
  height: 0;
  z-index: 1000;
  left: 0; }
  .gray-theme .fr-selection-drop-indicator .fr-selection-drop-indicator-line {
    border: 1px solid #0098F7; }
    .gray-theme .fr-selection-drop-indicator .fr-selection-drop-indicator-line::before {
      left: 0;
      border-color: transparent transparent transparent #0098F7; }
    .gray-theme .fr-selection-drop-indicator .fr-selection-drop-indicator-line::after {
      right: 0;
      border-color: transparent #0098F7 transparent transparent; }
.gray-theme .fr-link-input-layer .fr-buttons:not(.fr-tabs) {
  padding: 0; }
.gray-theme .fr-link-input-layer .fr-buttons .fr-command.fr-btn.fr-dropdown {
  right: 0; }
  .gray-theme .fr-link-input-layer .fr-buttons .fr-command.fr-btn.fr-dropdown.fr-active {
    background-color: #e8e8e8; }
.gray-theme .fr-marker {
  line-height: 0; }
.gray-theme .fr-opacity-0 {
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
.gray-theme .fr-ai-assist-prompt-popup {
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25); }
  .gray-theme .fr-ai-assist-prompt-popup .fr-ai-assist-close-btn {
    background: #F5F5F5;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25); }
    .gray-theme .fr-ai-assist-prompt-popup .fr-ai-assist-close-btn > button.fr-command.fr-btn {
      margin: 0;
      padding: 0; }
  .gray-theme .fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-error-layer {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24; }
  .gray-theme .fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-error-layer:empty {
    opacity: 0;
    height: 0;
    padding: 0;
    margin: 0; }
  .gray-theme .fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-response-layer {
    border: 1px solid #ECECEC; }
    .gray-theme .fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-response-layer .fr-action-buttons .fr-submit {
      border: 1px solid #0097A7; }
    .gray-theme .fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-response-layer .fr-action-buttons .fr-ai-assist-label {
      margin-left: auto;
      color: #999999; }
    .gray-theme .fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-response-layer .fr-ai-assist-response-content {
      overflow: auto; }
  .gray-theme .fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer {
    border: 1px solid #999999; }
    .gray-theme .fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-ai-assist-prompt-input {
      color: #37474F; }
    .gray-theme .fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-buttons button[data-cmd="aiShortCuts"] .fr-svg path {
      fill: #0097A7; }
    .gray-theme .fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-buttons button[data-cmd="aiShortCuts"][aria-expanded="true"]:after {
      border-top: 0;
      border-bottom: 4px solid #0097A7; }
    .gray-theme .fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-buttons button[data-cmd="aiShortCuts"][aria-expanded="false"]:after {
      border-bottom: 0;
      border-top: 4px solid #0097A7; }
    .gray-theme .fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-ai-assist-submit-btn .fr-svg {
      stroke: #FFF; }
    .gray-theme .fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .loader {
      gap: 4px; }
      .gray-theme .fr-ai-assist-prompt-popup .fr-layer.fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .loader .dot {
        --i: 0;
        width: 8px;
        height: 8px;
        background: #5fb7ff;
        box-shadow: 0 0 0 3px rgba(95, 183, 255, 0.15) inset;
        opacity: 0; }
  .gray-theme .fr-ai-assist-prompt-popup[data-state="disabled"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-ai-assist-submit-btn {
    background-color: #999999; }
  .gray-theme .fr-ai-assist-prompt-popup[data-state="disabled"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer:not(.fr-not-disabled) .fr-command.fr-btn + .fr-ai-shortcuts-dropdown .fr-sr-only {
    color: #808080; }
  .gray-theme .fr-ai-assist-prompt-popup[data-state="active"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-ai-assist-submit-btn {
    background-color: #0097A7; }
    .gray-theme .fr-ai-assist-prompt-popup[data-state="active"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-ai-assist-submit-btn:active {
      background-color: #007acc; }
  .gray-theme .fr-ai-assist-prompt-popup[data-state="progress"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-ai-assist-submit-btn {
    background-color: #D9D9D9; }
    .gray-theme .fr-ai-assist-prompt-popup[data-state="progress"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-ai-assist-submit-btn .fr-svg {
      background-color: #000;
      stroke: #000; }
    .gray-theme .fr-ai-assist-prompt-popup[data-state="progress"] .fr-ai-assist .fr-ai-assist-prompt-inner .fr-ai-assist-prompt-layer .fr-ai-assist-submit-btn.fr-selected {
      background-color: #a6a6a6; }
.gray-theme .fr-command.fr-btn + .fr-ai-shortcuts-dropdown:not(.fr-not-disabled) .fr-ai-shortcuts-label {
  color: #808080; }
.gray-theme .fr-command.fr-btn + .fr-ai-shortcuts-dropdown .fr-btn.fr-dropdown .fr-sr-only {
  font-weight: 400; }
.gray-theme .fr-ai-assist-prompt-popup .fr-command.fr-btn + .fr-ai-shortcuts-dropdown .fr-btn.fr-dropdown::after {
  border: 0; }
.gray-theme.fr-toolbar .fr-ai-shortcuts-dropdown .fr-dropdown-wrapper .fr-command.fr-btn.fr-dropdown::after {
  border: 0; }
.gray-theme.fr-toolbar .fr-command.fr-btn.fr-shortcut-active {
  fill: #333333;
  background: gainsboro; }
  .gray-theme.fr-toolbar .fr-command.fr-btn.fr-shortcut-active:after {
    border-top: 0;
    border-bottom: 4px solid #37474F; }
@-webkit-keyframes pop {
  0% {
    -webkit-transform: scale(0.28);
    -moz-transform: scale(0.28);
    -ms-transform: scale(0.28);
    -o-transform: scale(0.28);
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  12% {
    -webkit-transform: scale(1.06);
    -moz-transform: scale(1.06);
    -ms-transform: scale(1.06);
    -o-transform: scale(1.06);
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  30% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    -webkit-opacity: 0.95;
    -moz-opacity: 0.95;
    opacity: 0.95;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  48% {
    -webkit-transform: scale(0.38);
    -moz-transform: scale(0.38);
    -ms-transform: scale(0.38);
    -o-transform: scale(0.38);
    -webkit-opacity: 0.25;
    -moz-opacity: 0.25;
    opacity: 0.25;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  60% {
    -webkit-transform: scale(0.28);
    -moz-transform: scale(0.28);
    -ms-transform: scale(0.28);
    -o-transform: scale(0.28);
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  100% {
    -webkit-transform: scale(0.28);
    -moz-transform: scale(0.28);
    -ms-transform: scale(0.28);
    -o-transform: scale(0.28);
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } }
@keyframes pop {
  0% {
    -webkit-transform: scale(0.28);
    -moz-transform: scale(0.28);
    -ms-transform: scale(0.28);
    -o-transform: scale(0.28);
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  12% {
    -webkit-transform: scale(1.06);
    -moz-transform: scale(1.06);
    -ms-transform: scale(1.06);
    -o-transform: scale(1.06);
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  30% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    -webkit-opacity: 0.95;
    -moz-opacity: 0.95;
    opacity: 0.95;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  48% {
    -webkit-transform: scale(0.38);
    -moz-transform: scale(0.38);
    -ms-transform: scale(0.38);
    -o-transform: scale(0.38);
    -webkit-opacity: 0.25;
    -moz-opacity: 0.25;
    opacity: 0.25;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  60% {
    -webkit-transform: scale(0.28);
    -moz-transform: scale(0.28);
    -ms-transform: scale(0.28);
    -o-transform: scale(0.28);
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  100% {
    -webkit-transform: scale(0.28);
    -moz-transform: scale(0.28);
    -ms-transform: scale(0.28);
    -o-transform: scale(0.28);
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } }
.gray-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; }
.gray-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; }
.gray-theme .fr-code-snippet-layer .fr-code-snippet-header {
  color: #37474F; }
  .gray-theme .fr-code-snippet-layer .fr-code-snippet-header .fr-align-right .fr-btn {
    margin: 0; }
    .gray-theme .fr-code-snippet-layer .fr-code-snippet-header .fr-align-right .fr-btn .fr-svg {
      margin: 0; }
.gray-theme .fr-code-snippet-layer .fr-active.fr-layer .fr-code-snippet-lang.fr-toolbar button.fr-command.fr-btn {
  outline: solid 1px #999999;
  color: #37474F; }
.gray-theme .fr-code-snippet-layer .fr-active.fr-layer pre {
  margin: 16px 0; }
.gray-theme .fr-code-snippet-layer .fr-active.fr-layer .fr-float-right .fr-enable-accessibility.submit {
  border: 1px solid #0098F7; }
.gray-theme .fr-view .fr-code-snippet {
  margin: 1em 0;
  font-size: 0; }
  .gray-theme .fr-view .fr-code-snippet .fr-code-header {
    background: #ECECEC;
    color: #000; }
    .gray-theme .fr-view .fr-code-snippet .fr-code-header .fr-code-actions button:hover {
      background: #cecdcd; }
    .gray-theme .fr-view .fr-code-snippet .fr-code-header .fr-code-actions button:active {
      background: #b8b6b6; }
  .gray-theme .fr-view .fr-code-snippet pre {
    margin: 0;
    overflow-x: auto; }
.gray-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; }
.gray-theme.fr-box.fr-inline .fr-command.fr-btn.html-switch {
  top: 0;
  right: 0;
  background: #FFF;
  color: #37474F;
  -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; }
  .gray-theme.fr-box.fr-inline .fr-command.fr-btn.html-switch i {
    font-size: 24px;
    width: 24px; }
  .gray-theme.fr-box.fr-inline .fr-command.fr-btn.html-switch.fr-desktop:hover {
    background: #e8e8e8; }
.gray-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown[data-cmd='collabMode'] {
  height: 32px;
  border: 1px solid #CCCCCC;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  padding: 0 10px;
  background: #FFF;
  -webkit-transition: border-color 0.2s ease 0s, background 0.2s ease 0s;
  -moz-transition: border-color 0.2s ease 0s, background 0.2s ease 0s;
  -ms-transition: border-color 0.2s ease 0s, background 0.2s ease 0s;
  -o-transition: border-color 0.2s ease 0s, background 0.2s ease 0s; }
  .gray-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown[data-cmd='collabMode'] > span {
    font-size: 13px;
    font-weight: 500;
    line-height: 32px;
    height: 32px;
    padding: 0;
    color: #37474F; }
  .gray-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown[data-cmd='collabMode']:after {
    top: 14px; }
  .gray-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown[data-cmd='collabMode']:focus {
    background: #ebebeb;
    border-color: #adadad; }
  .gray-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown[data-cmd='collabMode'].fr-active {
    background: #ebf7fe;
    border-color: #0098f7; }
    .gray-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown[data-cmd='collabMode'].fr-active > span {
      color: #0098f7; }
    .gray-theme.fr-toolbar .fr-command.fr-btn.fr-dropdown[data-cmd='collabMode'].fr-active:after {
      border-top-color: #0098f7; }
.gray-theme.fr-toolbar .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content .fr-dropdown-list.fr-collab-mode-list {
  min-width: 150px;
  padding: 4px 0; }
  .gray-theme.fr-toolbar .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content .fr-dropdown-list.fr-collab-mode-list li {
    margin: 0;
    padding: 0;
    font-size: 14px; }
  .gray-theme.fr-toolbar .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content .fr-dropdown-list.fr-collab-mode-list a.fr-collab-mode-option {
    height: 40px;
    padding: 0 5px;
    gap: 10px;
    color: #37474F;
    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-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; }
    .gray-theme.fr-toolbar .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content .fr-dropdown-list.fr-collab-mode-list a.fr-collab-mode-option:hover {
      background: #ebebeb; }
    .gray-theme.fr-toolbar .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content .fr-dropdown-list.fr-collab-mode-list a.fr-collab-mode-option.fr-active:hover {
      background: #ebebeb; }
    .gray-theme.fr-toolbar .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content .fr-dropdown-list.fr-collab-mode-list a.fr-collab-mode-option.fr-active .fr-collab-check-icon path {
      fill: #0098f7; }
  .gray-theme.fr-toolbar .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content .fr-dropdown-list.fr-collab-mode-list .fr-collab-mode-icon {
    flex: 0 0 18px; }
    .gray-theme.fr-toolbar .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content .fr-dropdown-list.fr-collab-mode-list .fr-collab-mode-icon path {
      fill: #999999;
      -webkit-transition: fill 0.2s ease 0s;
      -moz-transition: fill 0.2s ease 0s;
      -ms-transition: fill 0.2s ease 0s;
      -o-transition: fill 0.2s ease 0s; }
  .gray-theme.fr-toolbar .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content .fr-dropdown-list.fr-collab-mode-list .fr-collab-mode-label {
    flex: 1 1 auto;
    font-size: 13px;
    color: #37474F; }
  .gray-theme.fr-toolbar .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content .fr-dropdown-list.fr-collab-mode-list .fr-collab-check-icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-left: auto; }
    .gray-theme.fr-toolbar .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content .fr-dropdown-list.fr-collab-mode-list .fr-collab-check-icon path {
      fill: #0098f7; }
.gray-theme.fr-toolbar .fr-command.fr-btn[data-cmd='collabPresence'] span.fr-collab-presence {
  height: inherit; }
  .gray-theme.fr-toolbar .fr-command.fr-btn[data-cmd='collabPresence'] span.fr-collab-presence > .fr-collab-avatar + .fr-collab-avatar {
    margin-left: -8px; }
.gray-theme.fr-toolbar .fr-command.fr-btn[data-cmd='collabPresence'] span .fr-collab-avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #FFF;
  font-size: 11px;
  font-weight: 600;
  color: #FFF;
  margin-left: -8px;
  -webkit-transition: transform 0.2s ease 0s, box-shadow 0.2s ease 0s;
  -moz-transition: transform 0.2s ease 0s, box-shadow 0.2s ease 0s;
  -ms-transition: transform 0.2s ease 0s, box-shadow 0.2s ease 0s;
  -o-transition: transform 0.2s ease 0s, box-shadow 0.2s ease 0s; }
  .gray-theme.fr-toolbar .fr-command.fr-btn[data-cmd='collabPresence'] span .fr-collab-avatar:first-child {
    margin-left: 0; }
  .gray-theme.fr-toolbar .fr-command.fr-btn[data-cmd='collabPresence'] span .fr-collab-avatar:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
    z-index: 20; }
  .gray-theme.fr-toolbar .fr-command.fr-btn[data-cmd='collabPresence'] span .fr-collab-avatar.fr-collab-avatar-default-color {
    border: 1px solid #00B398;
    color: #00B398;
    background-color: #E1F7F3; }
  .gray-theme.fr-toolbar .fr-command.fr-btn[data-cmd='collabPresence'] span .fr-collab-avatar.fr-collab-avatar-more {
    background-color: #bdbdbd;
    color: #37474F;
    margin-left: -8px; }
.gray-theme.fr-toolbar .fr-command.fr-btn[data-cmd='collabPanel'].fr-active {
  background: gainsboro;
  color: #0097A7; }
.gray-theme.fr-toolbar .fr-command.fr-btn[data-cmd="autoSaveStatus"] {
  border: 0;
  width: auto;
  min-width: 0; }
  .gray-theme.fr-toolbar .fr-command.fr-btn[data-cmd="autoSaveStatus"] .fr-vh-autosave-badge {
    height: auto; }
    .gray-theme.fr-toolbar .fr-command.fr-btn[data-cmd="autoSaveStatus"] .fr-vh-autosave-badge .fr-vh-autosave-badge__label {
      font-weight: 400; }
      .gray-theme.fr-toolbar .fr-command.fr-btn[data-cmd="autoSaveStatus"] .fr-vh-autosave-badge .fr-vh-autosave-badge__label::after {
        right: 0;
        background: #F5F5F5; }
    .gray-theme.fr-toolbar .fr-command.fr-btn[data-cmd="autoSaveStatus"] .fr-vh-autosave-badge::before {
      background: #E1F7F3 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='1 0 16 16'><path fill='%2300B398' d='M6.4 11.2 3.2 8l-1.1 1.1 4.3 4.3 9.2-9.2-1.1-1.1z'/></svg>") center/14px 14px no-repeat; }
.gray-theme .fr-wrapper .fr-collab-cursor {
  width: 0;
  z-index: 10;
  border-left: 2px solid #00B398; }
  .gray-theme .fr-wrapper .fr-collab-cursor .fr-collab-cursor-label {
    font-size: 12px;
    font-weight: 500;
    font-family: sans-serif;
    background: #E1F7F3;
    color: #333333;
    padding: 4px 8px;
    border-radius: 4px;
    transition: opacity 0.2s ease 0s; }
    .gray-theme .fr-wrapper .fr-collab-cursor .fr-collab-cursor-label::before {
      width: 0;
      height: 0;
      border-bottom: 8px solid #00B398; }
.gray-theme .fr-wrapper .fr-collab-selection {
  background: rgba(0, 179, 152, 0.15);
  border-bottom: 2px solid rgba(0, 179, 152, 0.35); }
.gray-theme .fr-wrapper .fr-view .fr-suggestion-replace-del {
  transition: background 0.2s ease 0s; }
.gray-theme .fr-wrapper .fr-view .fr-suggestion-insert {
  background: #DFF3E0;
  border-bottom: 2px solid #2E7D32;
  color: inherit; }
  .gray-theme .fr-wrapper .fr-view .fr-suggestion-insert.fr-suggestion-hover {
    background: #BCE5C0; }
  .gray-theme .fr-wrapper .fr-view .fr-suggestion-insert.fr-suggestion-active {
    background: #BCE5C0; }
  .gray-theme .fr-wrapper .fr-view .fr-suggestion-insert a {
    text-decoration-color: #2E7D32;
    color: inherit; }
  .gray-theme .fr-wrapper .fr-view .fr-suggestion-insert img {
    border: 2px solid #2E7D32; }
  .gray-theme .fr-wrapper .fr-view .fr-suggestion-insert .fr-code-snippet {
    background: #DFF3E0;
    border-bottom: 2px solid #2E7D32;
    color: inherit;
    border: 2px solid #2E7D32; }
    .gray-theme .fr-wrapper .fr-view .fr-suggestion-insert .fr-code-snippet.fr-suggestion-hover {
      background: #BCE5C0; }
    .gray-theme .fr-wrapper .fr-view .fr-suggestion-insert .fr-code-snippet.fr-suggestion-active {
      background: #BCE5C0; }
  .gray-theme .fr-wrapper .fr-view .fr-suggestion-insert hr {
    background: #DFF3E0;
    border-bottom: 2px solid #2E7D32;
    color: inherit;
    border-bottom: 2px solid #2E7D32; }
    .gray-theme .fr-wrapper .fr-view .fr-suggestion-insert hr.fr-suggestion-hover {
      background: #BCE5C0; }
    .gray-theme .fr-wrapper .fr-view .fr-suggestion-insert hr.fr-suggestion-active {
      background: #BCE5C0; }
.gray-theme .fr-wrapper .fr-view .fr-suggestion-delete {
  background: #F8D7D7;
  border-bottom: 2px solid #C62828;
  color: inherit; }
  .gray-theme .fr-wrapper .fr-view .fr-suggestion-delete.fr-suggestion-hover {
    background: #F2A7A7; }
  .gray-theme .fr-wrapper .fr-view .fr-suggestion-delete.fr-suggestion-active {
    background: #F2A7A7; }
  .gray-theme .fr-wrapper .fr-view .fr-suggestion-delete table {
    background: #F8D7D7;
    border: 2px solid #C62828; }
.gray-theme .fr-wrapper .fr-view .fr-suggestion-replace-ins {
  background: #FFF3CD;
  border-bottom: 2px solid #F9A825;
  color: inherit; }
  .gray-theme .fr-wrapper .fr-view .fr-suggestion-replace-ins.fr-suggestion-hover {
    background: #FFE08A; }
  .gray-theme .fr-wrapper .fr-view .fr-suggestion-replace-ins.fr-suggestion-active {
    background: #FFE08A; }
.gray-theme .fr-wrapper .fr-view .fr-suggestion-replace-del {
  background: #FFF3CD;
  border-bottom: 2px solid #F9A825;
  color: inherit; }
  .gray-theme .fr-wrapper .fr-view .fr-suggestion-replace-del.fr-suggestion-hover {
    background: #FFE08A; }
  .gray-theme .fr-wrapper .fr-view .fr-suggestion-replace-del.fr-suggestion-active {
    background: #FFE08A; }
.gray-theme .fr-wrapper .fr-view .fr-suggestion-format-paragraph {
  background: #F3EEFC;
  border-bottom: 2px solid #5E35B1;
  color: inherit; }
  .gray-theme .fr-wrapper .fr-view .fr-suggestion-format-paragraph.fr-suggestion-hover {
    background: #C7B6EA; }
  .gray-theme .fr-wrapper .fr-view .fr-suggestion-format-paragraph.fr-suggestion-active {
    background: #C7B6EA; }
.gray-theme .fr-wrapper .fr-view .fr-suggestion-enter-key {
  background: #DFF3E0;
  border-bottom: 2px solid #2E7D32;
  color: inherit;
  color: #2E7D32; }
  .gray-theme .fr-wrapper .fr-view .fr-suggestion-enter-key.fr-suggestion-hover {
    background: #BCE5C0; }
  .gray-theme .fr-wrapper .fr-view .fr-suggestion-enter-key.fr-suggestion-active {
    background: #BCE5C0; }
.gray-theme .fr-wrapper .fr-view .fr-comment-highlight {
  background: #D6E7FA;
  border-bottom: 2px solid #1565C0;
  transition: background 0.2s ease 0s; }
  .gray-theme .fr-wrapper .fr-view .fr-comment-highlight.fr-suggestion-hover {
    background: #A9CEF5; }
  .gray-theme .fr-wrapper .fr-view .fr-comment-highlight.fr-suggestion-active {
    background: #A9CEF5; }
  .gray-theme .fr-wrapper .fr-view .fr-comment-highlight.fr-comment-highlight--empty {
    border-bottom: 0;
    border-left: 2px solid #1565C0;
    padding: 0; }
.gray-theme .fr-wrapper th.fr-tc-insert {
  background-color: #DFF3E0;
  box-shadow: inset 0 0 0 1px #2E7D32; }
.gray-theme .fr-wrapper th.fr-tc-insert.fr-suggestion-focused {
  background-color: #BCE5C0;
  box-shadow: inset 0 0 0 2px #2E7D32; }
.gray-theme .fr-wrapper th.fr-tc-delete {
  background-color: #F8D7D7;
  box-shadow: inset 0 0 0 1px #C62828; }
.gray-theme .fr-wrapper th.fr-tc-delete.fr-suggestion-focused {
  background-color: #F2A7A7;
  box-shadow: inset 0 0 0 2px #C62828; }
.gray-theme .fr-wrapper th.fr-tc-format {
  background-color: #F3EEFC;
  box-shadow: inset 0 0 0 1px #5E35B1; }
.gray-theme .fr-wrapper th.fr-tc-format.fr-suggestion-focused {
  background-color: #C7B6EA;
  box-shadow: inset 0 0 0 2px #5E35B1; }
.gray-theme .fr-wrapper .fr-collab-comment-bubble {
  z-index: 100;
  width: 32px;
  height: 32px;
  background: #FFF;
  color: #333333;
  border: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
  padding: 0;
  transition: background 0.2s ease 0s, box-shadow 0.2s ease 0s; }
  .gray-theme .fr-wrapper .fr-collab-comment-bubble:hover {
    background: #f6f8fa;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18); }
.gray-theme.fr-box.fr-collab-panel-open {
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto; }
  .gray-theme.fr-box.fr-collab-panel-open > .fr-wrapper {
    min-width: 0; }
.gray-theme.fr-box .fr-collab-avatar-tooltip {
  background: #E1F7F3;
  color: #333333;
  font-size: 12px;
  font-weight: 500;
  font-family: sans-serif;
  border-radius: 4px; }
.gray-theme.fr-box .fr-collab-panel {
  width: 300px;
  background: #F6FBFD;
  font-family: Arial, Helvetica, sans-serif;
  color: #202124;
  margin: 0;
  border-right: 1px solid #CCCCCC; }
  .gray-theme.fr-box .fr-collab-panel__header {
    background: transparent;
    color: #5f6368; }
  .gray-theme.fr-box .fr-collab-panel__toggle {
    border: 0;
    padding: 0;
    color: #1a73e8;
    font-family: inherit;
    font-weight: 500; }
  .gray-theme.fr-box .fr-collab-panel__filter {
    border: 0;
    padding: 2px 0;
    margin: 0;
    color: #707070;
    font-family: inherit; }
    .gray-theme.fr-box .fr-collab-panel__filter:hover {
      color: #202124; }
  .gray-theme.fr-box .fr-collab-panel__caret {
    transition: transform 0.2s ease 0s; }
  .gray-theme.fr-box .fr-collab-panel__filter-menu {
    right: 0;
    margin: 0;
    padding: 4px 0;
    background: #FFF;
    border: 1px solid #e8eaed;
    box-shadow: 0 4px 12px rgba(60, 64, 67, 0.18), 0 1px 3px rgba(60, 64, 67, 0.1);
    z-index: 100; }
    .gray-theme.fr-box .fr-collab-panel__filter-menu li {
      margin: 0;
      padding: 0; }
  .gray-theme.fr-box .fr-collab-panel__filter-option {
    border: 0;
    font-family: inherit;
    color: #202124; }
    .gray-theme.fr-box .fr-collab-panel__filter-option:focus {
      background: #f1f3f4; }
    .gray-theme.fr-box .fr-collab-panel__filter-option--active {
      font-weight: 600;
      color: #0097A7; }
  .gray-theme.fr-box .fr-collab-panel__body {
    flex: 1 1 auto;
    overflow-y: auto; }
  .gray-theme.fr-box .fr-collab-panel__empty {
    color: #9aa0a6; }
  .gray-theme.fr-box .fr-collab-panel__expand {
    border: 0;
    margin: 0;
    color: #1a73e8;
    line-height: 0; }
    .gray-theme.fr-box .fr-collab-panel__expand:hover {
      color: #0097A7; }
  .gray-theme.fr-box .fr-collab-panel__collapsed-body {
    padding: 14px 0;
    overflow-y: auto; }
  .gray-theme.fr-box .fr-collab-panel__collapsed-item {
    border: 0;
    padding: 0;
    color: #1a73e8; }
    .gray-theme.fr-box .fr-collab-panel__collapsed-item:hover .fr-collab-panel__collapsed-bubble svg {
      fill: #0097A7; }
  .gray-theme.fr-box .fr-collab-panel__collapsed-avatar {
    bottom: 0;
    left: 0;
    background: #FFF;
    border: 1px solid #707070;
    color: #707070;
    font-weight: 600; }
  .gray-theme.fr-box .fr-collab-panel__collapsed-bubble {
    top: 0;
    right: 0;
    line-height: 0; }
    .gray-theme.fr-box .fr-collab-panel__collapsed-bubble svg {
      fill: #1a73e8; }
  .gray-theme.fr-box .fr-collab-panel .fr-collab-card {
    background: #FFF;
    border: 1px solid #e8eaed;
    border-radius: 6px;
    padding: 14px 16px 14px;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
    transition: box-shadow 0.2s ease 0s, border-color 0.2s ease 0s; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card.fr-collab-card-focused {
      box-shadow: 0 4px 12px rgba(60, 64, 67, 0.18), 0 1px 3px rgba(60, 64, 67, 0.1); }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card.fr-collab-card-active {
      box-shadow: 0 8px 12px 6px rgba(0, 0, 0, 0.05), 0 4px 4px 0 rgba(0, 0, 0, 0.05); }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card__top-bar {
      top: 0;
      left: 0;
      right: 0;
      height: 10px;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card__avatar {
      background: #E1F7F3;
      color: #00B398;
      border: 1px solid #00B398;
      font-weight: 600; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card__author {
      flex: 1 1 auto;
      min-width: 0;
      font-weight: 500;
      color: #707070; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card__time {
      color: #707070;
      flex-shrink: 0; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card__body {
      color: #202124; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card__label {
      font-weight: 500;
      color: #1565C0; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card__content {
      color: #202124; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card__see-more {
      border: 0;
      padding: 6px 0 0;
      font-family: inherit;
      font-weight: 500;
      color: #1565C0; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card__status-tag {
      font-weight: 600;
      background: #f1f3f4;
      color: #707070; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card__actions {
      flex-shrink: 0; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card__icon-btn {
      border: 0;
      color: #5f6368;
      line-height: 0;
      transition: background 0.2s ease 0s, color 0.2s ease 0s; }
      .gray-theme.fr-box .fr-collab-panel .fr-collab-card__icon-btn > svg {
        width: 16px;
        height: 16px; }
      .gray-theme.fr-box .fr-collab-panel .fr-collab-card__icon-btn:hover {
        background: #f1f3f4; }
        .gray-theme.fr-box .fr-collab-panel .fr-collab-card__icon-btn:hover > svg {
          fill: #009BFF; }
      .gray-theme.fr-box .fr-collab-panel .fr-collab-card__icon-btn.fr-btn-reject {
        color: #707070; }
      .gray-theme.fr-box .fr-collab-panel .fr-collab-card__icon-btn[aria-label]::after {
        background: #222222;
        color: #FFF;
        font-size: 11px;
        font-weight: 500;
        opacity: 0;
        transition: opacity 0.2s ease 0s, visibility 0.2s ease 0s;
        z-index: 110; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card__btn {
      background: transparent;
      color: #5f6368;
      font-weight: 500;
      transition: background 0.2s ease 0s, color 0.2s ease 0s;
      font-family: inherit; }
      .gray-theme.fr-box .fr-collab-panel .fr-collab-card__btn:hover {
        background: #707070; }
      .gray-theme.fr-box .fr-collab-panel .fr-collab-card__btn.fr-btn-reject {
        color: #707070; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card__replies {
      border-top: 1px solid #e8eaed; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card__reply-meta {
      color: #707070; }
      .gray-theme.fr-box .fr-collab-panel .fr-collab-card__reply-meta strong {
        color: #202124;
        font-weight: 600; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card__reply-header .fr-collab-card__author {
      flex: 1 1 auto;
      min-width: 0; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card__reply-text {
      color: #202124; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card__textarea {
      border: 1px solid #e8eaed;
      font-family: inherit;
      color: #202124;
      background: #FFF; }
      .gray-theme.fr-box .fr-collab-panel .fr-collab-card__textarea:focus {
        border-color: #0097A7; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card__reply-input {
      border: 1px solid #e8eaed;
      font-family: inherit;
      color: #202124;
      background: #FFF; }
      .gray-theme.fr-box .fr-collab-panel .fr-collab-card__reply-input::placeholder {
        color: #707070; }
      .gray-theme.fr-box .fr-collab-panel .fr-collab-card__reply-input:focus {
        border-color: #0097A7; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card.fr-collab-card-insert > .fr-collab-card__top-bar {
      border-top: 4px solid #2E7D32; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card.fr-collab-card-insert .fr-collab-card__label {
      color: #2E7D32; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card.fr-collab-card-insert > .fr-collab-card__see-more {
      color: #2E7D32; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card.fr-collab-card-delete > .fr-collab-card__top-bar {
      border-top: 4px solid #C62828; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card.fr-collab-card-delete .fr-collab-card__label {
      color: #C62828; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card.fr-collab-card-delete > .fr-collab-card__see-more {
      color: #C62828; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card.fr-collab-card-replace > .fr-collab-card__top-bar {
      border-top: 4px solid #F9A825; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card.fr-collab-card-replace .fr-collab-card__label {
      color: #F9A825; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card.fr-collab-card-replace > .fr-collab-card__see-more {
      color: #F9A825; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card.fr-collab-card-format > .fr-collab-card__top-bar {
      border-top: 4px solid #5E35B1; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card.fr-collab-card-format .fr-collab-card__label {
      color: #5E35B1; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card.fr-collab-card-format > .fr-collab-card__see-more {
      color: #5E35B1; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card.fr-collab-card-comment > .fr-collab-card__top-bar {
      border-top: 4px solid #1565C0; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card.fr-collab-card-comment .fr-collab-card__label {
      color: #1565C0; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card.fr-collab-card-comment > .fr-collab-card__see-more {
      color: #1565C0; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card.fr-collab-card-comment.fr-collab-card-active {
      box-shadow: 0 8px 12px rgba(0, 0, 0, 0.05), 0 4px 4px rgba(0, 0, 0, 0.05); }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card .fr-collab-card__menu-wrap .fr-collab-card__menu {
      right: 0;
      background: #FFF;
      box-shadow: 0 4px 12px rgba(60, 64, 67, 0.18), 0 1px 3px rgba(60, 64, 67, 0.1);
      padding: 4px 0;
      margin: 0;
      z-index: 110; }
      .gray-theme.fr-box .fr-collab-panel .fr-collab-card .fr-collab-card__menu-wrap .fr-collab-card__menu li {
        margin: 0;
        padding: 0; }
      .gray-theme.fr-box .fr-collab-panel .fr-collab-card .fr-collab-card__menu-wrap .fr-collab-card__menu button {
        border: 0;
        font-family: inherit;
        color: #202124; }
        .gray-theme.fr-box .fr-collab-panel .fr-collab-card .fr-collab-card__menu-wrap .fr-collab-card__menu button:focus {
          background: #f1f3f4; }
        .gray-theme.fr-box .fr-collab-panel .fr-collab-card .fr-collab-card__menu-wrap .fr-collab-card__menu button:disabled {
          color: #BDC1C6; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card .fr-collab-card__draft-input {
      border: 1px solid #e8eaed;
      font-family: inherit;
      color: #202124;
      background: #FFF; }
      .gray-theme.fr-box .fr-collab-panel .fr-collab-card .fr-collab-card__draft-input::placeholder {
        color: #707070; }
      .gray-theme.fr-box .fr-collab-panel .fr-collab-card .fr-collab-card__draft-input:focus {
        border-color: #0097A7; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card .fr-collab-card__action-btn {
      font-family: inherit;
      font-weight: 500;
      color: #202124;
      transition: background 0.2s ease 0s, color 0.2s ease 0s; }
      .gray-theme.fr-box .fr-collab-panel .fr-collab-card .fr-collab-card__action-btn.fr-collab-card__action-btn--primary {
        background: #0097A7;
        color: #FFF;
        border-color: #0097A7; }
      .gray-theme.fr-box .fr-collab-panel .fr-collab-card .fr-collab-card__action-btn.fr-collab-card__action-btn--primary:hover {
        background: #007b88; }
      .gray-theme.fr-box .fr-collab-panel .fr-collab-card .fr-collab-card__action-btn.fr-collab-card__action-btn--primary[disabled] {
        background: #999999;
        border-color: #999999;
        color: #FFF; }
      .gray-theme.fr-box .fr-collab-panel .fr-collab-card .fr-collab-card__action-btn.fr-collab-card__action-btn--secondary {
        border-color: #e8eaed; }
      .gray-theme.fr-box .fr-collab-panel .fr-collab-card .fr-collab-card__action-btn.fr-collab-card__action-btn--secondary:hover {
        background: #f1f3f4; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card.fr-collab-card-draft > .fr-collab-card__top-bar {
      border-top: 4px solid #1565C0; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card .fr-collab-card__view-all {
      border: 0;
      padding: 6px 0 0;
      font-family: inherit;
      font-weight: 600;
      color: #1a73e8; }
    .gray-theme.fr-box .fr-collab-panel .fr-collab-card .fr-collab-mention {
      color: #0098f7;
      background: rgba(0, 152, 247, 0.1);
      font-weight: 500; }
.gray-theme.fr-box .fr-collab-mention-menu {
  z-index: 200;
  overflow-y: auto;
  background: #FFF;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(60, 64, 67, 0.18), 0 1px 3px rgba(60, 64, 67, 0.1);
  padding: 4px 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif; }
  .gray-theme.fr-box .fr-collab-mention-menu li {
    margin: 0;
    padding: 0; }
  .gray-theme.fr-box .fr-collab-mention-menu button {
    border: 0;
    font-family: inherit;
    color: #202124; }
    .gray-theme.fr-box .fr-collab-mention-menu button.fr-collab-mention-active {
      background: #0097A7;
      color: #FFF; }
  .gray-theme.fr-box .fr-collab-mention-menu__avatar {
    background: #E1F7F3;
    color: #00B398;
    border: 1px solid #00B398;
    font-weight: 600; }
.gray-theme.fr-modal .fr-modal-wrapper:has(.fr-vh-modal__head) {
  padding: 0;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  z-index: 10000; }
.gray-theme.fr-modal.fr-vh-modal .fr-modal-head {
  border-bottom: 0; }
.gray-theme.fr-modal .fr-vh-modal__head {
  padding: 24px 14px 0;
  font-weight: 600;
  color: #37474F; }
.gray-theme.fr-modal .fr-vh-modal__close {
  border: 0;
  color: #37474F;
  padding: 0; }
.gray-theme.fr-modal .fr-vh-modal__field:focus-within {
  border-bottom-color: #0097A7; }
.gray-theme.fr-modal .fr-vh-modal__desc {
  border: 0;
  outline: 0;
  color: #37474F;
  font-family: inherit;
  padding: 4px 0; }
  .gray-theme.fr-modal .fr-vh-modal__desc::placeholder {
    font-family: inherit;
    font-weight: 400; }
.gray-theme.fr-modal .fr-vh-modal__err {
  color: #d92d20; }
.gray-theme.fr-modal .fr-vh-modal__save {
  background: #0097A7;
  color: #FFF;
  border: 0;
  font-weight: 600;
  transition: background 0.2s ease 0s; }
  .gray-theme.fr-modal .fr-vh-modal__save:hover {
    background: #007b88; }
  .gray-theme.fr-modal .fr-vh-modal__save:active {
    background: #00606a; }
.gray-theme.fr-box.fr-vh-view-active > .fr-vh-view-root {
  top: 0;
  left: 0;
  right: 0; }
.gray-theme.fr-box.fr-vh-compare-active > .fr-vh-compare-root {
  top: 0;
  left: 0;
  right: 0; }
.gray-theme .fr-vh-view-root {
  background: #FFF;
  font-family: Arial, Helvetica, sans-serif;
  color: #37474F; }
  .gray-theme .fr-vh-view-root .fr-vh-view__topbar {
    background: #FFF; }
  .gray-theme .fr-vh-view-root .fr-vh-view__back {
    border: 0;
    font: inherit;
    color: #37474F; }
  .gray-theme .fr-vh-view-root .fr-vh-view__total {
    color: #707070; }
  .gray-theme .fr-vh-view-root .fr-vh-view__body {
    flex: 1 1 auto; }
  .gray-theme .fr-vh-view-root .fr-vh-view__preview-wrap {
    overflow-y: auto;
    background: #FFF; }
  .gray-theme .fr-vh-view-root .fr-vh-view__preview {
    color: #37474F; }
  .gray-theme .fr-vh-view-root .fr-vh-view__side-header {
    padding: 14px 16px 0; }
  .gray-theme .fr-vh-view-root .fr-vh-view__side-title {
    font-weight: 700;
    color: #37474F; }
  .gray-theme .fr-vh-view-root .fr-vh-view__cards {
    flex: 1 1 auto;
    overflow-y: auto; }
.gray-theme .fr-vh-compare-root {
  background: #FFF;
  font-family: Arial, Helvetica, sans-serif;
  color: #37474F; }
  .gray-theme .fr-vh-compare-root .fr-vh-compare__topbar {
    grid-template-columns: auto 1fr auto;
    background: #FFF; }
  .gray-theme .fr-vh-compare-root .fr-vh-compare__back {
    border: 0;
    font: inherit;
    color: #37474F; }
  @media (max-width: 480px) {
    .gray-theme .fr-vh-compare-root .fr-vh-compare__counter-text {
      min-width: 0; } }
  .gray-theme .fr-vh-compare-root .fr-vh-compare__chevron {
    border: 0; }
    .gray-theme .fr-vh-compare-root .fr-vh-compare__chevron:hover {
      color: #37474F; }
    .gray-theme .fr-vh-compare-root .fr-vh-compare__chevron svg {
      fill: #707070; }
  .gray-theme .fr-vh-compare-root .fr-vh-compare__exit {
    border: 0;
    font: inherit;
    font-weight: 600;
    color: #0097A7; }
    @media (max-width: 480px) {
      .gray-theme .fr-vh-compare-root .fr-vh-compare__exit {
        min-width: 0; } }
  .gray-theme .fr-vh-compare-root .fr-vh-compare__body {
    flex: 1 1 auto;
    min-height: 0; }
  .gray-theme .fr-vh-compare-root .fr-vh-compare__diff {
    background: #FFF;
    overflow-y: auto;
    color: #37474F; }
    .gray-theme .fr-vh-compare-root .fr-vh-compare__diff .fr-vh-diff-add {
      background: #DFF3E0;
      border-bottom: 2px solid #2E7D32; }
      .gray-theme .fr-vh-compare-root .fr-vh-compare__diff .fr-vh-diff-add:not(span) {
        border-left: 3px solid #2E7D32;
        padding-right: 0;
        border-radius: 0; }
    .gray-theme .fr-vh-compare-root .fr-vh-compare__diff .fr-vh-diff-del {
      background: #F8D7D7;
      border-bottom: 2px solid #C62828; }
      .gray-theme .fr-vh-compare-root .fr-vh-compare__diff .fr-vh-diff-del:not(span) {
        color: inherit;
        border-left: 3px solid #C62828;
        padding-right: 0;
        border-radius: 0; }
    .gray-theme .fr-vh-compare-root .fr-vh-compare__diff .fr-vh-diff-format {
      background: #F3EEFC;
      border-left: 3px solid #5E35B1; }
      .gray-theme .fr-vh-compare-root .fr-vh-compare__diff .fr-vh-diff-format:is(span) {
        border-bottom: 2px solid #5E35B1; }
    .gray-theme .fr-vh-compare-root .fr-vh-compare__diff .fr-vh-diff-add.fr-vh-hunk-active {
      b