@charset "UTF-8";

:root {
	--note_item_h : 2.5rem;
}

.note_popup_outer{
	display: block;
	position: fixed;
	width: 100%;
	height: auto;
	background: #eee;
	top: 0;
	left: 0;
	border: 1px solid #666;
	box-sizing: border-box;
	box-shadow: 0.2rem 0.2rem 0.5rem #888;
	z-index: 2;
	border-radius: 0 0 0.25rem 0.25rem;
	padding: 0 0.25rem;

}

.note_popup_title{
	font-weight: bold;
}

.note_popup_list{
	height: 19rem;
	border: 1px solid #aaa;
	overflow-y: scroll;
	overflow-x: hidden;
}

.note_popup_footer{
	width: 100%;
	text-align: right;
	padding-right: 0.5rem;
	box-sizing: border-box;
	margin: 0.25rem 0;

}

.note_popup_button{
	height: 1.7rem;
	/*width: 5rem;*/
	margin-left: 1rem;
	font-size: 1rem;

}

.note_popup_clear_button:hover{
	color:red;

}


.note_popup_close_button_icon{
	height: 50%;
}



/*メイン画面のノートボタンの枠*/
.note_button_wrap{
	display: inline-block;
	width: 100%;
	position: absolute;
	text-align: right;
	left: 0;
}



/*メイン画面のノートボタン*/
.note_button{
	display:inline-block;
	height: 1.6rem;
	width:1.6rem;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 70%;
	border: 1px solid #888;
	border-radius: 0.2rem;
	box-shadow: 1px 1px 1px #aaa;
	vertical-align: middle;
}

/*押し込み中*/
.note_button:active {
	box-shadow: 0px 0px 0px #aaa;
}



/*モデルが未選択ならノートボタン非表示*/
/*.sample_area_wrap:has(select.sample_select:empty) div.note_button*/
/*.sample_area_wrap:not(:has(option)) div.note_button*/
/*select.sample_select:empty ~ div.note_button*/
select.sample_select:empty ~ div.note_button_wrap
{
	display:none;
}


.note_popup_load_open_button{
	background-image: url(img/download.png);
}

.note_popup_save_open_button{
	background-image: url(img/folder_plus.png);
}

.note_item{
	white-space: nowrap;
	height: var(--note_item_h);
	width: calc(100% - 1rem);
	background: #fff;
	border: 1px solid #aaa;
	line-height: 100%;
	user-select: none;
	padding: 0 0 0 0.5rem;
	margin: 0.1rem 5rem 0.2rem 0.2rem;
	/* box-sizing: border-box;*/
}

.note_item:has(.note_item_new){
	border: 1px dot #444;
	background:#ff8;

}


.note_item_left{
	display: inline-block;
	height: calc(var(--note_item_h)* 0.8);
	width: calc(var(--note_item_h)* 0.8);
	margin-top: calc(var(--note_item_h)* 0.1);
	padding-top: calc(var(--note_item_h)* 0.07);
	font-size: 1.3rem;
	line-height: 100%;
	font-weight: bold;
	text-align: center;
	overflow: hidden;
	background-color: #eee;
	vertical-align: top;
	box-sizing: border-box;
	border-radius: 0.2rem;
	box-shadow: .05rem .05rem .1rem #666;
	background-image: url(img/arrow_updown.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	background-origin: content-box;
	background-size: 50%;
}

.note_item_left:active{
	box-shadow: .0rem .0rem 0rem #666;
}

.note_item_center{
	display:inline-block;
	height: calc(var(--note_item_h)* 0.8);
	width: calc(100% - var(--note_item_h)* 2);rem);
}
.note_item_right{
	display:inline-block;
	height: calc(var(--note_item_h)* 0.8);
	width: calc(var(--note_item_h)* 0.8);
	text-align: center;
	vertical-align: top;

}


.note_item_row_header{
	font-size: 0.9rem;
	line-height: 100%;
	margin: 0;
	padding: 0;
	overflow-x: clip;
	white-space: nowrap;
}
input.note_item_name{
	line-height: 120%;
	font-weight: bold;
	border: none;
	margin-bottom: 0.2rem;
	width: calc(100% - 0rem);
	background:transparent;
	padding-left: 0.25rem;
	font-size: 0.9rem;
}
.note_item_json{
	display:none;

}
.note_item_trush{
	height: 80%;
	width: 80%;
	display: inline-block;
	margin-top: calc(var(--note_item_h)* 0.2);
}

.note_item_trush:hover{
	filter: invert(15%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(95%) contrast(112%);
}





.note_item_selected,
.sortable-chosen
{
	background:#ddf;
}


.blink {
	animation: blinkAnime 500ms infinite alternate;
}
@keyframes blinkAnime{
   0% { color: #ffff00 }
 100% { color: #cc0000 }
}



/*確認ポップアップ*/
.confirm_popup_back{
	background: rgba(0, 0, 0, 0.2);
	position: fixed;
	z-index: 100000;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	line-height: 100vh;
	vertical-align: middle;
	text-align: center;
}
.confirm_popup_frame{
	background: #fff;
	width: max-content;
	height: max-content;
	line-height: initial;
	display: inline-block;
	padding: 1rem;
	border: 1px solid #888;
	border-radius: 0.25rem;
	box-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.3);
}

.confirm_popup_content{
	min-width: 15rem;
	min-height: 2rem;
}

.confirm_popup_footer{
}

.confirm_popup_button{
	font-size: 1rem;
	padding: 0.25rem 1rem;
	margin: 0 1rem;
}

.confirm_popup_button_ok{
}

.confirm_popup_button_cancel{
}

/*セパレータ*/
.zsep{
with: 80%;
	width: 80%;
	border: none;
	border-top: 3px dotted #ccc;

}