/*---------------------*/
/* dot editor          */
/*---------------------*/
.dot-editor{
	touch-action: none;
	.dot-editor-canvas-container{
		height: 320px;
		width: 320px;
		margin: 0 auto;
		border: solid 1px black;
		overflow: hidden;
	}
	.dot-editor-controls{
		width: 320px;
		padding: 10px;
		margin: 0 auto;
		display:flex;
		gap:10px;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;

		input{
			width: 44px;
		}
		
		.dot-editor-pen{
			width: 32px;
			height: 32px;
			background-image: url('../img/dotEditor/pen_off.png');
			background-size: cover;
		}

		.dot-editor-pen.is-active{
			background-image: url('../img/dotEditor/pen_on.png');
		}

		.dot-editor-eraser{
			width: 32px;
			height: 32px;
			background-image: url('../img/dotEditor/eraser_off.png');
			background-size: cover;
		}

		.dot-editor-eraser.is-active{
			background-image: url('../img/dotEditor/eraser_on.png');
		}

		.dot-editor-move{
			width: 32px;
			height: 32px;
			background-image: url('../img/dotEditor/move_off.png');
			background-size: cover;
		}

		.dot-editor-move.is-active{
			background-image: url('../img/dotEditor/move_on.png');
		}

		.dot-editor-fill{
			width: 32px;
			height: 32px;
			background-image: url('../img/dotEditor/fill_off.png');
			background-size: cover;
		}

		.dot-editor-fill.is-active{
			background-image: url('../img/dotEditor/fill_on.png');
		}

		.dot-editor-undo{
			width: 32px;
			height: 32px;
			background-image: url('../img/dotEditor/undo.png');
			background-size: cover;
		}

		.dot-editor-redo{
			width: 32px;
			height: 32px;
			background-image: url('../img/dotEditor/redo.png');
			background-size: cover;
		}

		.dot-editor-dropper{
			width: 32px;
			height: 32px;
			background-image: url('../img/dotEditor/dropper_off.png');
			background-size: cover;
		}

		.dot-editor-dropper.is-active{
			width: 32px;
			height: 32px;
			background-image: url('../img/dotEditor/dropper_on.png');
			background-size: cover;
		}
	}
	}

	.dot-editor-big-button{
		width: 320px;
		margin: 0 auto;
		height: 80px;
		background-color: #EEEB43;
		color: #704929;
		border-radius: 10px;
		box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
		text-align: center;
		font-size: 24px;
		padding: 20px;
	}

	.dot-editor-big-button.active{
		box-shadow: none;
	}

	.dot-pointer{
		position:absolute;
		top :20px;
		left:20px;

		img{
			display: block;
			position:absolute;
			top:-24px;
			left:0;
			width:24px;
			height:24px;
		}
	}
}

/*長押しによる選択を無効化*/
.no-select{
	  -webkit-user-select: none; /* Safari/iOS対応 */
	  -moz-user-select: none;    /* Firefox対応 */
	  -ms-user-select: none;     /* IE/Edge対応 */
	  user-select: none;         /* 標準 */
}