@media (min-width: 600px) {
  .ql-snow .ql-editor {
    min-height: 200px;
    max-height: calc(100vh - 120px);
    line-height: 1.8;
  }
}
@media (max-width: 600px) {
  .ql-snow .ql-editor {
    min-height: 200px;
    max-height: calc(100vh - 220px);
    line-height: 1.8;
  }
}

.ql-editor {
  padding: 8px 16px;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  z-index: 5;
}

.ql-snow .ql-tooltip[data-mode='link']::before {
  font-size: 14px;
}
.ql-snow .ql-tooltip[data-mode='link']:lang(ja)::before {
  content: 'リンク先を入力:';
}
.ql-snow .ql-tooltip[data-mode='link']:lang(en)::before {
  content: 'Enter link:';
}

.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  font-size: 14px;
}
.ql-snow .ql-tooltip.ql-editing a.ql-action:lang(ja)::after {
  content: '保存';
}
.ql-snow .ql-tooltip.ql-editing a.ql-action:lang(en)::after {
  content: 'Save';
}

.ql-snow .ql-tooltip::before {
  font-size: 14px;
}
.ql-snow .ql-tooltip:lang(ja)::before {
  content: 'リンク先:';
}
.ql-snow .ql-tooltip:lang(en)::before {
  content: 'Link to:';
}

.ql-snow .ql-tooltip a.ql-action::after {
  font-size: 14px;
}
.ql-snow .ql-tooltip a.ql-action:lang(ja)::after {
  content: '編集';
}
.ql-snow .ql-tooltip a.ql-action:lang(en)::after {
  content: 'Edit';
}

.ql-snow .ql-tooltip a.ql-remove::before {
  font-size: 14px;
}
.ql-snow .ql-tooltip a.ql-remove:lang(ja)::before {
  content: '削除';
}
.ql-snow .ql-tooltip a.ql-remove:lang(en)::before {
  content: 'Delete';
}

.ql-snow .ql-editor code {
  border: 1px solid #ddd;
  background-color: #fff;
  color: #ff357f;
  margin: 0 2px;
}

.ql-snow .ql-editor sup {
  vertical-align: super;
  font-size: smaller;
}

.ql-snow .ql-editor sub {
  vertical-align: sub;
  font-size: smaller;
}

.ql-embed {
  background-color: #fff;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #e5e5f2;
  line-height: 1.5;
  margin-top: 4px;
  margin-bottom: 4px;
  color: #68688a;
}

.ql-embed a {
  color: #7979b4;
}

.ql-embed[data-link='true'] {
  cursor: pointer;
}

.ql-embed::before {
  display: block;
  font-size: 12px;
  color: #68688a;
}

.ql-embed:lang(ja)::before {
  content: '埋め込み:';
}

.ql-embed:lang(en)::before {
  content: 'Embed:';
}

@media (max-width: 600px) {
  .ql-embed iframe {
    width: 100%;
  }
}

.qi-color .ql-picker-options {
  z-index: 5 !important;
}

.ql-color .ql-picker-options span:last-child {
  background: none !important;
  width: 100% !important;
  height: 20px !important;
  text-align: center;
}
.ql-color .ql-picker-options span:last-child:before {
  display: block;
  box-sizing: border-box;
  width: calc(100% - 2px);
  margin: 0 -1px;
  padding: 0;
  border: 1px solid #ccc;
  font-size: 11px;
  color: #616269;
}
.ql-color .ql-picker-options span:lang(ja):last-child:before {
  content: 'カスタム';
}
.ql-color .ql-picker-options span:lang(en):last-child:before {
  content: 'Custom';
}
.ql-color .ql-picker-options span:last-child:hover {
  border-color: transparent !important;
}

.ql-background .ql-picker-options span:last-child {
  background: none !important;
  width: 100% !important;
  height: 20px !important;
  text-align: center;
}
.ql-background .ql-picker-options span:last-child:before {
  display: block;
  box-sizing: border-box;
  width: calc(100% - 2px);
  margin: 0 -1px;
  padding: 0;
  border: 1px solid #ccc;
  font-size: 11px;
  color: #616269;
}
.ql-background .ql-picker-options span:lang(ja):last-child:before {
  content: 'カスタム';
}
.ql-background .ql-picker-options span:lang(en):last-child:before {
  content: 'Custom';
}
.ql-background .ql-picker-options span:last-child:hover {
  border-color: transparent !important;
}

.ql-snow .ql-tooltip {
  margin-left: 60px;
  z-index: 200;
}

.ql-snow .ql-editor img {
  cursor: pointer;
}

.ql-snow .ql-stroke {
  stroke: #68688a;
}

.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
  fill: #68688a;
}

.ql-snow .ql-picker {
  color: #68688a;
}

.ql-container.ql-snow {
  border: 1px solid #ccccd9;
}

.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: #563bff;
}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
  fill: #563bff;
}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  stroke: #563bff;
}

/* リッチエディタv2のテーブルセルをセレクトした時のスタイル。グローバルclassなのでここに追加 */
.ProseMirror .selectedCell {
  background: #e9e7fd;
  border: 1px solid #563bff;
}

.ProseMirror .selectedCell:after {
  content: '';
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  position: absolute;
  z-index: 10;
  /* ボーダーの重なり削除 */
  margin: -1px;
}