/*
	j-motion\main\css\base.css
*/

:root {
	--svg-size: 125px;	/* Custom property : update by setProperty of JS */
}

input[type="checkbox"]{
	transform:scale(1.8);
}
input[type="checkbox"] + label{
	margin-left: 0.5rem;
	padding:1px 0.15rem;
	line-height: 1.2em;
}
input[type="checkbox"]:checked + label{
	background-color: #A8D6FF;
	border-radius: 0.5rem;
}

input:disabled,
input:disabled + label{
	opacity: 0.2;
}

input#stroke-start-no{
	width: 60px;
	display: inline-block !important;
	text-align: center;
}

svg{
	width: var(--svg-size);
	height: var(--svg-size);
}
mask path{
	fill:none;
	stroke:#fff;
	stroke-width: 9;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-miterlimit: 2;
	stroke-dasharray: 2500;
	stroke-dashoffset: 2500;
}

mask.thin path{	stroke-width: 3; }
mask.narrow path{ stroke-width: 7.5; }
mask.normal path{ stroke-width: 9; }
mask.wide path{ stroke-width: 12; }
mask.wide-ex path{ stroke-width: 14; }

mask path.thin{ stroke-width: 3; }
mask path.narrow{ stroke-width: 7.5; }
mask path.normal{ stroke-width: 9; }
mask path.wide{ stroke-width: 12; }
mask path.wide-ex{ stroke-width: 14; }

.base path{
	fill:#333; 
}

.trace path{
	fill: #ccc; 
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
	color: var(--bs-btn-disabled-color);
	pointer-events: none;
	background-color: var(--bs-btn-disabled-bg);
	border-color: var(--bs-btn-disabled-border-color);
	opacity: 0.2;
}		

.btn-group > label.btn {
	background-color: #fff;
}	

#operation{
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
@media screen and (min-width:576px) {
	#operation{
		width: 85%;
	}	
}

#alert{
	font-size: 1.5em;
	color: #DF7401;
	text-align: center;
	font-weight: bold;
}

#chars{
	background-color: #fff;
}

#chars text.strokes{
	font-size: 0.5rem;
	fill: #ccc;
}
#chars text.stroke{
	font-size: 0.25rem;
	fill: red;
}