.cm-inserted {
  display: inline-block;
  background-color: rgba(234, 234, 234, 0.25);
  height: 1.5em;
  line-height: 1.5em; /* 高さに合わせて行内中央揃え */
  vertical-align: top;
}

#editAreaWrapper3 .CodeMirror {
  top: 1.7rem !important;
  bottom: 0 !important;
  height: calc(100% - 1.7rem) !important;
}


/* 内部スクロール要素も背景を指定 */
.chat-code-instance .CodeMirror .CodeMirror-scroll,
#previewEditorWrapper .CodeMirror .CodeMirror-scroll,
#editAreaWrapper1 .CodeMirror .CodeMirror-scroll,
#editAreaWrapper2 .CodeMirror .CodeMirror-scroll,
#editAreaWrapper3 .CodeMirror .CodeMirror-scroll {
  background: linear-gradient(to right, #295629, #031e08 34px, #031e08 100%) !important;
}

/* 内部スクロール要素も背景を指定 */
body.theme-natsu .cm-left,
body.theme-natsu .inline-editor-host .CodeMirror .CodeMirror-scroll,
body.theme-natsu .chat-code-instance .CodeMirror .CodeMirror-scroll,
body.theme-natsu #previewEditorWrapper .CodeMirror .CodeMirror-scroll,
body.theme-natsu #editAreaWrapper1 .CodeMirror .CodeMirror-scroll,
body.theme-natsu #editAreaWrapper2 .CodeMirror .CodeMirror-scroll,
body.theme-natsu #editAreaWrapper3 .CodeMirror .CodeMirror-scroll {
  background: linear-gradient(to right, #295629, #031e08 34px, #031e08 100%) !important;

}

body.theme-haru .cm-left,
body.theme-haru .inline-editor-host .CodeMirror .CodeMirror-scroll,
body.theme-haru .chat-code-instance .CodeMirror .CodeMirror-scroll,
body.theme-haru #previewEditorWrapper .CodeMirror .CodeMirror-scroll,
body.theme-haru #editAreaWrapper1 .CodeMirror .CodeMirror-scroll,
body.theme-haru #editAreaWrapper2 .CodeMirror .CodeMirror-scroll,
body.theme-haru #editAreaWrapper3 .CodeMirror .CodeMirror-scroll {
  background: linear-gradient(to right, #975b98, #d8cfd8 34px, #d8cfd8 100%) !important;

}

/* 内部スクロール要素も背景を指定 */
body.theme-aki .cm-left,
body.theme-aki .inline-editor-host .CodeMirror .CodeMirror-scroll,
body.theme-aki .chat-code-instance .CodeMirror .CodeMirror-scroll,
body.theme-aki #previewEditorWrapper .CodeMirror .CodeMirror-scroll,
body.theme-aki #editAreaWrapper1 .CodeMirror .CodeMirror-scroll,
body.theme-aki #editAreaWrapper2 .CodeMirror .CodeMirror-scroll,
body.theme-aki #editAreaWrapper3 .CodeMirror .CodeMirror-scroll {
  background: linear-gradient(to right, #e28787, #1e0303 34px, #1e0303 100%) !important;

}

/* 内部スクロール要素も背景を指定 */
body.theme-fuyu .cm-left,
body.theme-fuyu .inline-editor-host .CodeMirror .CodeMirror-scroll,
body.theme-fuyu .chat-code-instance .CodeMirror .CodeMirror-scroll,
body.theme-fuyu #previewEditorWrapper .CodeMirror .CodeMirror-scroll,
body.theme-fuyu #editAreaWrapper1 .CodeMirror .CodeMirror-scroll,
body.theme-fuyu #editAreaWrapper2 .CodeMirror .CodeMirror-scroll,
body.theme-fuyu #editAreaWrapper3 .CodeMirror .CodeMirror-scroll {
  background: linear-gradient(to right, #516679, #d9e2e8 34px, #d9e2e8 100%) !important;

}


body.theme-natsu #editAreaWrapper4 .CodeMirror .CodeMirror-scroll {
  background: linear-gradient(to right, #295629, #031e08 34px, #031e08 100%) !important;
}
body.theme-haru #editAreaWrapper4 .CodeMirror .CodeMirror-scroll {
  background: linear-gradient(to right, #975b98, #d8cfd8 34px, #d8cfd8 100%) !important;
}
body.theme-aki #editAreaWrapper4 .CodeMirror .CodeMirror-scroll {
  background: linear-gradient(to right, #e28787, #1e0303 34px, #1e0303 100%) !important;
}
body.theme-fuyu #editAreaWrapper4 .CodeMirror .CodeMirror-scroll {
  background: linear-gradient(to right, #516679, #d9e2e8 34px, #d9e2e8 100%) !important;
}


/*
#editAreaWrapper4 .CodeMirror .CodeMirror-scroll {
  background: linear-gradient(to right, #5a5a5a, #1d1d1d 34px, #1d1d1d 100%)!important;
  padding-left: 6px;
}*/

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.inline-editor-host .CodeMirror-gutters,
.chat-code-instance .CodeMirror-gutters,
#previewEditorWrapper .CodeMirror-gutters,
#editAreaWrapper1 .CodeMirror-gutters,
#editAreaWrapper2 .CodeMirror-gutters,
#editAreaWrapper3 .CodeMirror-gutters {
  /*background: linear-gradient(to right, #295629, #031e08)!important;*/
  padding-right: 6px;
  background: linear-gradient(to right, #295629, #031e08 34px, #031e08 100%) !important;

}

body.theme-natsu .inline-editor-host .CodeMirror-gutters,
body.theme-natsu .chat-code-instance .CodeMirror-gutters,
body.theme-natsu #previewEditorWrapper .CodeMirror-gutters,
body.theme-natsu #editAreaWrapper1 .CodeMirror-gutters,
body.theme-natsu #editAreaWrapper2 .CodeMirror-gutters,
body.theme-natsu #editAreaWrapper3 .CodeMirror-gutters {
  /*background: linear-gradient(to right, #295629, #031e08)!important;*/
  padding-right: 6px;
  background: linear-gradient(to right, #295629, #031e08 34px, #031e08 100%) !important;
}

body.theme-haru .inline-editor-host .CodeMirror-gutters,
body.theme-haru .chat-code-instance .CodeMirror-gutters,
body.theme-haru #previewEditorWrapper .CodeMirror-gutters,
body.theme-haru #editAreaWrapper1 .CodeMirror-gutters,
body.theme-haru #editAreaWrapper2 .CodeMirror-gutters,
body.theme-haru #editAreaWrapper3 .CodeMirror-gutters {
  /*background: linear-gradient(to right, #295629, #031e08)!important;*/
  padding-right: 6px;
  background: linear-gradient(to right, #975b98, #d8cfd8 34px, #d8cfd8 100%) !important;

}

body.theme-aki .inline-editor-host .CodeMirror-gutters,
body.theme-aki .chat-code-instance .CodeMirror-gutters,
body.theme-aki #previewEditorWrapper .CodeMirror-gutters,
body.theme-aki #editAreaWrapper1 .CodeMirror-gutters,
body.theme-aki #editAreaWrapper2 .CodeMirror-gutters,
body.theme-aki #editAreaWrapper3 .CodeMirror-gutters {
  /*background: linear-gradient(to right, #295629, #031e08)!important;*/
  padding-right: 6px;
  background: linear-gradient(to right, #e28787, #1e0303 34px, #1e0303 100%) !important;
}

body.theme-fuyu .inline-editor-host .CodeMirror-gutters,
body.theme-fuyu .chat-code-instance .CodeMirror-gutters,
body.theme-fuyu #previewEditorWrapper .CodeMirror-gutters,
body.theme-fuyu #editAreaWrapper1 .CodeMirror-gutters,
body.theme-fuyu #editAreaWrapper2 .CodeMirror-gutters,
body.theme-fuyu #editAreaWrapper3 .CodeMirror-gutters {
  /*background: linear-gradient(to right, #295629, #031e08)!important;*/
  padding-right: 6px;
  background: linear-gradient(to right, #516679, #d9e2e8 34px, #d9e2e8 100%) !important;

}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

body.theme-natsu #editAreaWrapper4 .CodeMirror-gutters {
  /*background: linear-gradient(to right, #295629, #031e08)!important;*/
  padding-right: 6px;
  left: 0;
  background: linear-gradient(to right, #295629, #031e08 34px, #031e08 100%) !important;
}
body.theme-haru #editAreaWrapper4 .CodeMirror-gutters {
  /*background: linear-gradient(to right, #295629, #031e08)!important;*/
  padding-right: 6px;
  left: 0;
  background: linear-gradient(to right, #975b98, #d8cfd8 34px, #d8cfd8 100%) !important;

}
body.theme-aki #editAreaWrapper4 .CodeMirror-gutters {
  /*background: linear-gradient(to right, #295629, #031e08)!important;*/
  padding-right: 6px;
  left: 0;
  background: linear-gradient(to right, #e28787, #1e0303 34px, #1e0303 100%) !important;
}
body.theme-fuyu #editAreaWrapper4 .CodeMirror-gutters {
  /*background: linear-gradient(to right, #295629, #031e08)!important;*/
  padding-right: 6px;
  left: 0;
  background: linear-gradient(to right, #516679, #d9e2e8 34px, #d9e2e8 100%) !important;
}
/*
body.theme-fuyu #editAreaWrapper4 .CodeMirror-gutters {
  background: linear-gradient(to right, #5a5a5a, #1d1d1d 34px, #1d1d1d 100%) !important;
  padding-right: 6px;
}*/

body.theme-haru .CodeMirror-linenumber { color: #504450 !important; }

body.theme-natsu .CodeMirror-linenumber { color: #a3bca7 !important; }

body.theme-aki .CodeMirror-linenumber { color: #cdb3b3 !important; }

body.theme-fuyu .CodeMirror-linenumber { color: #41474d !important; }

/*
#editAreaWrapper4  .cm-s-oceanic-next .CodeMirror-linenumber { color: #cbcbcb !important; }
#editAreaWrapper4  .cm-s-eclipse .CodeMirror-linenumber { color: #cbcbcb !important; }
#editAreaWrapper4  .cm-s-solarized .CodeMirror-linenumber { color: #cbcbcb !important; }
*/
/* CodeMirror 全体 */
/* CodeMirror 全体 */
.CodeMirror {
  font-family: 
    'SF Mono', 
    'Menlo', 
    'Consolas', 
    'Noto Sans Mono CJK JP', 
    monospace !important;
  font-size: 13px; /* font-size: 12.5px !important; */
  line-height: 1.5 !important;
  letter-spacing: 0em !important;
}



body.theme-haru .CodeMirror-selected {
  background: rgba(151, 91, 152, 0.384) !important;
}
body.theme-natsu .CodeMirror-selected {
  background: rgba(92, 175, 92, 0.384) !important;
}
body.theme-aki .CodeMirror-selected {
  background: rgba(226, 135, 135, 0.384) !important;
}
body.theme-fuyu .CodeMirror-selected {
  background: rgba(80, 158, 213, 0.384) !important;
}

/* 擬似キャレット */
body.theme-haru .cm-inserted {
  background: rgba(151, 91, 152, 0.384);
}
body.theme-natsu .cm-inserted {
  background: rgba(129, 217, 129, 0.384);
}
body.theme-aki .cm-inserted {
  background: rgba(229, 157, 157, 0.384);
}
body.theme-fuyu .cm-inserted {
  background: rgba(80, 158, 213, 0.384);
}

/* フォーカス中だけ変更 */
.CodeMirror-focused .CodeMirror-selected {
  background: rgba(53, 146, 213, 0.336) !important;
}

/* スクロールバー枠非表示 ======================================================= */
.CodeMirror-scroll {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.CodeMirror-scroll::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}



/* ********************************************************************
***********************************************************************
*********************************************************************** */

/* =========================================
   CodeMirror Syntax Highlight
========================================= */
/* CodeMirror標準テーマ無効化 */
.CodeMirror[class*="cm-s-"] .cm-keyword,
.CodeMirror[class*="cm-s-"] .cm-def,
.CodeMirror[class*="cm-s-"] .cm-variable,
.CodeMirror[class*="cm-s-"] .cm-variable-2,
.CodeMirror[class*="cm-s-"] .cm-variable-3,
.CodeMirror[class*="cm-s-"] .cm-string,
.CodeMirror[class*="cm-s-"] .cm-number,
.CodeMirror[class*="cm-s-"] .cm-property,
.CodeMirror[class*="cm-s-"] .cm-comment,
.CodeMirror[class*="cm-s-"] .cm-operator {
  color: inherit !important;
}

.CodeMirror {
  color: var(--cm-text);
  font-weight: var(--cm-font-weight);
}

.CodeMirror-cursor {
  border-left: 1px solid var(--cm-cursor) !important;
}

body.theme-haru {
  --cm-cursor: #333333;
}

body.theme-fuyu {
  --cm-cursor: #333333;
}

body.theme-natsu {
  --cm-cursor: #ffffff;
}

body.theme-aki {
  --cm-cursor: #ffffff;
}

/* 通常キャレット　これ効かない
body.theme-haru .CodeMirror-cursor {
  border-left: 1px solid rgb(151, 91, 152) !important;
}

body.theme-natsu .CodeMirror-cursor {
  border-left: 1px solid rgb(129, 217, 129) !important;
}

body.theme-aki .CodeMirror-cursor {
  border-left: 1px solid rgb(229, 157, 157) !important;
}

body.theme-fuyu .CodeMirror-cursor {
  border-left: 1px solid rgb(80, 158, 213) !important;
}
*/

body.theme-haru {
  --cm-font-weight: 550;
}

body.theme-fuyu {
  --cm-font-weight: 550;
}

body.theme-natsu {
  --cm-font-weight: 500;
}

body.theme-aki {
  --cm-font-weight: 500;
}



/* コメント */
.cm-comment {
  color: var(--cm-comment);
  /*font-style: italic;*/
  font-weight: 400;
}


/* キーワード */
.cm-keyword {
  color: var(--cm-keyword);
}


/* 定数 */
.cm-atom {
  color: var(--cm-atom);
}


/* 数字 */
.cm-number {
  color: var(--cm-number);
}


/* 関数・クラス定義 */
.cm-def,
.cm-function {
  color: var(--cm-def);
}


/* 変数 */
.cm-variable {
  color: var(--cm-variable);
}

.cm-variable-2 {
  color: var(--cm-variable2);
}

.cm-variable-3 {
  color: var(--cm-variable3);
}

.cm-variable-4 {
  color: var(--cm-variable4);
}

.cm-variable-5 {
  color: var(--cm-variable5);
}


/* オブジェクトプロパティ */
.cm-property {
  color: var(--cm-property);
}


/* 演算子 */
.cm-operator {
  color: var(--cm-operator);
}


/* 文字列 */
.cm-string {
  color: var(--cm-string);
}

.cm-string-2 {
  color: var(--cm-string2);
}


/* 正規表現 */
.cm-string-3 {
  color: var(--cm-string3);
}


/* 組み込み */
.cm-builtin {
  color: var(--cm-builtin);
}


/* 型 */
.cm-type,
.cm-class {
  color: var(--cm-type);
}


/* 修飾 */
.cm-qualifier {
  color: var(--cm-qualifier);
}


/* メタ情報 */
.cm-meta {
  color: var(--cm-meta);
}


/* HTML/XML */
.cm-tag {
  color: var(--cm-tag);
}

.cm-attribute {
  color: var(--cm-attribute);
}


/* 括弧 */
.cm-bracket {
  color: var(--cm-bracket);
}


/* エラー */
.cm-error,
.cm-invalidchar {
  color: var(--cm-error);
}


/* コメント内属性 */
.cm-comment.cm-attribute {
  color: var(--cm-comment-attribute);
}


/* Markdown系 */
.cm-header {
  color: var(--cm-header);
}

.cm-quote {
  color: var(--cm-quote);
}

.cm-link {
  color: var(--cm-link);
  text-decoration: underline;
}

.cm-strong {
  font-weight: bold;
}

.cm-em {
  font-style: italic;
}

.cm-strikethrough {
  text-decoration: line-through;
}


/* 検索ハイライト */
.CodeMirror-searching {
  background: var(--cm-search);
}


/* カーソル対応括弧 */
.CodeMirror-matchingbracket {
  color: var(--cm-matching-bracket);
}


/* 選択　*/
.CodeMirror-selected {
  background: var(--cm-selection);
}
 

/* 正負 */
.cm-positive {
  color: var(--cm-positive);
}

.cm-negative {
  color: var(--cm-negative);
}


/* 🌸 haru : 紫ライト */
body.theme-haru {

  --cm-text: #35303b;
  --cm-comment: #81758d;

  --cm-keyword: #8d3f91;
  --cm-atom: #b04b72;
  --cm-number: #6658b0;

  --cm-def: #315c9b;
  --cm-call: #3e72b8;

  --cm-variable: #51475e;
  --cm-variable2: #26705a;
  --cm-variable3: #87506a;
  --cm-variable4: #7957a8;
  --cm-variable5: #9a6135;

  --cm-property: #795522;

  --cm-operator: #654474;

  --cm-string: #28734d;
  --cm-string2: #16706c;
  --cm-string3: #55783a;

  --cm-builtin: #28659a;
  --cm-type: #356d85;
  --cm-qualifier: #7652a0;

  --cm-meta: #ad6429;

  --cm-tag: #a23d61;
  --cm-attribute: #956526;

  --cm-error: #c22626;

  --cm-bracket: #8d3f91;
  --cm-matching-bracket: #c04cc8;

  --cm-comment-attribute: #aa94b8;

  --cm-link: #2968a8;

  --cm-header: #8d3f91;
  --cm-quote: #786582;

  --cm-search: rgba(141,63,145,.25);

  --cm-positive: #26734d;
  --cm-negative: #b52c38;

  --cm-control: #9a6135;

}

/* 🌿 natsu : 深緑ダーク */
body.theme-natsu {

  --cm-text: #e8f5ea;
  --cm-comment: #91b39a;

  --cm-keyword: #e4b3ff;
  --cm-atom: #ffabc0;
  --cm-number: #b9c8ff;

  --cm-def: #86d9ff;
  --cm-call: #68d5ff;

  --cm-variable: #d5efdc;
  --cm-variable2: #91f0c4;
  --cm-variable3: #ffd98e;
  --cm-variable4: #d2b4ff;
  --cm-variable5: #ffbd87;

  --cm-property: #ffe89b;

  --cm-operator: #d6e8ff;

  --cm-string: #9affaa;
  --cm-string2: #79ead9;
  --cm-string3: #d5ff96;

  --cm-builtin: #8fd5ff;
  --cm-type: #a5e3ff;
  --cm-qualifier: #dfb8ff;

  --cm-meta: #ffc77d;

  --cm-tag: #ff9eb5;
  --cm-attribute: #ffdd8b;

  --cm-error: #ff7777;

  --cm-bracket: #a9ffcb;
  --cm-matching-bracket: #ffe477;

  --cm-link: #91d8ff;

  --cm-comment-attribute: #a7bca8;

  --cm-header: #e4b3ff;
  --cm-quote: #9eb59f;

  --cm-search: rgba(255,200,80,.25);

  --cm-positive: #8cff9b;
  --cm-negative: #ff8080;

  --cm-control: #ffd98e;
}

/* 🍁 aki */
body.theme-aki {

  --cm-text: #ffe8df;
  --cm-comment: #c9aaa2;

  --cm-keyword: #ffb6b6;
  --cm-atom: #ffd09e;
  --cm-number: #dfc4ff;

  --cm-def: #9bdcff;
  --cm-call: #a9e3ff;

  --cm-variable: #ffd2bc;
  --cm-variable2: #b4f2b8;
  --cm-variable3: #ffe19b;
  --cm-variable4: #dfc0ff;
  --cm-variable5: #ffc08c;

  --cm-property: #8fdbff;

  --cm-operator: #ffe5d8;

  --cm-string: #b5ffbf;
  --cm-string2: #8ee9dc;
  --cm-string3: #ddff9c;

  --cm-builtin: #a6ddff;
  --cm-type: #b8e6ff;
  --cm-qualifier: #e6c0ff;

  --cm-meta: #ffd08b;

  --cm-tag: #ff9fab;
  --cm-attribute: #ffe19b;

  --cm-error: #ff7777;

  --cm-bracket: #ffd0a8;
  --cm-matching-bracket: #ffb5b5;

  --cm-link: #a8ddff;


  --cm-comment-attribute: #cfaaa2;

  --cm-header: #ffb6b6;
  --cm-quote: #c6aaa2;

  --cm-search: rgba(255,170,100,.25);

  --cm-positive: #9ff0a8;
  --cm-negative: #ff7777;

  --cm-control: #ffd184 !important;
}

/* ❄️ fuyu : 青灰ライト */
body.theme-fuyu {

  --cm-text: #303840;
  --cm-comment: #778692;

  --cm-keyword: #5969b5;
  --cm-atom: #a44770;
  --cm-number: #6857b0;

  --cm-def: #16669b;
  --cm-call: #287fc0;

  --cm-variable: #455564;
  --cm-variable2: #24704d;
  --cm-variable3: #88652d;
  --cm-variable4: #7554a0;
  --cm-variable5: #9b6030;

  --cm-property: #795925;

  --cm-operator: #3f5668;

  --cm-string: #1d7449;
  --cm-string2: #176c69;
  --cm-string3: #60852d;

  --cm-builtin: #176595;
  --cm-type: #286681;
  --cm-qualifier: #625095;

  --cm-meta: #95602c;

  --cm-tag: #984e70;
  --cm-attribute: #806127;

  --cm-error: #bb2525;

  --cm-bracket: #25628c;
  --cm-matching-bracket: #5969b5;

  --cm-comment-attribute: #94a2ad;

  --cm-link: #1765a0;

  --cm-header: #5969b5;
  --cm-quote: #71808c;

  --cm-search: rgba(80,120,180,.25);

  --cm-positive: #26734d;
  --cm-negative: #b52b35;

  --cm-control: #88652d;

}


/* CodeMirror 基本文字色を強制 */
body.theme-natsu .CodeMirror,
body.theme-haru .CodeMirror,
body.theme-aki .CodeMirror,
body.theme-fuyu .CodeMirror {
  color: var(--cm-text) !important;
}


/* 行テキスト継承 */
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  color: inherit !important;
}


/* gutter */
.CodeMirror-gutters {
  color: var(--cm-comment);
  background: transparent;
}


/* 通常カーソル */
.CodeMirror-cursor {
  border-left-color: var(--cm-text);
}

/*
.cm-comment { color: var(--cm-comment); }
.cm-keyword { color: var(--cm-keyword); }
.cm-number { color: var(--cm-number); }
.cm-def { color: var(--cm-def); }
.cm-variable { color: var(--cm-variable); }
.cm-variable-2 { color: var(--cm-variable2); }
.cm-variable-3 { color: var(--cm-variable3); }
.cm-property { color: var(--cm-property); }
.cm-string { color: var(--cm-string); }
.cm-string-2 { color: var(--cm-string2); }
.cm-builtin { color: var(--cm-builtin); }
.cm-tag { color: var(--cm-tag); }
.cm-attribute { color: var(--cm-attribute); }
.cm-type { color: var(--cm-type); }
.cm-operator { color: var(--cm-operator); }
*/