/* ================================== Signature ======================== */

@import url("https://fonts.googleapis.com/css2?family=Birthstone&family=Grape+Nuts&family=Meie+Script&family=WindSong&display=swap");

.msgBox .panes {
	min-width: 45ch;
}

/* .msgBox .typeSelect {
	margin-bottom: 0.5rem;
	border-bottom: 1px solid black;
} */

/* .msgBox .typeSelect button {
	background-color: inherit;
	border: none;
	cursor: pointer;
} */

.msgBox .typeInSigAndStyle {
	/* min-width: 100%; */
	width: 100%;
	display: flex;
	/* position: relative; */
	/* display: grid; */
	/* grid-template-columns: 1fr auto; */
	/* margin-bottom: 0.5rem; */
	gap: 0.25rem;
}

.msgBox .typeInSigAndStyle #typedName {
	font-size: 1.25rem;
	line-height: 1.25rem;
	padding: 0 0.25rem;
	flex-grow: 1;
	overflow: hidden;
	border: 1px solid;
}

.msgBox .selectStyle {
	position: relative;
	font-size: inherit;
	/* padding: 0.25rem; */
}

.msgBox .selectStyle button {
	white-space: nowrap;
	font-size: inherit;
	padding: 0.25rem;
}

.msgBox .stylePreview {
	position: absolute;
	right: 0;
	border: 1px solid black;
	border-radius: 3px;
	white-space: nowrap;
	margin-top: 2px;
	padding: 2px 8px 4px;
	text-align: center;
	background-color: white;
	font-size: 26px;
	line-height: 26px;
	z-index: 1;
	overflow: auto;
	/* 
	position: absolute;
	right: 0;
	border: 1px solid black;
	border-radius: 3px;
	white-space: nowrap;
	margin-top: 0.2rem;
	padding: 0.5rem;
	text-align: center;
	background-color: white;
	font-size: 1.35rem;
	line-height: 1.35rem;
	z-index: 1;
	overflow: auto; */
}

.msgBox .selectStyle .stylePreview > div {
	padding: 0.1rem;
}

.msgBox .selectStyle .stylePreview > div:hover {
	background-color: lightgray;
	cursor: pointer;
}

.msgBox .canvasArea {
	position: relative;
	width: 100%;
	border: 1px solid black;
	border-radius: 3px;
	/* margin: 1.5rem 0; */
	margin-top: 0.25rem;
}

/* .msgBox .canvasArea.tall {
	margin-bottom: 1.5rem;
} */

.msgBox .sigCanvas {
	touch-action: none;
	width: 100%;
	cursor: pointer;
	cursor: url(../../img/signature/pen.svg) 0 32, pointer;
}

.msgBox .sigCanvasClearBtn {
	position: absolute;
	top: 0.1rem;
	right: 0.2rem;
	padding: 0;
	font-size: 2rem;
	line-height: 1.5rem;
	color: red;
	background-color: transparent;
	border: none;
	cursor: pointer;
}

.msgBox .stylePreview .styleEx1 {
	font-family: Birthstone, cursive;
}
.msgBox .stylePreview .styleEx2 {
	font-family: Grape Nuts, cursive;
}
.msgBox .stylePreview .styleEx3 {
	font-family: Meie Script, cursive;
}
.msgBox .stylePreview .styleEx4 {
	font-family: WindSong, cursive;
}