.code-output {
  border: 2px solid #4CAF50; /* 好みの色と太さに変更可能 */
  padding: 10px;
  border-radius: 5px;
  background-color: #f9f9f9; /* 好みで背景色も変更可能 */
  position: relative; /* relativeを追加して、擬似要素をこの要素内で絶対配置できるようにする */
}

.code-output::before {
  position: absolute;
  top: 10px; /* 文字が見切れないように上端に配置 */
  right: 5px;
  /* font-color: #4CAF50; 文字色を変更可能 */
  /* background-color: #f9f9f9; 擬似要素の背景色を四角の背景色と同じにすることで、重なりを防ぐ */
  padding: 0 5px; /* テキスト周りのパディングを追加して読みやすくする */
  border-radius: 3px; /* 擬似要素にも角を丸めるスタイルを追加 */
  transform: translateY(-50%); /* 擬似要素を垂直方向に中央揃え */
}

.column-custom-1 {
  background-color: #e7e7e7; /* 左カラムの背景色 */
  /* padding: 10px; 内側の余白を調整 */
}

.column-custom-2 {
  background-color: #e8f5e9; /* 右カラムの背景色 */
  /* padding: 10px; 内側の余白を調整 */
}

/* file: style.css */

/*
.v-center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90%;
}
*/

.v-center-container {
	display: flex;
	justify-content: center;
	align-items: center;
}


.marky {
  background: linear-gradient(transparent 60%, #FCFFC1 0%);
}
.markb {
  background: linear-gradient(transparent 60%, #88E2EA 0%);
}
.markp{
  background: linear-gradient(transparent 70%, #ffcdd2 0%)
}

.bmarker-s{
  font-weight: 700
}

.ymarker{
  background: #fff9c4
}
.ymarker-s{
  background: linear-gradient(transparent 70%,#fff9c4 0%)
}
.gmarker{
  background:#eee
}
.gmarker-s{
  background: linear-gradient(transparent 70%,#eee 0%)
}
.rmarker{
  background:#ffcdd2
}
.rmarker-s{
  background: linear-gradient(transparent 70%,#ffcdd2 0%)
}
.bmarker{
  background:#e1f5fe
}
.bmarker-s{
  background:linear-gradient(transparent 70%,#e1f5fe 0%)
}