/* ================================================================= */
/* music_score.css                                                   */
/* ================================================================= */

/* ================================================================= */
/* 印刷時に非表示にする要素                                          */
/* ================================================================= */
@media print {
	.no-print {
		display: none!important;
	}
}

/* ================================================================= */
/* リンクタグ                                                        */
/* ================================================================= */
a {
	color: #0000FF;
	text-decoration: none;
}
a:visited {
	color: #0000FF;
}
a:active {
	color: #0000FF;
}
a:hover {
	color: #FF0000;
}

/* ================================================================= */
/* Steinberg社 Bravura fonts https://www.smufl.org/fonts/            */
/* https://penguinlab.jp/blog/post/2335                              */
/* コード一覧 https://w3c.github.io/smufl/latest/index.html の 4. Glyph tables */
/* ================================================================= */
@font-face {
	font-family: "BravuraText";
	src: url(./fonts/BravuraText.woff);
}
.bravura {
	font-family: "BravuraText";
	/*font-size: 200%;*/
	/*margin: 0 0.3em;*/
	/*vertical-align: text-top;*/
}

/* ================================================================= */
/* Google fonts (Crimson Text Bold 700 Italic)                       */
/* ================================================================= */
/*
.crimson-text-bold {
	font-family: "Crimson Text", serif;
	font-weight: 700;
	font-size: 1.2em;
}
.crimson-text-bold-italic {
	font-family: "Crimson Text", serif;
	font-weight: 700;
	font-style: italic;
	font-size: 16px;
}
*/

/* ================================================================= */
/* BODYスタイル                                                      */
/* ================================================================= */
body {
	font-family: Arial, sans-serif;
	margin: 0px;
	padding: 0px;
	background: #FFFFFF;
	overflow-x: hidden;
	overflow-y: hidden;
	user-select: none;
}

/* ================================================================= */
/* 起動時Waitアニメーション                                          */
/* ================================================================= */
#divWaitAnime {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content:
	center; align-items: center;
}

/* ================================================================= */
/* エディタコンテナー                                                */
/* ================================================================= */
#divContainer {
	position: relative;
	width: 620px;
}

/* ================================================================= */
/* エディタ本体                                                      */
/* ================================================================= */
#divEditor {
	position: relative;
	width: fit-content;
	border: 3px solid #4682B4;
	border-radius: 6px 6px 0px 0px;
	margin-top: 8px;
	/*display: none;*/
	padding: 0px;

	/* タイトルバー */
	#divEditorTitle {
		width: 100%;
		height: 28px;
		background: #4682B4;
		border: 1px solid #4682B4;
		margin-top: -1px;
		margin-left: -1px;
		
		/* タイトルイメージ */
		#imgEditorTitle {
			position: relative;
			left: 4px;
			top: 1px;
		}
		/* タイトルテキスト */
		.spanEditorTitle {
			position: relative;
			left: 6px;
			top: -5px;
			color: #FFFFFF;
			font-whight: bold;
		}
		/* ヘルプボタン */
		.btnHelp {
			position: relative;
			top: 0px;
			width: 48px;
			height: 26px;
			padding: 0px;
			margin: 0px;
			border: 1px solid #808080;
			border-radius: 4px;
			background: #FFFFFF;
			cursor: pointer;
		}
		.btnHelp:hover {
			background: #E0E0E0;
		}
	}
	
	/* メニュー全体 */
	#divEditorMenu {
	
	
	}
	
	/* abcjs */
	#divAbcJs {
		position: relative;
		left: 0px;
		
		#abc-editor {
			width: 789px!important;
			min-height: 100px;
			max-height: 250px;
			height: 100px;
			border: 1px solid #808080;
			padding: 2px 2px 2px 6px;
			font-size: 12px;
			line-height: 16px;
			overflow-x: hidden;
			overflow-y: scroll;
			resize: vertical;
			display: none;
		}

		#divQuestion {
			border: 1px solid #000000;
			padding: 4px 8px;
			font-size: 18px;
			line-height: 28px;
			overflow-y: scroll;
			display: none;
		}

		#abcjs-container {
			border: 1px solid #000000;
			overflow-y: scroll;

			#abcjs-body {
				width: 780px!important;
				height: 600px;
				border: 1px solid #808080;
				/*margin-bottom: 20px;*/
			}
		}
	}
}

/* ================================================================= */
/* ボタン（再編集、挿入）                                            */
/* ================================================================= */
.btn {
	min-width: 90px;
	max-width: 320px;
	height: 28px;
	border-radius: 3px;
	margin-top: 4px;
	margin-left: 4px;
	padding: 0px 16px;
	background-color: #7ed0ff;  /*#61a0ff;*/
	border: 1px solid #4377c4;
	cursor: pointer;
}
/* ボタン：ホーバー */
.btn:hover {
	background-color: #61a0ff;	/*#4377c4;*/
}
/* ボタン：無効時 */
.btn[disabled] {
	background-color: #7ed0ff;	/*#4377c4;*/
	cursor: default;
}

.btnWhite {
	min-width: 90px;
	max-width: 320px;
	height: 28px;
	border-radius: 3px;
	margin-top: 4px;
	margin-left: 4px;
	padding: 0px 16px;
	background-color: #ffffff;  /*#61a0ff;*/
	border: 1px solid #4377c4;
	cursor: pointer;
}
/* ボタン：ホーバー */
.btnWhite:hover {
	background-color: #F0F0F0;	/*#4377c4;*/
}
/* ボタン：無効時 */
.btnWhite[disabled] {
	background-color: #E0E0E0;	/*#4377c4;*/
	cursor: default;
}


/* version 表示 */
#divVersion {
	position: absolute;
	right: 4px;
	bottom: 4px;
	font-size: 13px;
	color: #808080;
}

/* ================================================================= */
/* select要素の無効時                                                */
/* ================================================================= */
select[disabled] {
	border-color: #404040;
}

/* ================================================================= */
/* メニュー１段目                                                    */
/* ================================================================= */
/* 曲名・作者ボタン */
#btnTitle {
	position: relative;
	width: 39px;
	height: 28px;
	padding: 0px;
	margin: 0px;
	border: 1px solid #808080;
	border-width: 1px 1px 1px 1px;
	border-radius: 3px 3px 3px 3px;
	background: #FFFFFF;
	cursor: pointer;
	display: inline-block;
}
#btnTitle:hover {
	background: #E0E0E0;
}
#btnTitle:disabled {
	background: #F8F8F8;
	cursor: default;
}

#btnTitle img {
    opacity: 1.0;
}

#btnTitle:disabled img {
    opacity: 0.4;
}

/* 速度記号 */
#selTempoMarkings {
	position: relative;
	top: -5px;
	width: 100px;
	height: 28px;
	cursor: pointer;
}
#selTempoMarkings:disabled {
	cursor: default;
}


/* テンポ基準音符ボタン */
#btnTempoMarkings2 {
	position: relative;
	top: -2px;
	left: 1px;
	width: 28px;
	height: 28px;
	background: #FFFFFF;
	border: 1px solid #808080;
	border-radius: 3px 0px 0px 3px;
	cursor: pointer;
}
#btnTempoMarkings2:hover {
	background: #F0F0F0;
}
#btnTempoMarkings2 img {
    opacity: 1.0;
}
#btnTempoMarkings2:disabled {
	cursor: default;
}
#btnTempoMarkings2:disabled:hover {
	background: #FFFFFF;
}
#btnTempoMarkings2:disabled img {
    opacity: 0.4;
}

/* メトロノーム記号値 */
#txtTempoMarkings2 {
	position: relative;
	left: -4px;
	top: -5px;
	width: 38px;
	height: 24px;
	border-radius: 0px 3px 3px 0px;
}

/* メトロノーム記号基準音符選択ダイアログ */
#divTempoMarkings2 {
	position: absolute;
	left: 446px;
	top: 33px;
	width: fit-content;
	background: #B0B0B0;
	border: 3px solid #B0B0B0;
	border-radius: 4px;
	white-space: nowrap;
	display: none;
}








/* 楽譜段数 */
#selRowsCount {
	position: relative;
	top: -5px;
	width: 58px;
	height: 28px;
	margin-left: -2px;
	border-radius: 3px 0px 0px 3px;
	cursor: pointer;
}
#selRowsCount:disabled {
	cursor: default;
}

/* 小節数ボタン */
#btnMeasuresCount {
	position: relative;
	top: -5px;
	left: 0px;
	width: 25px;
	height: 28px;
	padding: 0px;
	margin-left: -5px;
	border: 1px solid #808080;
	border-width: 1px 1px 1px 1px;
	border-radius: 0px 3px 3px 0px;
	background: #FFFFFF;
	cursor: pointer;
	display: inline-block;
}
#btnMeasuresCount:hover {
	background: #E0E0E0;
}
#btnMeasuresCount:disabled {
	cursor: default;
}
#btnMeasuresCount:disabled:hover {
	background: #FFFFFF;
}


/* 歌詞番数 */
#selLyric {
	position: relative;
	top: -3px;
	width: 76px;
	height: 28px;
	margin-top: 2px;
	cursor: pointer;
}
#selLyric:disabled {
	cursor: default;
}



/* ================================================================= */
/* メニュー２段目    音符・休符button                                */
/* ================================================================= */
.btnNoteRest {
	position: relative;
	top: -1px;
	width: 26px;
	height: 30px;
	padding: 0px;
	margin: 0px;
	border: 1px solid #808080;
	border-radius: 3px;
	background: #FFFFFF;
	cursor: pointer;
}
.btnNoteRest:hover {
	background: #E0E0E0;
}

.btnNoteRest:disabled {
	background: #F8F8F8;
	cursor: default;
}

.btnNoteRest img {
    opacity: 1.0;
}

.btnNoteRest:disabled img {
    opacity: 0.4;
}

.radius14 {
	border-radius: 3px 0px 0px 3px;
}

/* more ボタン */
.btnNoteRestNarrow {
	position: relative;
	top: -1px;
	width: 12px;
	height: 30px;
	padding: 0px;
	margin: 0px;
	border: 1px solid #808080;
	border-width: 1px 1px 1px 0px;
	border-radius: 0px 3px 3px 0px;
	background: #FFFFFF;
	cursor: pointer;
}
.btnNoteRestNarrow:hover {
	background: #E0E0E0;
}

.btnNoteRestNarrow:disabled {
	background: #F8F8F8;
	cursor: default;
}

.btnNoteRestNarrow img {
    opacity: 1.0;
}

.btnNoteRestNarrow:disabled img {
    opacity: 0.4;
}


/* ================================================================= */
/* メニュー３段目                                                    */
/* ================================================================= */
/* 強弱記号 */
#selDynamics {
	width: 90px;
	height: 28px;
	margin-top: 2px;
	padding: 0px;
	text-align: center;
	font-family: Arial, sans-serif;
	font-size: 13px;
	font-weight: 400;
	font-style: normal;
	cursor: pointer;
}
#selDynamics:disabled {
	cursor: default;
}

/* 反復記号 */
#selRepeatSigns {
	position: absolute;
	left: 100px;
	top: 4px;
	width: 90px;
	height: 28px;
	margin-top: 2px;
	padding: 0px;
	text-align: center;
	font-family: Arial, sans-serif;
	font-size: 13px;
	font-weight: 400;
	font-style: normal;
	cursor: pointer;
}
#selRepeatSigns:disabled {
	cursor: default;
}


/* ================================================================= */
/* その他のコントロール                                              */
/* ================================================================= */
select {
	border-radius: 3px;
	outline: none;
}
input[type=text] {
	border-radius: 3px;
	border: 1px solid #808080;
	outline: none;
}
input[type=number] {
	border-radius: 3px;
	border: 1px solid #808080;
	outline: none;
}


/* ================================================================= */
/* メニュー処理button                                                */
/* ================================================================= */
.btnMenuJob {
	width: 28px;
	height: 28px;
	padding: 0px;
	margin: 0px;
	border: 1px solid #808080;
	border-radius: 3px;
	background: #FFFFFF;
	cursor: pointer;
}
.btnMenuJob:hover {
	background: #E0E0E0;
}

.btnMenuJob:disabled {
	background: #F8F8F8;
	cursor: default;
}

.btnMenuJob img {
    opacity: 1.0;
}

.btnMenuJob:disabled img {
    opacity: 0.4;
}



/* ================================================================= */
/* 追加の音符・休符ダイアログ コンテナ                               */
/* ================================================================= */
#divOptionNoteAndRest {
	position: absolute;
	left: 280px;
	top: 134px;
	width: fit-content;
	background: #B0B0B0;
	border: 3px solid #B0B0B0;
	border-radius: 4px;
	white-space: nowrap;
	display: none;
}

/* ================================================================= */
/* 追加のアーティキュレーションダイアログ コンテナ                   */
/* ================================================================= */
#divOptionArticulation {
	position: absolute;
	left: 445px;
	top: 134px;
	width: fit-content;
	background: #B0B0B0;
	border: 3px solid #B0B0B0;
	border-radius: 4px;
	white-space: nowrap;
	display: none;
}





/* ================================================================= */
/* 和音設定ダイアログ コンテナ                                       */
/* ================================================================= */
#divChord {
	position: absolute;
	left: 285px;
	top: 75px;
	width: fit-content;
	background: #B0B0B0;
	border: 3px solid #B0B0B0;
	border-radius: 4px;
	white-space: nowrap;
	display: none;
	z-index: 200;

	/* 和音メニュー */
	#divChordMenu {
		width: 100%;
		border-color: #808080;
		border-style: solid;
		border-width: 0px 0px 1px 0px;
	}

	/* 和音本体 */
	#divChordBody {
		position: relative;
		width: 184px;
		height: 240px;
		background-image: url("./imgMSC/chord_treble2.png");
		line-height: 5px;
		overflow: hidden;

		/* 臨時記号イメージ */
		.chordImg {
			position: relative;
			width: 10px;
			heighr: 20px;
			border-width: 0px;
		}

		/* 和音指定用チェックボックス .chord クラスのチェックボックスの初期表示を隠す */
		input[type="checkbox"].chordChk {
			appearance: none;
			-webkit-appearance: none;
			-moz-appearance: none;
			width: 16px;
			height: 12px;
			border-radius: 50%;
			border: 1px dotted #000000;
			transform: rotate(-30deg);
			outline: none;
			cursor: pointer;
			position: relative;
			transition: all 0.2s ease;
		}
		input[type="checkbox"].chordChk:hover {
			border: 1px solid #000000;
		}

		/* .chord クラスのチェックが入っているときのスタイル */
		input[type="checkbox"].chordChk:checked {
			background-color: #000000;
		}

		/* .chord クラスのチェックボックスがフォーカスされたときのスタイル */
		input[type="checkbox"].chordChk:focus {
			border-color: #007BFF; /* フォーカス時のボーダー色 */
			//box-shadow: 0 0 5px rgba(255, 0, 255, 1.0); /* フォーカス時のシャドウ */
			outline: 3px solid rgba(255, 0, 255, 0.5);
		}
	}
	
	/* 下部ボタン */
	#divChordButton {
		width: 100%;
		text-align: right;
	
		/* OK・キャンセルボタン */
		.btnChord {
			height: 26px;
			font-size: 12px;
			cursor: pointer;
			margin-top: 4px;
			margin-bottom: 2px;
			border: 1px solid #808080;
			border-radius: 3px;
			background: #FFFFFF;
		}
		#btnChordOK {
			width: 60px;
		}
		#btnChordCancel {
			width: 100px;
			margin-right: 2px;
		}
		.btnChord:hover {
			background: #E0E0E0;
		}

		.btnChord:disabled {
			background: #F8F8F8;
			cursor: default;
		}
	}
}


/* ================================================================= */
/* 装飾音符設定ダイアログ コンテナ                                   */
/* ================================================================= */
#divNoteArt {
	position: absolute;
	left: 280px;
	top: 4px;
	width: fit-content;
	background: #B0B0B0;
	border: 3px solid #B0B0B0;
	border-radius: 4px;
	white-space: nowrap;
	display: none;
	z-index: 200;

	/* 装飾音符メニュー */
	#divNoteArtMenu {
		width: 100%;
		border-color: #808080;
		border-style: solid;
		border-width: 0px 0px 1px 0px;
	}

	/* 装飾音符本体 */
	#divNoteArtBody {
		position: relative;
		width: 240px;
		height: 240px;
		background-image: url("./imgMSC/noteArt_treble2.png");
		line-height: 5px;
		overflow: hidden;

		/* 臨時記号イメージ */
		/* 元音符 */
		.noteArtImg {
			position: relative;
			width: 10px;
			heighr: 20px;
			border-width: 0px;
		}
		/* 装飾音符 */
		.noteArtImg2 {
			position: absolute;
			width: 6px;
			heighr: 12px;
			border-width: 0px;
		}

		/* 装飾音符指定用チェックボックス .noteArt クラスのチェックボックスの初期表示を隠す */
		/* 元音符 */
		input[type="checkbox"].noteArtChk {
			appearance: none;
			-webkit-appearance: none;
			-moz-appearance: none;
			width: 16px;
			height: 12px;
			border-radius: 50%;
			border: 1px dotted #000000;
			transform: rotate(-30deg);
			outline: none;
			position: relative;
			transition: all 0.2s ease;
		}
		/* .noteArt クラスのチェックが入っているときのスタイル */
		input[type="checkbox"].noteArtChk:checked {
			background-color: #000000;
		}
		
		/* 装飾音符 */
		input[type="checkbox"].noteArtChk2 {
			appearance: none;
			-webkit-appearance: none;
			-moz-appearance: none;
			width: 10px;
			height: 7px;
			border-radius: 50%;
			border: 1px dotted #000000;
			transform: rotate(-30deg);
			outline: none;
			cursor: pointer;
			position: absolute;
			transition: all 0.2s ease;
		}
		input[type="checkbox"].noteArtChk2:hover {
			border: 1px solid #000000;
		}

		/* .noteArt クラスのチェックが入っているときのスタイル */
		input[type="checkbox"].noteArtChk2:checked {
			background-color: #000000;
		}

		/* .noteArt クラスのチェックボックスがフォーカスされたときのスタイル */
		input[type="checkbox"].noteArtChk2:focus {
			border-color: #007BFF; /* フォーカス時のボーダー色 */
			//box-shadow: 0 0 5px rgba(255, 0, 255, 1.0); /* フォーカス時のシャドウ */
			outline: 2px solid rgba(255, 0, 255, 0.5);
		}
		
		/* プレビュー */
		.imgNoteArtPrview {
			position: absolute;
			top: 16px;
			left: 6px;
			width; 56px;
			height: 30px;
		}
	}
	
	/* 下部ボタン */
	#divNoteArtButton {
		width: 100%;
		text-align: right;
	
		/* OK・キャンセルボタン */
		.btnNoteArt {
			height: 26px;
			font-size: 12px;
			cursor: pointer;
			margin-top: 4px;
			margin-bottom: 2px;
			border: 1px solid #808080;
			border-radius: 3px;
			background: #FFFFFF;
		}
		#btnNoteArtOK {
			width: 60px;
		}
		#btnNoteArtCancel {
			width: 100px;
			margin-right: 2px;
		}
		.btnNoteArt:hover {
			background: #E0E0E0;
		}

		.btnNoteArt:disabled {
			background: #F8F8F8;
			cursor: default;
		}
	}
}


/* ================================================================= */
/* 小節数設定ダイアログ                                              */
/* ================================================================= */
#divMeasuresCount {



}


/* ================================================================= */
/* 赤字白抜き（演奏モード）                                          */
/* ================================================================= */
.textoutline {
	position: relative;
	top: 4px;
	left: 4px;
	font-size: 14px;
	padding: 4px;
    color: red; /* 文字の内部を赤色に設定 */
    background-color: transparent; /* 背景は透明 */
    text-shadow: 
        1px 1px 0 white, 
       -1px -1px 0 white, 
        1px -1px 0 white, 
       -1px 1px 0 white; /* 白色の縁取り */
}

/* ================================================================= */
/* 音色選択select                                                    */
/* ================================================================= */
#selMidiNo {
	position: relative;
	top: 4px;
	left: 4px;
	width: 240px;
	height: 22px;
	font-size: 13px;
	background: #FFFFFF;
	cursor: pointer;
}

/* ================================================================= */
/* ダイアログ表示時の背景カバー                                      */
/* ================================================================= */
.divBackCover {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	background: rgba(255, 255, 255, 0.2);
	z-index: 100;
	display: none;
}


/* ================================================================= */
/* ダイアログ等のボタン                                              */
/* ================================================================= */
/* OK・はい */
.buttonDialogYes {
	width: 70px;
	height: 26px;
	font-size: 12px;
	cursor: pointer;
	margin-top: 4px;
	margin-bottom: 2px;
	border: 1px solid #808080;
	border-radius: 3px;
	background: #FFFFFF;
}
.buttonDialogYes:hover {
	background: #E0E0E0;
}

.buttonDialogYes:disabled {
	background: #F8F8F8;
	cursor: default;
}

/* キャンセル・いいえ */
.buttonDialogNo {
	width: 90px;
	height: 26px;
	font-size: 12px;
	cursor: pointer;
	margin-right: 2px;
	margin-top: 4px;
	margin-bottom: 2px;
	border: 1px solid #808080;
	border-radius: 3px;
	background: #FFFFFF;
}
.buttonDialogNo:hover {
	background: #E0E0E0;
}

.buttonDialogNo:disabled {
	background: #F8F8F8;
	cursor: default;
}




/* ================================================================= */
/* イメージ select		https://mo2nabe.com/demo-image-selector/     */
/* ================================================================= */
/* イメージselect */
.selectDiv32 {
	display: flex;
	align-items: center;
	cursor: pointer;
}
.selectImg32 {
	box-sizing: border-box;
	margin-right: 4px;
	border: 1px solid #777;
	cursor: pointer;
}

.MSC_ImageSelector{
	border-radius: 3px;
	display: inline-flex;
	position: relative;
	box-sizing: border-box;
	border: 1px solid #777;
	background-color: #fff;
	cursor: pointer;
}
.MSC_ImageSelector__display,.MSC_ImageSelector__preview,.MSC_ImageSelector__preview-child{
	display: flex;
	align-items: center;
}
.MSC_ImageSelector__preview,.MSC_ImageSelector__option{
	padding: 4px;
}
.MSC_ImageSelector__option{
	display: inline-flex;
	background-color: #fff;
}
.MSC_ImageSelector__option:hover{
	background-color: #3498DB;
	color: #fff;
}
.MSC_ImageSelector__icon{
	width: 20px;
	position: relative;
}
.MSC_ImageSelector__icon::before,.MSC_ImageSelector__icon::after{
	content: "";
	width: 50%;
	height: 4px;
	position: absolute;
	top: 55%;
	background-color: #555;
}
.MSC_ImageSelector__icon::before{
	left: 0;
	transform-origin: bottom right;
	transform: translate(0,-50%) rotate(45deg);
}
.MSC_ImageSelector__icon::after{
	left: 50%;
	transform-origin: bottom left;
	transform: translate(0,-50%) rotate(-45deg);
}
.MSC_ImageSelector__pulldown{
	display: none;
	flex-direction: column;
	box-sizing: border-box;
	max-height: 300px;
	position: absolute;
	top: 100%;
	left: -1px;
	z-index: 100;
	border: 1px solid #777;
	background-color: #fff;
	overflow-y: auto;
}
.MSC_ImageSelector__s-spread{
	display: flex;
}
