@import url(https://cdn.jsdelivr.net/gh/tonsky/FiraCode@4/distr/fira_code.css);
/*** 外枠の設定 ***/
.display-none{
	display: none;
}
.box{
	/* margin: 0ex 3ex 1ex; */
	border: solid black 1px;
	margin: 10px auto;
	/* width: 1000px; */
}

.configMember{
	display:inline-Block;
	margin:8px;
	margin-right:0px;
}

/* 外枠の個別設定 */
/* 色の変更だけ */
.configAreaBox{
	/* border:solid black 1px; */
	background-color: #fffdf2;
	position:sticky;
}
.textAreaBox{
	background-color: #D4F3D4;
}
.answerAreaBox{
	background-color: #FAEAFA;
	/*resize: vertical;*/
	/*overflow: hidden;*/

}
.readFileAreaBox{
	background-color: #E6FFE9;
	/*resize: vertical;*/
	/*overflow: hidden;*/

}
.itemsAreaBox{
	background-color: #F3F3F3;
	/*resize: vertical;*/
	/*overflow: hidden;*/

}


/*** 説明欄の設定 ***/
.caption{
	/* border: solid black 1px; */
	min-height: 30px;

	display: flex;
	display: -moz-flex;
	display: -o-flex;
	display: -webkit-flex;
	display: -ms-flex;
	flex-direction: row;
	-moz-flex-direction: row;
	-o-flex-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;

	/* 縦中央 */
	align-items: center;
	/* height: 2em; */
}

/* 説明欄の個別設定 */
/* 色の変更だけ */
.captionForTextArea{
	background-color: #d8f3d4;
}
.captionForAnswerArea{
	background-color: #F6E3E3;
}
.captionForItemsArea{
	background-color: #D4D4D4;
}
.captionForReadFileArea{
	background-color: #d2eed0;
}

.answerConfig{
	text-align: right;
	margin-left: auto;
	margin-right: 20px;
}

.runSpeedConfig{
	text-align:left;
	margin-left: 20px;
	margin-right: 20px;
}

/*** 解答欄 ***/

/* 置けるところの外枠 */
.fixedArea{
	height: 10ex;
}

/* 解答を置くところ */
.answerArea{
	height: 100%;
	/* width:  95%; */
	/* overflow: scroll; */
	overflow: auto;
	/* background-color: #F6EEEE; */

}

.answerArea input {
	font-size: 0.8em;
	
}

.answerArea select {
	font-size: 0.8em;
}

.itemsArea{
	height: 100%;
	/* overflow: scroll; */
	overflow: auto;
	/* width:  32em; */
	font-size: 1.0em;

}

.itemsArea input {
	font-size: 0.8em;
}

.itemsArea select {
	font-size: 0.8em;
}

.SizeFix{
	text-align: right;
	margin-left: auto;
	margin-right: 20px;
}


/* コンテナ */
.container{
	vertical-align: top;
	/* padding: 1ex; */
	/* line-height: 1.0ex;  */
	/* height: 1.8em; */
	overflow: auto;
}


/*** 選択肢 ***/

/* 選択肢 */
.item{
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	vertical-align: middle;
	/* height: 1.8em; */
	display: table;
	width: 100%;


}

.line-no{
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	display: table-cell;
	width: 35px;
	background: #fff;
	padding: 0 3px;
	vertical-align: middle;
	text-align: center;
}

.itemCase{
	/* border: solid 1px; */
	/* border-color: #CCCC99; */
	/* background-color: #FFFFCC; */
	/* padding : 3px; */
}

.itemsTable{
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	border: solid 1px;
	border-color: #CCCC99;
	background-color: #FFFFCC;
	padding : 3px;
	display:table;
	width: 100%;

	/*カーソルを手をつかむ形にする*/
	cursor: -moz-grab;
	cursor: -webkit-grab;
	cursor: grab;
}

.itemsTable:hover{
	background-color: #a0a050;

	/*カーソルを手をつかむ形にする*/
	cursor: -moz-grab;
	cursor: -webkit-grab;
	cursor: grab;
}

.itemsTable:active{
	border-color: #CCCC99;
	background-color: #FFFFCC;
	/*カーソルを手をグーにした状態にする*/

	cursor: -moz-grabbing;
	cursor: -webkit-grabbing;
	cursor: grabbing;
}
.debug-iconContainer{
	display: inline-block;
}

.itemPartsContainer{
	display: table-cell;
	text-align: left;
	line-height: initial;
}

.itemPartsContainer span {
	vertical-align: middle;
}

.iconContainer{
	display: table-cell;
	text-align: right;
	width: 15px;
}

.unique{
	/* border-color: #CCCC99;
	background-color: #CCFFFF; */
	border-color: #CCCC99;
	/* background-color: #FFFFCC; */
}

.normal{
	border-color: #CCCC99;
	/* background-color: #FFFFCC; */
}

.fixed{
	/* border-color: #CCCC99;
	background-color: #FFCCFF; */
	border-color: #CCCC99;
	/* background-color: #FFFFCC; */
}

.droppable{
	border-color: #CCCC99;
	/* background-color: #FFFFCC; */
}

/* 普通の丸形アイコン用 */
/* .unique-icon{
	background: #CCFFFF;
	border: 1px solid #2a82a3;
}

.fixed-icon{
	background: #FFCCFF;
	border: 1px solid rgb(164, 89, 102);
}

.droppable-icon{
	background: #ffa962;
	border: 1px solid rgb(164, 119, 90);
}
*/

.debug-icon-In{
	/* background: #FFCCFF; */
	/* border: 1px solid rgb(164, 89, 102); */
	width: 0;
	height: 0;

	border-top:    8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right:  0px solid transparent;
	border-left:   12px solid #ffffff;

	margin-top:    2px;
	margin-bottom: 2px;
	margin-left:   4px;
	margin-right:  4px;
}

.debug-icon-Out{
	display: inline-block;
	vertical-align: middle;
	text-align: center;

	width: 20px;
	height: 20px;
	/* margin-right: 5px; */
	-webkit-border-radius: 25%;
	border-radius: 25%;

	background: #7a0;
	border:solid 1px rgb(144, 144, 144);
	box-shadow: 0px 0px 4px 1px rgba(128, 128, 128, 0.5);

	/*-moz-box-sizing: border-box;
	box-sizing:border-box;
	vertical-align: middle;
	margin-right: 5px;
	width: 15px;
	height: 15px;
	border-radius: 70px;
	-moz-border-radius: 70px;
	-webkit-border-radius: 70px;
	text-align: center;
	font-weight: bold;
	transition: background-color 0.5s ease-in;
	-webkit-transition: background-color 0.5s ease-in; */
}

/*ピン型のアイコン用*/
.unique-icon::before{
	border-radius: 50%;
	box-shadow: .5px .5px 4px 1px rgba(128, 128, 128, 0.5);
	content: '';
	display: block;
	position: absolute;
	top: 5px;
	width: 15px;
	height: 15px;
	z-index: 1;
	background-image: -webkit-gradient(radial, 30% 30%, 0, 30% 30%, 10, from(#ffe5ed), to(#2065ff));
}

.unique-icon::after{
	background-image: linear-gradient(-80deg, transparent 47%, #333333 47%, #333333 52%, transparent 52%, transparent);
  content: '';
  position: absolute;
	display: block;
  top: 15px;
  width: 10px;
  height: 13px;
  z-index: 0;
}

.fixed-icon::before{
	border-radius: 50%;
	box-shadow: .5px .5px 4px 1px rgba(128, 128, 128, 0.5);
	content: '';
	display: block;
	position: absolute;
	top: 5px;
	width: 15px;
	height: 15px;
	z-index: 1;
	background-image: -webkit-gradient(radial, 30% 30%, 0, 30% 30%, 10, from(#ffe5ed), to(rgb(233, 41, 75)));
}

.fixed-icon::after{
	background-image: linear-gradient(-80deg, transparent 47%, #333333 47%, #333333 52%, transparent 52%, transparent);
  content: '';
  position: absolute;
	display: block;
  top: 15px;
  width: 10px;
  height: 13px;
  z-index: 0;
}

.droppable-icon{
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
	width: 10px;
	height: 10px;
	border-radius: 70px;
	-moz-border-radius: 70px;
	-webkit-border-radius: 70px;
	text-align: center;
	font-weight: bold;
	transition: background-color 0.5s ease-in;
	-webkit-transition: background-color 0.5s ease-in;
	background: #ffa962;
	border: 1px solid rgb(164, 119, 90);
	/* background-image: -webkit-gradient(radial, 30% 30%, 0, 30% 30%, 10, from(#ffe5ed), to(rgb(184, 99, 0))); */
}

.icon{
	margin-right: 5px;
}


/*タブ・グループ関係*/
.groupTab{
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	border:solid 1px;
	border-color:#000;
	background:#b4bdff;
	cursor: pointer;
}

.groupSpace{
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	/* background:rgb(255, 177, 102); */
	border-left: solid 1px;
	/* border-color: #CC9; */
	border-color: #AAA;
	padding-left: 5px;
	height: 0px;
	overflow: hidden;
	box-shadow: 0 3px 3px rgba(0, 0, 0, .2);
}


.multiTab{
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	border:solid 1px;
	/* border-color:#000; */
	border-color: #CCCC99;
	background:#b4bdff;
	padding:4px;

	/*カーソルを手をつかむ形にする*/
	cursor: -moz-grab;
	cursor: -webkit-grab;
	cursor: grab;
}

.multiTab:active{
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	border:solid 1px;
	/* border-color:#000; */
	border-color: #CCCC99;
	background:#b4bdff;
	padding:4px;

	/*カーソルを手をつかむ形にする*/
	cursor: -moz-grabbing;
	cursor: -webkit-grabbing;
	cursor: grabbing;
}

.multiSpace{
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	/* background:rgb(255, 177, 102); */
	border-left: solid 1px;
	/* border-color: #CC9; */
	border-color: #AAA;
	padding-left: 5px;
	box-shadow: 0 3px 3px rgba(0, 0, 0, .2);
}

/*** その他 ***/

/* ページをゴミ箱にするため */
html {
	height:100%;
}

body {
	height:100%;
	background: linear-gradient(-45deg,#fff 25%, #e8e8e8 25%,#e8e8e8 50%, #fff 50%,#fff 75%, #e8e8e8 75%,#e8e8e8);
	background-size: 5px 5px;
	margin-bottom: 8px;
	margin-left: 0px;
	margin-right: 0px;
}

input.executeButton{
	font-size:  1em;
	height: 2em;
	margin-right: 2px;
	cursor: pointer;
}

input.deleteButton{
	font-size:  0.88em;
	height: 1.8em;
	cursor: pointer;
}


@font-face {
	font-family: "源ノ角ゴシック Code JP M";
	src:local('源ノ角ゴシック Code JP M') ,
			url('../fonts/SourceHanCodeJP-Medium.otf');
}



*{
	/*font-family: MeiryoKe_Gothic, "Ricty Diminished", "Osaka－等幅", "Osaka-等幅", Osaka-mono, "ＭＳ ゴシック", "MS Gothic", "Courier New", Courier, Monaco, Menlo, Consolas, "Lucida Console", monospace; */
	/*font-family: 'Fira Code', monospace;*/
	font-weight: bold;
	/*font-family: "UD Digi Kyokasho NP-B";*/
	font-family: '源ノ角ゴシック Code JP M';
	transition: 0.3s;
}

.horizontal{
	display: flex;
	display: -moz-flex;
	display: -o-flex;
	display: -webkit-flex;
	display: -ms-flex;
	flex-direction: row;
	-moz-flex-direction: row;
	-o-flex-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;

	margin: auto;
	resize: vertical;
	overflow: scroll;
}

.dentsArea{
	box-sizing: border-box;
	padding: 0.3em;
	transition: 0.3s;
	letter-spacing: 1px;
	/* color: #3b3b3b; */
	border: 1px solid #969696;
	box-shadow: 1px 1px 2px 0 #707070 inset;
	border-radius: 4px;
}

.claimArea{
	padding: 3px;
	border: 1px solid #969696;
  border-radius: 4px;
	/* background-color: rgba(255, 255, 255, .8); */
  box-shadow: 0 3px 3px rgba(0, 0, 0, .2), inset 0 1px 1px rgba(255, 255, 255, .7);
}

.emptyLineclaimArea{
	padding: 3px;
	border: 1px solid #969696;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, .8); 
  box-shadow: 0 3px 3px rgba(0, 0, 0, .2), inset 0 1px 1px rgba(255, 255, 255, .7);
}

.modal {
	
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.5);
}
	
.modal-content{
	background-color: white;
	width: 800px;
	height: 800px;
	margin: 30% auto;
}