body {
	margin: 0px;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	font-family: 'CLCF-Regular';
}

button {
	border: none;
}

.cntmomentum {
	float: left;
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.cntnpc {
	position: absolute;
	overflow: visible;
	left: 0px;
	top: 0px;
	z-index: 25;
	background-color: transparent;
	pointer-events: none;
}

.npcBalloonBack {
	font-family: 'CLCF-Bold';
	background-color: transparent;
	color: rgb(0, 18, 63);
	overflow: hidden;
	z-index: 26;
}

.npcBalloonText {
	font-family: 'CLCF-Bold';
	background-color: transparent;
	color: rgb(0, 18, 63);
	overflow: hidden;
	z-index: 27;
}

.uiMomentumBack {
	background-color: transparent;
}

.uiMomentumBackStepTitle {
	background-color: rgba(255, 255, 255, 0.1);
}

.uiMomentumTitle {
	font-family: 'CLCF-Regular';
	color: white;
	overflow: visible;
	text-shadow: 0 0 1em skyblue, 0 0 0.2em skyblue;
}

.uiMomentumTitle2 {
	font-family: 'CLCF-Regular';
	color: black;
	overflow: visible;
	text-shadow: 0 0 1em darkgray, 0 0 0.2em darkgray;
}

.uiMomentumTitle3 {
	font-family: 'CLCF-Bold';
	color: rgb(29, 45, 66);
	overflow: visible;
	text-shadow: 0 0 1em darkgray, 0 0 0.1em darkgray;
}

.uiMomentumTitle4 {
	font-family: 'CLCF-Bold';
	color: rgb(53, 18, 0);
}

.uiMomentumStepTitle {
	vertical-align: middle;
	white-space: nowrap;
}

.uiMomentumDetail {
	font-family: 'CLCF-Regular';
	vertical-align: top;
	color: white;
	background-color: transparent;
	text-shadow: 0 0 1em skyblue, 0 0 0.2em skyblue;
}

.uiMomentumDetail2 {
	font-family: 'CLCF-Regular';
	vertical-align: top;
	color: rgb(52, 16, 0);
}

.uiMomentumMultiLineH150 {
	line-height: 150%;
}

.uiMomentumStepDetail {
	vertical-align: middle;
}

.uiMomentumTitleFail {
	font-family: 'CLCF-Regular';
	vertical-align: top;
	color: white;
	background-color: transparent;
	text-shadow: 0 0 0.2em black, 0 0 0.2em black;
}

.uiMomentumDetailFail {
	font-family: 'CLCF-Regular';
	vertical-align: top;
	color: rgb(180, 194, 223);
	background-color: transparent;
	text-shadow: 0 0 0.2em black, 0 0 0.2em black;
}

.uiMomentumListBack {
	background-color: transparent;
}

.uiMomentumStepNum {
	font-family: 'CLCF-Bold';
	text-align: left;
	vertical-align: top;
	color: darkblue;
	background-color: transparent;
	overflow: visible;
	font-weight: 900;
	font-style: italic;
}

.uiMomentumCounter {
	background-color: transparent;
}

.uiMomentumBtn1 {
	font-family: 'CLCF-Regular';
	background-color: transparent;
	background-image: url('./image/chemlab_btn_normal.png');
	background-size: 100% 100%;
}

.uiMomentumBtn1:hover {
	background-image: url('./image/chemlab_btn_pushed.png');
}

.uiMomentumBtn1:active {
	background-image: url('./image/chemlab_btn_pushed.png');
}

.uiMomentumBtnText1 {
	color: white;
	text-shadow: 0 0 1em skyblue, 0 0 0.2em skyblue;
	text-align: center;
	background-color: transparent;
}

.uiMomentumBtn2 {
	font-family: 'CLCF-Regular';
	background-color: transparent;
	background-image: url('./image/pro_btn_normal.png');
	background-size: 100% 100%;
}

.uiMomentumBtn2:hover {
	background-image: url('./image/pro_btn_pushed.png');
}

.uiMomentumBtn2:active {
	background-image: url('./image/pro_btn_pushed.png');
}

.uiMomentumBtnText2 {
	color: white;
	text-shadow: 0 0 1em skyblue, 0 0 0.2em skyblue;
	text-align: center;
	background-color: transparent;
}

.uiMomentumBtn3 {
	font-family: 'CLCF-Regular';
	background-color: transparent;
	background-image: url('./image/mm_btn_normal.png');
	background-size: 100% 100%;
}

.uiMomentumBtn3:hover {
	background-image: url('./image/mm_btn_pushed.png');
}

.uiMomentumBtn3:active {
	background-image: url('./image/mm_btn_pushed.png');
}

.uiMomentumBtnText3 {
	color: black;
	text-align: center;
	background-color: transparent;
}

.uiMomentumBtnExperiment {
	background-color: orange;
	border: black 1px solid;
	color: black;
	text-align: center;
}

.uiMomentumBtnStep {
	background-color: transparent;
	background-image: url('./image/btn_step_main_normal.png');
	background-size: 100% 100%;
}

.uiMomentumBtnStep_Selected {
	background-image: url('./image/btn_step_main_pushed.png');
}

.uiMomentumBtnSubstep {
	background-color: transparent;
	background-image: url('./image/btn_step_sub_normal.png');
	background-size: 100% 100%;
}

.uiMomentumBtnSubstep_Selected {
	background-image: url('./image/btn_step_sub_pushed.png');
}

.uiMomentumBtnCloseSteps {
	background-color: transparent;
	background-size: 100% 100%;
}

.uiMomentumBtnCloseSteps_btn {
	background-color: transparent;
	background-image: url('./image/btn_step_list_close.png');
	background-size: 100% 100%;
}

.my-element {
	display: inline-block;
	margin: 0 0.5rem;
	animation: bounce; /* referring directly to the animation's @keyframe declaration */
	animation-duration: 2s; /* don't forget to set a duration! */
}

.svgCanvas {
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 2;
	pointer-events: none;
}

.measureDistancePoint {
	position: absolute;
	border: 1px solid rgba(54, 19, 0, 0.9);
	background-color: rgba(255, 245, 215, 0.9);
	width: 8px;
	height: 8px;
	border-radius: 4px;
	margin: -4px 0px 0px -4px;
	z-index: 4;
}

.measureDistanceArrow {
	position: absolute;
	width: 128px;
	height: 110px;
	line-height: 60px;
	font-size: 32px;
	text-align: center;
	background-image: url('./image/measure_dist_arrow.png');
	background-size: 100% 100%;
	z-index: 3;
	user-select: none;
	pointer-events: none;
}

.measureDistanceText {
	position: absolute;
	background-image: url('./image/measure_dist_text_box.png');
	background-size: 100% 100%;
	width: 156px;
	height: 74px;
	line-height: 60px;
	text-align: center;
	color: black;
	font-size: 32px;
	font-weight: bold;
	z-index: 3;
	user-select: none;
	pointer-events: none;
	transform: translate(-50%, 10%);
}

.dataTable {
	table-layout: fixed;
	width: 100%;
	height: 100%;
	font-family: 'CLCF-Regular';
	font-size: 20px;
	text-align: center;
}

.dataTable td {
	text-align: center;
	border: 8px solid transparent;
	border-radius: 8px;
}

.dataTableHeaderRow1 {
	font-family: 'CLCF-Bold';
	background-color: yellowgreen;
	height: 20%;
}

.dataTableHeaderRow2 {
	font-family: 'CLCF-Bold';
	background-color: yellowgreen;
	height: 20%;
}

.dtH1 {
	background-color: rgb(255, 252, 183);
	width: 10%;
}

.dtH2 {
	background-color: rgb(183, 255, 241);
	width: 45%;
}

.dtH3 {
	background-color: rgb(233, 203, 231);
	width: 45%;
}

.dtDD2 {
	width: 13%;
	background-color: rgb(183, 255, 241);
}

.dtDD22 {
	width: 20%;
	background-color: rgb(183, 255, 241);
}

.dtDD3 {
	width: 13%;
	background-color: rgb(233, 203, 231);
}

.dtDD32 {
	width: 20%;
	background-color: rgb(233, 203, 231);
}

.dataTableRow {
	font-family: 'CLCF-Regular';
	background-color: lightgray;
	height: 20%;
}

.dataTableRowCurrent {
	font-family: 'CLCF-Regular';
	background-color: white;
	height: 20%;
}

.dataCellReadOnly {
	pointer-events: none;
	background-color: lightgray;
}

.dataCellEdit {
	pointer-events: auto;
	background-color: white;
}

.MsgBoxBack {
	pointer-events: all;
	z-index: 100;
	background-color: rgba(32, 32, 32, 0.7);
}

.MsgBoxOverlay {
	z-index: 101;
}

.uiMomentumMsgBox {
	font-family: 'CLCF-Regular';
	text-align: center;
	vertical-align: top;
	color: white;
	background-color: transparent;
	text-shadow: 0 0 1em skyblue, 0 0 0.2em skyblue;
	line-height: 150%;
}

.uiMomentumQuizAnswerEdit {
	padding: 8px;
	border: 1px solid black;
	box-shadow: 5px 10px 8px #888888;
	color: rgb(53, 18, 0);
}

.uiMomentumQuizAnswerNormal {
	border: 1px solid rgb(53, 18, 0);
	pointer-events: auto;
}

.uiMomentumQuizAnswerSelection {
	border: 1px solid rgb(53, 18, 0);
	background: rgb(53, 18, 0);
	box-shadow: 5px 5px 4px rgb(53, 18, 0);
	color: white;
}